AngularJs DatePicker - calendar dropdown doesn't react to model change

Question

I'm using AngularJs datepicker and being stuck at this problem for a while now.

In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.

Clicking on This Month button will activate a model change in the controller, just like this:

if (when == 'this_month') {
    $scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
    $scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}

The HTML

<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">

<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">

It works just fine for everything: the date gets changed, the text input shows this month's date, etc.

However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)

For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.

How should I tap into the DatePicker's calendar then?

i think the date format you are entering the date is not in sync with how the datepicker expects it to be.. hence your ng-model is not getting updated or date is not getting parsed correctly — harishr

Kisspa Kisspa · Accepted Answer · 2015-12-10T03:12:07

HTML

<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">

Angular JS

$scope.getDateTo = function (date_to) {
       $scope.dateTo = date_to;
        console.log(date_to);
 }
$scope.getDatefrom = function (date_from) {
       $scope.dateFrom = date_from;
       console.log(date_from);
 }

Other way

$scope.$watch('date_form', function (date_form) { 
  $scope.dateForm = date_form;
 });
  $scope.$watch('date_to', function (date_to) { 
  $scope.dateTo = date_to;
 });

AngularJs DatePicker - calendar dropdown doesn't react to model change

1 Answers