Service portal use "glyphicon-calendar" datepicker, how to detect calendar change in client script?

[jameswang]

I am developing service portal and having a question on the datepicker.

My HTML is below.

<div class='input-group date' id="datetimepicker3">

                        <input type='text' id='SelectRepeated_Dates' class="form-control"

                                      ng-model="myDate"

                                      ng-change="mychange()">

                        <span class="input-group-addon" >

                                <span class="glyphicon glyphicon-calendar"></span>

                        </span>

                  </div>

                  <script>

                      $(function () {

                              $('#datetimepicker3').datetimepicker({

                                      icons: {

                                            time: "fa fa-clock-o",

                                            date: "fa fa-calendar"

                                      },

                                      format: 'YYYY-MM-DD',

                                      minDate: 1,

                                      disabledDates: [

                                              moment(new Date()),

                                      ]                  

                              });

                              $("#datetimepicker3").on("dp.change", function (e) {

                                  var vToday = new Date();

                                  var vRepeat_dates = document.getElementById('repeat_dates');

                                  vToday = Date.parse(vToday.getMonth()+1+'-'+vToday.getDate()+'-'+vToday.getFullYear());

                                  var selDate = Date.parse(e.date);

                                  if (selDate < vToday) {

                                        alert('Please select a date later than today.');

                                        $("#datetimepicker3").val('');

                                        document.getElementById('SelectRepeated_Dates').value = '';

                                  } else if (selDate > vToday){

                                        vRepeat_dates.value = vRepeat_dates.value+angular.element('#SelectRepeated_Dates').val()+', ';

                                        //console.log('Repeat dates:...'+selDate+'...'+vToday);              

                                  }

                              });  

                      });

                  </script>                        

                  <p></p>

                  <p>Repeat Dates</p>

                  <p></p>

                  <input type="text" class="form-control" ng-model= "c.data.repeatDates" id="repeat_dates">                

                  <p></p>

Basically, what it does is when user click the datepicker icon (datetimepicker3), the script validates the date and copy it to the next text field (id="repeat_dates").

The alert, validation and copy selected date are all working on my chrome on Mac and on my android phone, but it's not on iPad (neither chrome nor safari).     which makes me feel the javascript in iPad is not functioning even though the Safari setting in iPad shows the javascript is ON.

when I put the following to the Client script,

$scope.mychange = function () {

alert ('er2222eer');

}

it catches the event when you type/click on the input text field of the datepicker, but it's not responding when select direct from the datepicker.

I tried to change the javascript code in HTML to Client script, but I don't know what event to use. (The current in the javascript is using dp.change).  

Any help is welcome.   Thanks.

[jameswang · Accepted solution]

I found the resolution, please ignore.   Thanks.

[G Balaji]

Kindly share the steps you took to resolve the issue. It may be useful for the one in need.