CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Mike Sav
Mike Sav

Reputation: 15291

ui-bootstrap datepicker not working with min and max date

I am using the Datepicket that is part of the AngularJS ui-bootstrap module. I'm following the tutorial / example given (see http://angular-ui.github.io/bootstrap/#/datepicker) but when trying to prevent users from selecting dates earlier than today or greater than 3 months from today doesn't seem to be working correctly as these are still clickable.

This is the datepicker in my view... I've written the ng-model, min-date & max-date values to the interface to make sure these are not null)

<datepicker ng-model="dt" min-date="minDate" max-date="maxDate" show-weeks="false"></datepicker>
dt = {{ dt }}
minDate = {{ minDate }}
maxDate = {{ maxDate }}

The values are being returned....

dt = "2014-04-30T15:31:46.746Z" 
minDate = "2014-05-27T15:31:46.746Z"
maxDate = "2014-08-27T15:31:46.751Z"

this is my controller code... most of it taken from the example provided on the ui-bootstrap site

$scope.today = function() {
  $scope.dt = new Date();
};
$scope.today();

$scope.toggleMin = function() {
  $scope.minDate = $scope.minDate ? null : new Date();
};
$scope.toggleMin();

$scope.maxDate  = new Date(new Date().setMonth(new Date().getMonth()+3));

Can anyone see what I'm doing wrong? I can't see what typo or mistake I have made? I am using Chrome 34.0.1847.137 on OS X 10.9.2 so browser compatibility shouldn't be an issue.

Upvotes: 3

Views: 22535

Answers (5)

John
John

Reputation: 1247

I couldn't get the max or max-date attributes to work.

Instead, I found that I had to configure the datepicker-options property on the control. Reference here.

Template

<input type="text" class="form-control" uib-datepicker-popup="d/M/yyyy" ng-model="ctrl.calendarControl.selectedDate" datepicker-options="ctrl.calendarControl.dateOptions" />

Controller

self.calendarControl = {
    dateOptions: {
        maxDate: new Date()
    }
};

Upvotes: 1

satish sagar
satish sagar

Reputation: 1

    $(function () {
        $("[id$=txtpaymentdate]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            format: "dd/mm/yyyy",

            todayBtn: "linked",
            language: "ru",
            autoclose: true

        });
    });

Upvotes: -5

amit
amit

Reputation: 406

<input type="text" datepicker-popup="{{format}}" 
                            ng-model="dt" is-open="opened" 
                            min="'2014-09-09'" max="'2015-06-22'"
                            datepicker-options="dateOptions" 
                            date-disabled="disabled(date, mode)" 
                            ng-required="true" 
                            close-text="Close" />

It work for me with the angular-1.2.8 version

Upvotes: 3

Vaibu
Vaibu

Reputation: 205

Simply use min and max attribute instead of min-date and max-date respectively in datepicker tag.

<input min="p.minStartDate" max="p.maxStartDate" ng-model="p.startDate" datepicker-popup="{{'dd-MM-yyyy'}}"  datepicker-options="p.dateOptions"/>

Upvotes: 11

lbrazier
lbrazier

Reputation: 2654

What version of Angular Bootstrap are you using? I noticed I had to upgrade to 0.11.0 to get min and max date to work. In 0.10.0, min and max date did not work for me. I had to use date-disabled instead.

Upvotes: 6

Related Questions