Reputation: 1857
I am trying to set init-date in angular bootsrap's datepicker directive. And I am getting the below error
Error: [$parse:syntax] Syntax Error: Token 'Jun' is an unexpected token at column 5 of the expression [Sun Jun 21 2015 17:00:00 GMT-0700 (PDT)] starting at [Jun 21 2015 17:00:00 GMT-0700 (PDT)].
Below is the mark up I am 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 I have in 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 exactly sure what I might be missing here...can someone help?
Upvotes: 6
Views: 8160
Reputation: 11
I fixed this issue by setting the minDate and maxDate to be milliseconds:
minDate: new Date().getTime()
EDIT: Converting the Date object to milliseconds is only needed when using minDate/maxDate as properties of the options object. If passing it as an attribute it can remain a Date object.
Upvotes: 1
Reputation: 51
For those who cannot update beyond 0.12 but have to set the min and max dates, I was able to find a workaround. I put the options in the scope as shown below.
Admittedly, it's ugly and annoying but resetting the dates via setDate() was the only thing that made it work for me. Just sharing. Make this your 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
};
Upvotes: 1
Reputation: 99
For those, who can't use 0.13: you may assign init date directly to the model:
module.controller[...., function(....){
//Init
$scope.dt = new Date();
$scope.dt.setDate($scope.dt.getDate()-7);
}]
Upvotes: 0
Reputation: 1857
Upgrade to the latest version 0.13 should fix the problem...I was using version 0.12
Hope this helps...
Upvotes: 2