Angular UI Bootstrap DatePicker initDate Issue

Question

I am trying to set the initialization date in the angular datepicker bootsrap directive. And I get the error below

Error: [$ parse: syntax] Syntax error: the 'Jun' token is an unexpected marker in column 5 of the expression [Sun Jun 21 2015 17:00:00 GMT-0700 (PDT)] starting on [June 21, 2015 17:00:00 GMT-0700 (PDT)].

Below is the mark I'm using

<div ng-controller="DatepickerDemoCtrl"> <h4>Popup</h4> <div class="row"> <div class="col-md-6"> <p class="input-group"> <input type="text" class="form-control" init-date="dateOptions.initDate" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="dateOptions.minDate" max-date="'2016-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" /> <span class="input-group-btn"> <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button> </span> </p> </div> </div> 

and here is the javascript side in my place

 angular.module('app', ['ui.bootstrap']); angular.module('app').controller('DatepickerDemoCtrl', function ($scope) { $scope.open = function($event) { $event.preventDefault(); $event.stopPropagation(); $scope.opened = true; }; $scope.dateOptions = { formatYear: 'yy', startingDay: 1, minDate: new Date(2015, 9, 9), initDate: new Date('2015-06-22') }; $scope.format = ['MM-dd-yyyy']; }); 

Not quite sure what I can skip here ... can someone help?

Answer 1

Updating to the latest version 0.13 should fix the problem ... I used version 0.12

Hope this helps ...

Answer 2

Removing minDate, maxDate with dateOptions fixed my problem.

Answer 3

For those who cannot update beyond 0.12 but need to set minimum and maximum dates, I managed to find a workaround. I put the parameters in the scope as shown below.

Admittedly, this is ugly and annoying, but resetting dates with setDate () was the only thing that made it work for me. Just share it. Make it the last option.

 var minDate = new Date(2017, 3, 27); minDate = minDate.setDate(minDate.getDate()-0); var maxDate = new Date(); maxDate = maxDate.setDate(maxDate.getDate()-0); $scope.dpOptions = { minDate: minDate, maxDate: maxDate }; 

Answer 4

For those who cannot use 0.13: you can set the initialization date directly to the model:

 module.controller[...., function(....){ //Init $scope.dt = new Date(); $scope.dt.setDate($scope.dt.getDate()-7); }]