How to disable previous dates in calendar javascript?

Question

I am trying to disable previous dates in calendar. I am using this code like

My HTML code is below.

<input type="text" required name="date_from" name="date_from" class="mydate input-text full-width" placeholder="Departure Date" />

My script code.

<script type="text/javascript">
 $(".mydate").datepicker({
       format:'yyyy-mm-dd',
       autoclose: true
   });
    $(".flexslider").flexslider({
        animation: "fade",
        controlNav: false,
        animationLoop: true,
        directionNav: false,
        slideshow: true,
        slideshowSpeed: 5000
    });
</script>

It shows calendar without previous dates disabled.

score 1 · Answer 1 · answered Apr 04 '18 at 05:02

1

Try this:

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

answered Apr 04 '18 at 05:02

Bits Please

877
6
23

score 1 · Answer 2 · answered Apr 04 '18 at 05:09

Use bootstrap date picker. These are files to include

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

Use this code to disable previous dates

HTML Input field

<input id="date" data-provide="datepicker" name="date_from" >

JAVASCRIPT

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

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

score 0 · Answer 3 · edited Apr 04 '18 at 05:05

0

Set minDate in initialization on datepicker

minDate:new Date()


$(".mydate").datepicker({
       format:'yyyy-mm-dd',
       autoclose: true,
       minDate:new Date()
   });

edited Apr 04 '18 at 05:05

Bits Please

877
6
23

answered Apr 04 '18 at 05:02

Nirali

1,776
2
12
23

score 0 · Answer 4 · answered Apr 04 '18 at 05:04

0

You have to set the minDate option. Example + fiddle on this forum:

jQuery Date Picker - disable past dates

answered Apr 04 '18 at 05:04

Ties Vandyke

154
1
8

score 0 · Accepted Answer · answered Apr 04 '18 at 05:05

0

You need to set minDate option while applying datepicker.

Try This,

<script type="text/javascript">
$(".mydate").datepicker({
       format:'yyyy-mm-dd',
       autoclose: true,
       minDate: 0,   
}); 
</script>

answered Apr 04 '18 at 05:05

Jaydip Shingala

429
2
11
18

score 0 · Answer 6 · answered Apr 04 '18 at 05:08

0

As from your format may be you are using bootstrap date picker. So use startDate to disable previous dates

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

answered Apr 04 '18 at 05:08

B. Desai

16,414
5
26
47

Thank you for the fast answer mr. Desai – nirvi Apr 04 '18 at 05:17
Glad to help @nirvi. If solution help you then you can upvote this for future reader help – B. Desai Apr 04 '18 at 05:45

Pranay Teja · Answer 7 · 2020-12-13T06:57:16.000

Try this code... this will restrict the user if user submits form with date less than today's date then shows alert message to change the date.

HTML Code

    <form name="myform" onsubmit="return validateDateOfAppointment()">
    <input type="date" name="Date of Appointment" placeholder="Date of Appointment" id="Date" />
</form>

JavaScript Code

function validateDateOfAppointment(){
        var date=document.getElementById("Date").value;
        var d=new Date();
        var x=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
        var checkDate=date.substr(8,2);
        var equalDate=d.getDate();
        var checkMonth=date.substr(5,2);
        var equalMonth=d.getMonth();
        var checkYear=date.substr(0,4);
        var equalYear=d.getFullYear();
        if(checkMonth>=equalMonth){
            if(checkDate<equalDate){
            alert("Date cannot be less than today!! ");
            return false;
            }
        }
        else if(checkMonth<equalMonth){
            if(checkYear<equalYear){
                alert("Date cannot be less than today!! ");
                return false;
            }
        }
     }

1) why not just new Date("date from input").getTime() - new Date().getTime() ? 2) you should use onchange even or something like that ? — phoenixstudio, Dec 12 '20 at 12:47
I used this code in a form submission where the user has to enter only present date and future dates only.......Now i added some more code for giving more clarification.. I used "onsubmit" for checking correct date during form submission. for 1) we get the date from user as a string so we cannot retrieve the time or date directly from that so I used string methods for getting date,month and year — Pranay Teja, Dec 13 '20 at 06:31

How to disable previous dates in calendar javascript?

7 Answers7