minDate and maxDate options are not working in datepicker

Question

I'm using the "datepicker" plugin on my project, it's set to decade view, and I want to disable the future dates, for this I have used the maxDate option but it's not working, my code:

$('#data_1 .input-group.date').datepicker({
    todayBtn: "linked",
    maxDate: "0",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true
});

tried with 0 and new Date

I try in the api's web: https://uxsolutions.github.io/bootstrap-datepicker/ ; if you put today at End date input its generate - endDate: "today" - so try to delete maxDate and add endDate: "today" — sixerss, Jun 06 '17 at 14:20

score 12 · Accepted Answer · answered Jun 06 '17 at 15:26

Note that bootstrap-datepicker has no maxDate option, you have to use endDate.

Here a working sample:

$("#datepicker").datepicker({
  todayBtn: "linked",
  endDate: new Date(),
  keyboardNavigation: false,
  forceParse: false,
  calendarWeeks: true,
  autoclose: true
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<input type="text" class="form-control" id="datepicker">

score 2 · Answer 2 · answered Jun 06 '17 at 13:30

2

Try below code:

var today = new Date();  
$('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            endDate: "today",
            maxDate: today
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

Also you can try with:

 maxDate: 0

answered Jun 06 '17 at 13:30

Ahmed Ginani

6,522
2
15
33

tried your solution not working, yes i tried with both "0" and "new date()", nothing seems to be working !! – Ranjith M Jun 06 '17 at 13:38

score 0 · Answer 3 · answered Jan 18 '18 at 09:08

0

Adding attribute data-date-end-date="0d" worked for me:

<input type="text" id="birthDay" data-date-end-date="0d">

answered Jan 18 '18 at 09:08

RP Nainwal

305
5
8

score 0 · Answer 4 · answered Oct 05 '18 at 07:02

If u are trying calendar for start date and end date then this will help you :)

`$("#from").datepicker({
    format : 'dd-mm-yyyy',
    endDate: '<?php echo $to; ?>',
    changeMonth: false,
    changeYear: false,
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "startDate", selectedDate);
    }
});
$("#to").datepicker({
    format : 'dd-mm-yyyy',
    startDate: '<?php echo $from; ?>',
    changeMonth: false,
    changeYear: false,
    prevText: '<i class="fa fa-chevron-left"></i>',
    nextText: '<i class="fa fa-chevron-right"></i>',
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "endDate", selectedDate);
    }
});`

minDate and maxDate options are not working in datepicker

4 Answers4

Linked