disable past dates on datepicker

Question

How to disable past dates from the current date on a datetimepicker? I tried few posts for similar question but was unable to achieve it, Below is what I tried

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> 
<script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
  $('#datetimepicker2').datetimepicker({
    language: 'en',
    pick12HourFormat: true
  });
});
</script>

<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
  <i  data-date-icon="icon-calendar">
  </i>
</span>

I also tried

$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true,  minDate:'0d' });

and

$("#datetimepicker2").datepicker({ minDate: 0 });

So far with help from http://tarruda.github.com/bootstrap-datetimepicker/ — Anna, Apr 02 '13 at 06:53
May be this post helpful:[Disable previous dates in date picker](https://devnote.in/how-to-disable-previous-dates-in-date-picker-using-jquery) — Fefar Ravi, Feb 23 '22 at 11:17

score 62 · Answer 1 · answered Apr 02 '13 at 06:55

62

Give zero to mindate and it'll disabale past dates.

$( "#datepicker" ).datepicker({ minDate: 0});

here is a Live fiddle working example http://jsfiddle.net/mayooresan/ZL2Bc/

The official documentation is available here

answered Apr 02 '13 at 06:55

Jay Mayu

17,023
32
114
148

This works fine in jsfiddle but not in my project, I also included still not working – Anna Apr 02 '13 at 07:14
Yes this works fine in JSFiddler but its when we add jQuery UI and I am not suppose to use jQuery UI in my project as I am using boostrap, is there another way to do so without jQuery UI? – Anna Apr 04 '13 at 04:26
"+1" with use this tutorial helpful: [How to disable previous dates in date picker using JQuery](https://devnote.in/how-to-disable-previous-dates-in-date-picker-using-jquery/) – Fefar Ravi Feb 23 '22 at 11:19

score 20 · Answer 2 · answered Apr 23 '13 at 08:28

20

Problem fixed :)

below is the working code

$(function(){
    $('#datepicker').datepicker({
        startDate: '-0m'
        //endDate: '+2d'
    }).on('changeDate', function(ev){
        $('#sDate1').text($('#datepicker').data('date'));
        $('#datepicker').datepicker('hide');
    });

})

answered Apr 23 '13 at 08:28

Anna

1,669
7
38
63

whose ID is the #sDate1? – leonardeveloper Aug 07 '13 at 02:23

score 14 · Answer 3 · edited May 23 '17 at 12:10

14

minDate: dateToday Or minDate: '0' is the key here. Try to set the minDate property.

$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 2,
        showButtonPanel: true,
        minDate: dateToday // minDate: '0' would work too
    });
});

edited May 23 '17 at 12:10

Community

1
1

answered Apr 02 '13 at 06:54

Techie

44,706
42
157
243

hope the jQuery UI js is included – Techie Apr 02 '13 at 07:15
I am not suppose to use jQuery UI in my project as I am using boostrap, is there another way to do so without jQuery UI? – Anna Apr 04 '13 at 04:25
http://network.convergenceservices.in/forum/40-joomla-tricks/2287-making-joomla-default-calendar-work-like-jquery-date-picker.html – Techie Apr 04 '13 at 06:12
1

Done, below is the code: $(function(){ $('#datepicker1').datepicker({ startDate: '-0m' //endDate: '+2d' }).on('changeDate', function(ev){ $('#sDate1').text($('#datepicker1').data('date')); $('#datepicker1').datepicker('hide'); }); }); – Anna Apr 04 '13 at 09:12

score 10 · Answer 4 · edited Aug 08 '16 at 07:36

10

try this,

$( "#datepicker" ).datepicker({ minDate: new Date()});

Here, new Date() implies today's date....

edited Aug 08 '16 at 07:36

slfan

8,950
115
65
78

answered Aug 08 '16 at 07:17

Pratik.S

470
10
30

score 9 · Answer 5 · edited Sep 30 '14 at 05:46

9

$(function () {
    $("#date").datepicker({ minDate: 0 });
});

edited Sep 30 '14 at 05:46

Hans Roerdinkholder

3,000
1
20
30

answered Sep 30 '14 at 05:07

Rama Krishna

101
1
1

score 7 · Answer 6 · edited Apr 18 '18 at 11:45

7

This will work:

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });

edited Apr 18 '18 at 11:45

Priyanka Maurya

385
1
10

answered Jul 07 '15 at 06:52

VIPIN A ROY

1,761
5
28
41

score 7 · Answer 7 · answered Mar 20 '20 at 12:35

7

Below solution worked for me. I hope, this will help you also.

$(document).ready(function() {
    $("#datepicker").datepicker({ startDate:'+0d' });
});

answered Mar 20 '20 at 12:35

Kamlesh

5,233
39
50

`startDate: '+0d'` only worked. `new Date()` solution didnt work for me. Thanks – Lizesh Shakya Dec 15 '20 at 04:57
This is the only solution that worked for me too – lStoilov Aug 01 '23 at 05:03

score 4 · Answer 8 · edited Oct 03 '16 at 12:59

4

Try this,

$("#datetimepicker2").datepicker({ startDate: "+0d" });

edited Oct 03 '16 at 12:59

Petter Friberg

21,252
9
60
109

answered Oct 03 '16 at 12:55

Pabari Mohit

92
1
2
9

Deepak Jha · Answer 9 · 2018-06-15T11:13:33.640

If you want to set date on page load then use this:

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

This will set today's date as start date on page load itself and disable all the previous dates.
But if you want to set date on click of particular text-box instead of setting it on page load then use this: $('#datetimepicker1').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $('#datetimepicker1').data("DateTimePicker").minDate(new Date()); });

In place of new Date(), we can use any string specifying Date in a format specified by us if we don't want to set current date as minimum date. e.g:

$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");

score 3 · Answer 10 · edited Nov 14 '16 at 07:48

3

var dateToday = new Date();

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

edited Nov 14 '16 at 07:48

Ingo Karkat

167,457
16
250
324

answered Nov 14 '16 at 07:22

pralhad bulange

31
1

Welcome to stack overflow :-) Please look at [answer] – JimHawkins Nov 14 '16 at 07:29

score 3 · Answer 11 · answered Nov 09 '17 at 02:59

3

this works for me,

$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });

answered Nov 09 '17 at 02:59

salamflamo

53
5

Deepu Reghunath · Answer 12 · 2020-01-15T15:40:04.280

To disable all previous dates, give start date as today date

startDate: new Date()

Solution: disable all previous dates from today

$(function() {
    $( "#datepicker" ).datepicker({ startDate: new Date()});
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<div> Select Date <input type="text" id="datepicker" /></div>

Solution: disable all past dates from a particular date.

$(function() {
    $( "#datepicker" ).datepicker({ startDate: new Date("2019-10-15")});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>

<div> Select Date <input type="text" id="datepicker" /></div>

This will disable all days before the date 15th October 2019 (2019-10-15)

score 2 · Answer 13 · answered Apr 13 '18 at 12:56

2

<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
    <input type="text" class="form-control" id="input_id" name="input_name" />
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>

answered Apr 13 '18 at 12:56

Shahid Ahmed

57
7

Any answer that gets the asker going in the right direction is helpful, but do try to mention any limitations, assumptions or simplifications in your answer. Brevity is acceptable, but fuller explanations are better. – baduker Apr 13 '18 at 13:15

Swapnil Nath · Answer 14 · 2017-09-21T11:15:51.577

you have just introduce parameter startDate as mentioned below.

var todaydate = new Date();
    $(".leave-day").datepicker({
        autoclose: true,
        todayBtn: "linked",
        todayHighlight: true,
        startDate: todaydate     
      }
    ).on('changeDate', function (e) {
        var dateCalendar = e.format();
        dateCalendar = moment(dateCalendar, 'MM/DD/YYYY').format('YYYY-MM-DD');
        $("#date-leave").val(dateCalendar);
    });

score 1 · Answer 15 · edited Sep 02 '21 at 00:27

1

Old date can excluded from datetimepicker by give all your datepicker inputs or textboxes attribute data-name='date' then

$('*[data-name="date"]').datetimepicker({
          format: 'L',
          minDate: new Date()
        });

edited Sep 02 '21 at 00:27

cursorrux

1,382
4
9
20

answered Aug 31 '21 at 07:56

Alaa Hamdy

21
2

score 0 · Answer 16 · answered Oct 27 '16 at 09:28

Try this'
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script>

score 0 · Answer 17 · edited Jul 25 '17 at 17:27

0

$("#datetimepicker2").datepicker({ 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
});

edited Jul 25 '17 at 17:27

perror

7,071
16
58
85

answered Jul 25 '17 at 17:10

Nikhil Gyan

682
9
16

score 0 · Answer 18 · edited Nov 28 '17 at 07:01

0

You can use

$('#li_from_date').appendDtpicker({
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
});

edited Nov 28 '17 at 07:01

ksokol

8,035
3
43
56

answered Nov 28 '17 at 05:53

Ramakrishnan Ramar

31
1
6

anuj rajak · Answer 19 · 2018-07-14T23:56:37.430

0

**this worked in my wordpress plugin **

 jQuery(document).ready(function($) {
           $("#datepicker").datepicker({ minDate: 0});
        });

edited Jul 14 '18 at 23:56

answered Jul 14 '18 at 23:23

anuj rajak

49
6

score 0 · Answer 20 · answered Dec 06 '18 at 05:38

Set an end date based on start date using datepicker

  $("#AddEvent_txtStartDate").datepicker({
        onSelect: function () {
            minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
            var mDate = new Date(minDate.setDate(minDate.getDate()));
            $("#AddEvent_txtEndDate").datepicker("setDate", mDate);
            $("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
        }
    });  
    $("#AddEvent_txtEndDate").datepicker();

score 0 · Answer 21 · answered Jun 15 '20 at 19:47

0

this works for me,

$(function() { $('.datepicker').datepicker({ startDate: '-0m', autoclose: true }); });

answered Jun 15 '20 at 19:47

2

The reason why this is working is because you're adding a minus (-) before the 0m. Which means minus - months from today. You can find some more info about this [here](https://github.com/uxsolutions/bootstrap-datepicker/blob/ca11c450/README.md#options). – Thom Jun 15 '20 at 20:24

score 0 · Answer 22 · answered Nov 06 '20 at 10:27

Note: This scripts works when you're using the daterangepicker library. If you want to disable the Sat or Sunday date on daterangepicker then put this line of code.

        $("#event_start").daterangepicker({
            // minDate: new Date(),
            minYear: 2000,
            showDropdowns: true,
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: false,
            timePickerIncrement: 15,
            drops:"up",
            isInvalidDate: function(date) {
                //return true if date is sunday or saturday
                return (date.day() == 0 || date.day() == 6);
            },
            locale: {
                format: 'MM/DD/YYYY hh:mm A'
            }
        });

OR if you want to disable the previous date also with sat and sun then uncomment the this line minDate: new Date()

score 0 · Answer 23 · answered Jun 15 '21 at 16:40

0

try this. It is working for me.

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

answered Jun 15 '21 at 16:40

Gaurav Narula

432
1
5
15

score 0 · Answer 24 · answered Dec 10 '21 at 15:02

0

Add option of

startDate: new Date()

refer like this

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

answered Dec 10 '21 at 15:02

Jay Momaya

1,831
19
32

score 0 · Answer 25 · answered Jan 21 '22 at 09:33

Add DateTime.now() in firstDate: DateTime.now()

Please see the Screenshot.

DateTime? date;
  Future pickDate(BuildContext context) async {
    final initialDate = DateTime.now();
    final newDate = await showDatePicker(
      currentDate: DateTime.now(),
      context: context,
      initialDate: date ?? initialDate,
      firstDate: DateTime.now(),
      lastDate: DateTime(DateTime.now().year + 5),
    );

    if (newDate == null) return;

    setState(() => date = newDate);
  }

score 0 · Answer 26 · answered Apr 17 '23 at 06:55

// Previous one day back.
//minDate 0 means current date, and MinDate -1 previous 1 day back.
<p>Date: <input type="text" id="datepicker" /></p>
$(function() {
    $( "#datepicker" ).datepicker({ 
     dateFormat: "dd/mm/yy",
     changeMonth: true,
     changeYear: true,
     yearRange: "-0:+1",
    minDate: -1
    
    });
  });

Sad Cranberry · Answer 27 · 2023-05-28T12:19:40.993

0

Try This. its works for me:

 const startDatePicker = document.getElementById('travelStartDate');
 startDatePicker.addEventListener('focus', () => {
   startDatePicker.min = new Date().toISOString().split('T')[0];
 });

edited May 28 '23 at 12:19

answered May 28 '23 at 12:19

Sad Cranberry

1
2

Hello, please don't just submit code in your answer(s), add some details as to why you think this is the optimal solution. – Destroy666 May 31 '23 at 12:58

score -1 · Answer 28 · edited Jul 22 '17 at 20:59

-1

To disable past dates, Add this given js:

var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
picker.set('min',true);`][1]

edited Jul 22 '17 at 20:59

YakovL

7,557
12
62
102

answered Jul 22 '17 at 11:32

Aman Varshney

56
1
7

disable past dates on datepicker

28 Answers28

Linked

Related