Bootstrap datepicker disabling past dates without current date

Question

I wanted to disable all past date before current date, not with current date. I am trying by bootstrap datepicker library "bootstrap-datepicker" and using following code:

$('#date').datepicker({ 
    startDate: new Date() 
});

It works fine. But it is disabling date till today.

As example if today is 04-20-2013 and i disable past dates by setting startDate: new Date(). but I am able to select date from 04-21-2013.

UPDATED: i can solve it as following for UTC zone:

var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));

or startDate: "+0d"

But these methods don't work when UTC is a day ahead. For my client in California that means at 5:00 pm my client can no longer select his local current date as a valid date. In order to fix this I am temporarily using startDate: "-1d", but of course before 5 that means yesterday is visible.

Has anyone come up with a better method for now as I do not want to tell users to put in a UTC date?

Are you using Bootstrap 2.0.4+ jQuery 1.7.1+? – Praveen Kumar Purushothaman Apr 20 '13 at 17:18 — Praveen Kumar Purushothaman, Apr 20 '13 at 17:18
I am using Bootstrap v2.2.1 and jQuery 1.8.1 – itskawsar Apr 20 '13 at 17:41 — itskawsar, Apr 20 '13 at 17:41

score 60 · Answer 1 · answered Apr 20 '13 at 17:24

60

var date = new Date();
date.setDate(date.getDate()-1);

$('#date').datepicker({ 
    startDate: date
});

answered Apr 20 '13 at 17:24

Tom Hartman

1,183
2
11
18

if the timezone will changed in future, what will happen? – itskawsar Apr 20 '13 at 17:53
2

I'm not entirely sure. You might want to take a look at this thread: [Need to display local times over DST transitions using Javascript Date Object](http://stackoverflow.com/questions/7310560/need-to-display-local-times-over-dst-transitions-using-javascript-date-object) – Tom Hartman Apr 20 '13 at 20:36
1

i got TypeError: option startDate is not recognized! do you know the problem – Himanshu Pandey Feb 19 '16 at 06:14
Your Script was short to use, but it allows user to select yesterday's date. but [this](https://github.com/eternicode/bootstrap-datepicker/issues/438) **solution works**. Hope helps. – Shaiju T Oct 04 '16 at 13:18
is there anyway that this can be done dynamically and not set in the options? – Tristanisginger May 21 '20 at 15:10

score 25 · Answer 2 · answered Jul 15 '15 at 09:33

25

Use minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});

answered Jul 15 '15 at 09:33

Sebastian

2,154
1
26
42

3

for simplicity use `moment.js` like `minDate: moment()` – Saahithyan Vigneswaran Feb 24 '17 at 07:11
1

Just so future users are aware, this solution is for a different plugin ('bootstrap-datetimepicker'). – thargenediad Jun 06 '19 at 13:34

score 24 · Answer 3 · answered Apr 21 '15 at 13:09

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker">

JS

jQuery(function() {
  var datepicker = $('input.datepicker');

  if (datepicker.length > 0) {
    datepicker.datepicker({
      format: "mm/dd/yyyy",
      startDate: new Date()
    });
  }
});

That will highlight the default date as 4/26/2015 (Apr 26, 2015) in the calendar when opened and disable all the dates before current date.

score 19 · Answer 4 · answered Apr 06 '16 at 01:55

19

use

startDate: '-0d'

Like

$("#datepicker").datepicker({
    startDate: '-0d',
    changeMonth: true
});

answered Apr 06 '16 at 01:55

Ryan Knol

304
2
7

score 8 · Answer 5 · answered Apr 14 '16 at 11:21

8

You can use the data attribute:

<div class="datepicker" data-date-start-date="+1d"></div>

answered Apr 14 '16 at 11:21

dcalvert

81
1
2

score 7 · Answer 6 · answered Mar 04 '15 at 07:17

7

var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
 $('#date').datetimepicker({
  startDate: today
 });

answered Mar 04 '15 at 07:17

cfprabhu

5,267
2
21
30

akpp · Answer 7 · 2019-05-14T00:02:14.507

6

The solution is much simpler:

$('#date').datepicker({ 
    startDate: "now()" 
});

Try Online Demo and fill input Start date: now()

edited May 14 '19 at 00:02

answered May 13 '19 at 23:56

akpp

706
10
12

Just for info, ```startDate: "tomorrow" ``` or ```startDate: "yesterday" ``` also work if needed. – skirato Oct 03 '19 at 18:22

score 5 · Answer 8 · answered Sep 11 '15 at 10:47

5

<script type="text/javascript">
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    startDate: '-0d',
    autoclose: true,
})

answered Sep 11 '15 at 10:47

Chaitanya K

1,788
6
28
39

1

Could you explain why this should work and why it's a better solution than the accepted answer from 2 years ago? – Mike Cluck Sep 11 '15 at 13:44

score 4 · Answer 9 · answered Jul 28 '16 at 13:26

Here it is

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);

            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>

score 4 · Answer 10 · answered Feb 07 '17 at 07:18

4

Try it :

$(function () {
     $('#datetimepicker').datetimepicker({  minDate:new Date()});
});

answered Feb 07 '17 at 07:18

Lakhan

12,328
3
19
28

score 4 · Answer 11 · answered Aug 23 '18 at 21:25

To disable past dates & highlight today's date:

$(function () {
    $('.input-daterange').datepicker({
        startDate : new Date(),
        todayHighlight : true
    });
});

To disable future dates & highlight today's date:

$(function () {
    $('.input-daterange').datepicker({
        endDate : new Date(),
        todayHighlight : true
    });
});

For more details check this out https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

score 3 · Answer 12 · edited Mar 03 '17 at 06:03

Disable all past date

<script type="text/javascript">
        $(function () {
            /*--FOR DATE----*/
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            //Date1
            $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
              format: 'dd-mm-yyyy',
              todayHighlight:'TRUE',
              startDate: today,
              endDate:0,
              autoclose: true
            });

        });
</script>

Disable all future date

 var date = new Date();
 var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

   //Date1
   $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
       format: 'dd-mm-yyyy',
       todayHighlight:'TRUE',
       minDate: today,
       autoclose: true
   });

score 3 · Answer 13 · answered May 08 '17 at 10:44

Please refer to the fiddle http://jsfiddle.net/Ritwika/gsvh83ry/

**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />

var date = new Date();
 date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
 autoclose: true,
 todayHighlight: true,
 format: 'dd/mm/yyyy',
  startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
    var temp = $(this).datepicker('getDate');
    var d = new Date(temp);
  d.setDate(d.getDate() + 1);
  $('.datepickend').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d
}).on('changeDate', function() {
    var temp1 = $(this).datepicker('getDate');
    var d1 = new Date(temp1);
   d1.setDate(d1.getDate() + 1);
  $('.datepickthird').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d1
});
});
});

score 3 · Answer 14 · answered Feb 20 '19 at 08:58

3

You can simply add data attribute in html input tag:

In rails html :

<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>

HTML :

<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">

answered Feb 20 '19 at 08:58

Sanjay Choudhary

212
2
8

`data-date-start-date="+0d"` did it. Thanks – lomse Mar 21 '19 at 13:53
I am working on rails and it helped me, upvoted. Provided `data:{ provide:'datepicker', 'date-start-date': "+1d"}` for getting dates from tomorrow – ray Aug 28 '19 at 15:50

score 1 · Answer 15 · answered May 24 '18 at 06:42

In html

<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">

In Js side

<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());

        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })

    });

score 0 · Answer 16 · answered Nov 15 '16 at 10:56

0

to disable past date just use :

  $('.input-group.date').datepicker({
       format: 'dd/mm/yyyy',
       startDate: 'today'
  });

answered Nov 15 '16 at 10:56

Shaurya

136
1
4
20

score 0 · Answer 17 · edited Jun 07 '17 at 19:47

0

The following worked for me

$('.input-group.date').datepicker({
     format: 'dd/mm/yyyy',
     startDate: new Date()
});

edited Jun 07 '17 at 19:47

FortyTwo

2,414
3
22
33

answered Jun 07 '17 at 18:08

user8127348

11

1

This does not answer the question. You should give an answer that fixes the problem, explain _why_ it works, explain _how_ it works, this way other people can learn. How did you come up with this answer? That is something you should include in your answers. Your answer is not helpful to other readers in it's current state. – GrumpyCrouton Jun 07 '17 at 19:19

score 0 · Answer 18 · answered Oct 12 '18 at 17:11

It depends on what format you put on the datepicker So first we gave it the format.

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 
    var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want

Then Pass the datepicker (depends on the version you using, could be startDate or minDate which is my case )

    //Datetimepicker
    $(function () {
        $('#datetimepicker1').datetimepicker({
            minDate: today, //pass today's date
            daysOfWeekDisabled: [0],
            locale: 'es',
            inline: true,
            format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
            sideBySide: true
        });
    });

score 0 · Answer 19 · answered May 02 '19 at 10:00

You can find your solution in this link below: https://codepen.io/ahmetcadirci25/pen/NpMNzJ

Thats work for me.

My code:

        var date = new Date();
        date.setDate(date.getDate());

        $('#datetimepicker1').datetimepicker({
            isRTL: false,
            format: 'dd.mm.yyyy hh:ii',
            autoclose: true,
            language: 'tr',
            startDate: date
        });

score 0 · Answer 20 · answered Feb 25 '20 at 14:10

If your requirement is to disable the startDate and endDate dynamically based on one on another you can you this.

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date3').datepicker('getDate');
            if(date){
             $('#date2').datepicker('setEndDate', date);
                }
    });

        $('#date3').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date2').datepicker('getDate');
            if(date){
             $('#date3').datepicker('setStartDate', date);
                }
    });

If your requirement is just disabled past dates then you can use below snippet.

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true,
            startDate : new Date()
        })

If your requirement is just disabled future dates then you can use below snippet.

 $('#date2').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: "dd/mm/yyyy",
                clearBtn : true,
                endDate : new Date()
            })

I hope it will help someone.

Bootstrap datepicker disabling past dates without current date

20 Answers20

Linked

Related