How to locate 'datepicker' instance in protractor when it is dynamic

Question

When i'm trying to locate 'datepicker' in protractor, i found every time a new date the instance/object of 'datepicker' created with same class='.datepicker' with incremented value of z-index, but i want to handle the single object or at least old object/instance should get destroyed to locate new object.

Following code/snippets will depicts the above explanation.

<!-- HTML CODE -->
<div class="form-group">
 <label>Start Date</label>
   <div class="input-group date  form_datetime" 
    data-date- format="yyyy-mm-dd hh:ii"
     data-link-field="dtp_input1">
         <input class="form-control" size="16" ng-class="submitted:myScheduleForm.submitted}" ng-model="pollConfigInfo.startTime" readonly="" type="text" required=""/>
        <span class="input-group-addon">
          <i class="fa fa-times" style="cursor: pointer"></i>
          </span>
           <span class="input-group-addon">
             <i class="fa fa-calendar" style="cursor: pointer"></i>
            </span>
         </div>
    <input id="dtp_input1" value="" type="hidden"/>
  </div>

JAVASCRIPT CODE:

  <script>
     $('.form_datetime').datetimepicker({
            //language:  'fr',
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
</script>

Protractor Snippet to select datepicker

selectStartTimeAndDate: 
  {
   value : function()
   {

        var picker = element(by.css('.fa-calendar'));
        picker.click();
        browser.driver.sleep(2000);

         var day = element(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1'));
          day.click();

  var hour = element(by.cssContainingText('span.hour_am','12'));
  hour.click();

   var min = element(by.cssContainingText('span.minute','12:00'));
   min.click();
 }
},

I'm not able to locate the 'picker' class due to this:

may be answers here can help you : http://stackoverflow.com/questions/35860488/how-to-test-a-angular-js-date-picker-from-protractor — Emna Ayadi, May 25 '16 at 07:48
but my input field is restricted to readonly property so i can't make editable...... :( — balu, May 25 '16 at 08:21
ok sorry for that i didn't use date datepicker in protractor before — Emna Ayadi, May 25 '16 at 08:22

score 0 · Answer 1 · answered May 25 '16 at 09:47

I got answer by making some changes in the protractor snippet like this:

var picker = element(by.css('.fa-calendar'));
picker.click();
browser.driver.sleep(2000);

var day = element.all(by.cssContainingText('div.datetimepicker-days > table.table-condensed > tbody > tr > td.day','1')).last();
day.click();

var hour = element.all(by.cssContainingText('span.hour_am','12')).last();
hour.click();

var min = element.all(by.cssContainingText('span.minute','12:00')).last();
min.click();

How to locate 'datepicker' instance in protractor when it is dynamic

1 Answers1