Login/Register
disable past dates on datepicker
Asked Answered
jqueryjquery-mobiletwitter-bootstrap
A

29

32

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 });
Auberon answered 2/4, 2013 at 6:52 Comment(2)
So far with help from tarruda.github.com/bootstrap-datetimepicker – Auberon
May be this post helpful:Disable previous dates in date picker – Karren
S
65

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

Swearingen answered 2/4, 2013 at 6:55 Comment(3)
This works fine in jsfiddle but not in my project, I also included <script src="code.jquery.com/jquery-1.9.1.js"></script> <script src="code.jquery.com/ui/1.10.2/jquery-ui.js"></script> still not working – Auberon
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? – Auberon
"+1" with use this tutorial helpful: How to disable previous dates in date picker using JQuery – Karren
A
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');
    });

})
Auberon answered 23/4, 2013 at 8:28 Comment(1)
whose ID is the #sDate1? – Canfield
R
15

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

Read more

Regalia answered 2/4, 2013 at 6:54 Comment(4)
hope the jQuery UI js is included – Regalia
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? – Auberon
network.convergenceservices.in/forum/40-joomla-tricks/… – Regalia
Done, below is the code: $(function(){ $('#datepicker1').datepicker({ startDate: '-0m' //endDate: '+2d' }).on('changeDate', function(ev){ $('#sDate1').text($('#datepicker1').data('date')); $('#datepicker1').datepicker('hide'); }); }); – Auberon
V
10

try this,

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

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

Verbena answered 8/8, 2016 at 7:17 Comment(0)
T
9
$(function () {
    $("#date").datepicker({ minDate: 0 });
});
Teteak answered 30/9, 2014 at 5:7 Comment(0)
S
7

This will work:

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });
Strawn answered 7/7, 2015 at 6:52 Comment(0)
S
7

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

$(document).ready(function() {
    $("#datepicker").datepicker({ startDate:'+0d' });
});
Stride answered 20/3, 2020 at 12:35 Comment(1)
startDate: '+0d' only worked. new Date() solution didnt work for me. Thanks – Feudality
M
4

Try this,

$("#datetimepicker2").datepicker({ startDate: "+0d" });
Meza answered 3/10, 2016 at 12:55 Comment(0)
R
4

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");
Regeneracy answered 15/6, 2018 at 10:23 Comment(0)
A
3
var dateToday = new Date();

$('#datepicker').datepicker({                                     
    'startDate': dateToday
});
A1 answered 14/11, 2016 at 7:22 Comment(1)
Welcome to stack overflow :-) Please look at How to Answer – Mccracken
S
3

this works for me, 

$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });
Slicker answered 9/11, 2017 at 2:59 Comment(0)
P
3

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)

Phyllome answered 11/10, 2019 at 16:48 Comment(0)
W
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>
Wulfenite answered 13/4, 2018 at 12:56 Comment(1)
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. – Rhenium
A
1

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);
    });
Anybody answered 21/9, 2017 at 11:12 Comment(0)
C
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()
        });
Contemptible answered 31/8, 2021 at 7:56 Comment(0)
L
0
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>
Laliberte answered 27/10, 2016 at 9:28 Comment(0)
S
0
$("#datetimepicker2").datepicker({ 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
});
Spearhead answered 25/7, 2017 at 17:10 Comment(0)
W
0

You can use 

$('#li_from_date').appendDtpicker({
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
});
Wilkey answered 28/11, 2017 at 5:53 Comment(0)
R
0

**this worked in my wordpress plugin ** 

 jQuery(document).ready(function($) {
           $("#datepicker").datepicker({ minDate: 0});
        });
Rafaelof answered 14/7, 2018 at 23:23 Comment(0)
S
0

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();
Scummy answered 6/12, 2018 at 5:38 Comment(0)
I
0

this works for me,

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

Iluminadailwain answered 15/6, 2020 at 19:47 Comment(1)
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. – Cullum
F
0

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

Fiend answered 6/11, 2020 at 10:27 Comment(0)
L
0

try this. It is working for me.

$('.datepicker').datepicker({
   format: 'mm-dd-yyyy',
   startDate: new Date()
 });
London answered 15/6, 2021 at 16:40 Comment(0)
L
0

Add option of

startDate: new Date()

refer like this

$('.installment_date').datepicker({
     startDate: new Date()
});
Laceration answered 10/12, 2021 at 15:2 Comment(0)
B
0

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);
  }
Balthazar answered 21/1, 2022 at 9:33 Comment(0)
T
0
// 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
    
    });
  });
Twocolor answered 17/4, 2023 at 6:55 Comment(0)
B
0

Try This. its works for me:

 const startDatePicker = document.getElementById('travelStartDate');
 startDatePicker.addEventListener('focus', () => {
   startDatePicker.min = new Date().toISOString().split('T')[0];
 });
Bermuda answered 28/5, 2023 at 12:19 Comment(1)
Hello, please don't just submit code in your answer(s), add some details as to why you think this is the optimal solution. – Melena
K
0
window.onload = function() {
    const today = new Date().toISOString().split('T')[0];
    const dateInput = document.getElementById('date');
    dateInput.setAttribute('min', today);
}

This will set the input date as today. It will not disable the user from selecting past dates.

Krispin answered 31/5, 2024 at 18:4 Comment(0)
F
-1

To disable past dates, Add this given js:

var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
picker.set('min',true);`][1]
Fermat answered 22/7, 2017 at 11:32 Comment(0)

© 2022 - 2025 — McMap. All rights reserved.