ui-bootstrap datepicker not working with min and max date

Question

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.

It looks like you're getting the ISOString. This might help w3schools.com/jsref/jsref_toisostring.asp — camden_kid
– camden_kid, Commented May 27, 2014 at 15:51

efirat · Accepted Answer · 2014-08-13 14:37:56Z

11

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"/>

edited Aug 13, 2014 at 14:37

efirat

3,8972 gold badges42 silver badges45 bronze badges

answered Jul 10, 2014 at 8:44

Vaibu

2052 silver badges6 bronze badges

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

4 Comments

TigrouMeow Over a year ago

Not sure why this is not in the doc. Thanks a lot :)

brandonjp Over a year ago

So baffled by this... min-date works just dandy in the demo and this plunker but in my app, using the same exact angular & ui-bootstrap versions, I cannot get min-date to work, but min works fine. Good enough for now, but if anyone has insight, please lemme know.

Tim Büthe Over a year ago

@brandonjp: Maybe this isn't in the datepicker documentation, because this isn't a datepicker specific validator but a "normal" angular validaor. See docs.angularjs.org/guide/forms, they mention min and max.

Tim Büthe Over a year ago

min and max validate the input field. min-date and max-date control the datepicker and disable dates beyond that range.

lbrazier · Accepted Answer · 2014-05-27 16:23:01Z

6

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.

answered May 27, 2014 at 16:23

lbrazier

2,6541 gold badge27 silver badges22 bronze badges

2 Comments

Mike Sav Over a year ago

We have a winner! Thanks for the answer, an upgrade has solved this issue!

Kleigh Over a year ago

Can you show me your implementation of data-disabled Imyers? Having the same issue.

amit · Accepted Answer · 2014-09-10 07:24:23Z

3

<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

answered Sep 10, 2014 at 7:24

amit

4064 silver badges6 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 15, 2016 at 13:24

John

1,2771 gold badge16 silver badges24 bronze badges

Comments

satish sagar · Accepted Answer · 2015-01-27 11:04:54Z

-5

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

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

        });
    });

answered Jan 27, 2015 at 11:04

satish sagar

1

1 Comment

Nagama Inamdar Over a year ago

Welcome to Stackoverflow. As we can see the question has been tagged with angular js.

Collectives™ on Stack Overflow

ui-bootstrap datepicker not working with min and max date

5 Answers 5

4 Comments

2 Comments

Comments

Template

Controller

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

Template

Controller

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related