CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrap
NiK
NiK

Reputation: 1857

Angular UI Bootstrap DatePicker initDate Issue

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

Answers (5)

NejcS
NejcS

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

iamthearvin
iamthearvin

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

dmitreyg
dmitreyg

Reputation: 2625

Removing minDate, maxDate from dateOptions fixed my problem.

Upvotes: 1

user2706534
user2706534

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

NiK
NiK

Reputation: 1857

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

Hope this helps...

Upvotes: 2

Related Questions