Check if date is in the past without submitting form

Question

I have this code that I want to check if a date is in the past. I want to check it as soon as the date is entered, before form submission.

<input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="text" data-date-format="yyyy-mm-dd" >

<script type="text/javascript">
 function checkDate() {
   var selectedDate = document.getElementById('datepicker').value;
   var now = new Date();
   if (selectedDate < now) {
    alert("Date must be in the future");
   }
 }
</script>

This does not work, if I enter a date in the past (e.g. 2014-12-03) it does not display the alert.

ANd that is still a string, not a date. The input value is not a Date Object. — epascarello, Dec 31 '14 at 00:20
Have you considered timezones, btw or just that the fact that the user can change their OS clock for any reason ? :) — Thong Kuah, Dec 31 '14 at 00:28
I have server side validation already implemented. But I want realtime validation as well @ThongKuah — Alex, Dec 31 '14 at 00:29
Any have idea about this question http://stackoverflow.com/questions/42062690/how-to-disable-select-previous-date-in-datepicker-js/42062836?noredirect=1#comment71298931_42062836 — Ss_Gupta, Feb 06 '17 at 12:28

score 20 · Accepted Answer · answered Dec 31 '14 at 00:25

20

All you need to do is convert the string produced by the <input> into a Date using the Date constructor new Date("2014-06-12")

 function checkDate() {
   var selectedText = document.getElementById('datepicker').value;
   var selectedDate = new Date(selectedText);
   var now = new Date();
   if (selectedDate < now) {
    alert("Date must be in the future");
   }
 }

<input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="date" data-date-format="yyyy-mm-dd" >

answered Dec 31 '14 at 00:25

Migwell

18,631
21
91
160

It's not working. But it seems the issue is something else. Even if I do this: $("#datepicker").change(function() { alert( "test" ); }); the alert doesn't show – Alex Dec 31 '14 at 00:35
It's working for me? Try typing 2014-06-12 into the box and pressing enter (you need to press enter or change focus of the control to trigger the onchange event) – Migwell Dec 31 '14 at 00:38
ah ok. I removed the date picker plugin and it worked. How can I make it work using the date picker plugin – Alex Dec 31 '14 at 00:41
2

If you want to use a date picker plugin, use jQuery UI's one, and then you can set minDate and maxDate instead of your own validation function. See [this example](http://jqueryui.com/datepicker/#min-max) – Migwell Dec 31 '14 at 00:44
add now.setHours(0,0,0,0); so that you will not get alert for today date – Hari Prasanth Mar 03 '21 at 11:48

Cedric Ipkiss · Answer 2 · 2014-12-31T00:41:17.160

1

The date() function returns a string. Try converting both dates to integers first using the Date.parse() function:

<input id="datepicker" onchange="checkDate()" required class="datepicker-input" type="text" data-date-format="yyyy-mm-dd" >

<script type="text/javascript">
   function checkDate() {
       var selectedDate = document.getElementById('datepicker').value;
       var now = new Date();
       var dt1 = Date.parse(now),
       dt2 = Date.parse(selectedDate);
       if (dt2 < dt1) {
            alert("Date must be in the future");
       }
 }
</script>

edited Dec 31 '14 at 00:41

answered Dec 31 '14 at 00:35

Cedric Ipkiss

5,662
2
43
72

It seems the issue is something else, because even if I do this: $("#datepicker").change(function() { alert( "test" ); }); the alert doesn't show – Alex Dec 31 '14 at 00:37
I'll suggest you look at your browser's console; you might have an error elsewhere – Cedric Ipkiss Dec 31 '14 at 00:38

score 1 · Answer 3 · answered Jan 29 '18 at 11:49

For those who use type="date" (introduced with HTML5) instead of type="text", it can be done this way:

 function checkDate() {
   var date = this.value;
   if(date.valueAsDate <= new Date()) {
       //Date in the past
   } else {
       //Date in the future
   }
}

score 0 · Answer 4 · answered Dec 31 '14 at 00:20

0

Your code is really close, try this instead:

var selectedDate = $('#datepicker').datepicker('getDate');
var now = new Date();
if (selectedDate < now) {
  // selected date is in the past
}

answered Dec 31 '14 at 00:20

Alex J

1,029
6
8

1

Please try to compare date by using getTime function... if (selectedDate.getTime() < now.getTime()) { ... } – joydesigner Dec 31 '14 at 00:26
1

As far as I know, that solution depends on having jQuery UI installed. It's basically converting your input field to a datepicker widget. It will work, but it's totally unnecessary. – Migwell Dec 31 '14 at 00:28

score 0 · Answer 5 · answered Mar 17 '19 at 21:08

0

Simple mine function working ...

function check_not_past_date_time(enter_date) {
    var a =new Date(enter_date);
    var now =new Date();
    if(a>now){
        return true;
    }else {
        return false;
    }
}

answered Mar 17 '19 at 21:08

Mostafa Mahmoud

153
3
7

score 0 · Answer 6 · answered Aug 24 '19 at 19:46

0

You can use


_isDate1LowerThanDate2(date1, date2) {
    return new Date(date1) < new Date(date2);
  }

answered Aug 24 '19 at 19:46

Orsos Patrick

389
3
5

Explain why you think such comparison of objects will work. Have you tried it? – mentallurg Aug 24 '19 at 20:22

ritz · Answer 7 · 2021-03-18T08:55:00.673

0

Before comparing dates, they should be set to 0 hours. This would ensure difference between them is in multiples of 1 day.

const isPastDate = (date) => {
    const specificDate = new Date(date).setHours(0, 0, 0, 0);
    const today = new Date().setHours(0, 0, 0, 0);
    return specificDate < today;
}

console.log(isPastDate("2021-08-10T23:59:00"));

edited Mar 18 '21 at 08:55

answered Mar 18 '21 at 08:45

ritz

4,747
2
15
13

Check if date is in the past without submitting form

7 Answers7

Linked