Angular UI Bootstrap DatePicker initDate Issue

Question

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?

I think Angular is trying to parse a string as a javascript expression, like the error says. But it is unclear from the code you provide, which directive or attribute is causing this. — Christian Bonato
– Christian Bonato, Commented Apr 27, 2015 at 20:41

NiK · Accepted Answer · 2015-05-08 20:33:28Z

2

Upgrade to the latest version 0.13 should fix the problem...I was using version 0.12

Hope this helps...

answered May 8, 2015 at 20:33

NiK

1,8571 gold badge23 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bodagetta Over a year ago

Fixed it for me. Thanks!

dmitreyg · Accepted Answer · 2017-02-20 21:25:12Z

1

Removing minDate, maxDate from dateOptions fixed my problem.

answered Feb 20, 2017 at 21:25

dmitreyg

2,6351 gold badge20 silver badges20 bronze badges

Comments

iamthearvin · Accepted Answer · 2017-05-24 04:13:07Z

1

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
};

answered May 24, 2017 at 4:13

iamthearvin

511 silver badge6 bronze badges

Comments

NejcS · Accepted Answer · 2018-03-29 12:21:10Z

1

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.

edited Mar 29, 2018 at 12:21

answered Mar 29, 2018 at 11:56

NejcS

112 bronze badges

Comments

user2706534 · Accepted Answer · 2015-05-19 13:24:14Z

0

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);

 }]

answered May 19, 2015 at 13:24

user2706534

997 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap DatePicker initDate Issue

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related