Get date from datepicker not working as expected

Question

I am trying to show an alert when someone selects a date in the past:

jQuery('#date').datepicker().change(evt => {

    var selectedDate = jQuery('#date').datepicker('getDate');
    var theSelectedDate = selectedDate.setHours(0,0,0,0);

    var now = new Date();
    var theNow = now.setHours(0,0,0,0);

    if (theSelectedDate > theNow) {
        // Date in in the future, all good
    } else {
        alert("Selected date is in the past");
    }
});

..and the date field...

<input type="date" id="date" name="date" />

The problem is that regardless of what date I chose with the date picker, the alert is always 'Selected date is in the past' on mobile devices.

What the heck am I doing wrong?

Have you inspected the values of `theSelectedDate` and `theNow`? Either through a debugger, or `console.log` them. That will tell you if the values are what you expect. Update your question with those values if they seem okay. Otherwise, figure out why they aren't correct. — Matt U, Nov 26 '19 at 02:13
Comparing two objects directly is problematic in Javascript. See https://stackoverflow.com/questions/7606798/javascript-date-object-comparison — kmoser, Nov 26 '19 at 03:40

Twisty · Accepted Answer · 2019-11-26T16:35:42.827

1

I am not sure why you do not set the Min Date so that Users cannot select a past date.

$(function() {
  $("#date").datepicker({
    minDate: "+1d"
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="date"></p>

You can use 0 for today or +1d to exclude today.

Update

For Native HTML5 datepicker, you can leverage the min attribute.

You can use the min and max attributes to restrict the dates that can be chosen by the user.

$(function() {
  function nowStr() {
    var dt = new Date();
    var yy = dt.getFullYear();
    var m = (dt.getMonth() + 1);
    m = m < 10 ? "0" + m : m;
    var d = dt.getDate();
    d = d < 10 ? "0" + d : d;
    var s = yy + "-" + m + "-" + d;
    return s;
  }

  $("#date").attr("min", nowStr());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date" min="2019-01-01" />

edited Nov 26 '19 at 16:35

answered Nov 26 '19 at 03:57

Twisty

30,304
2
26
45

That's fine for desktop, but on mobile it doesn't work, so my idea is the next best thing would be to throw up an alert if they select a date in the past. – User_FTW Nov 26 '19 at 06:59
Forgot to add....On mobile the input type is `date` which means as soon as you tap into the field, the device date picker is used and this method (and every other I've researched) doesn't work. – User_FTW Nov 26 '19 at 07:06
@user3256143 jQuery UI Datepicker will not work with `date` type of input. If your mobile version was switched back to `text`, it would work. Will see if there is a way to work the date type. – Twisty Nov 26 '19 at 15:58
@user3256143 HTML5 date has `min` and `max` attributes that can be used: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date – Twisty Nov 26 '19 at 16:23

score 0 · Answer 2 · answered Nov 26 '19 at 03:34

Try this. I have shifted now above the selected date

jQuery('#date').datepicker().change(evt => {
    var now = new Date();
    var selectedDate = jQuery('#date').datepicker('getDate');
    var theSelectedDate = selectedDate.setHours(0,0,0,0);
    var theNow = now.setHours(0,0,0,0);
 
   if (theSelectedDate >= theNow) {
   alert("Selected date is correct !!!!!!!");
        // Date in in the future, all good
    } else {
        alert("Selected date is in the past");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>

<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">

This still doesn't work on mobile. Your answer suggests the input type is `text`, which will probably work if the user is manually typing in a date into the #date field, but on mobile the input type is `date` which means as soon as you tap into the field, the device date picker is used. — User_FTW, Nov 26 '19 at 07:03

Ritesh Khandekar · Answer 3 · 2019-11-26T18:28:10.813

Your looking for the onSelect event:

$("#date").datepicker({
    onSelect: function(dateText, inst) {
    var selectedDate = new Date(dateText);
    var theSelectedDate = selectedDate.setHours(0,0,0,0);

    var now = new Date();
    var theNow = now.setHours(0,0,0,0);

    if (theSelectedDate > theNow) {
        console.log(true);
        // Date in in the future, all good
    } else {
        console.log(false);
        alert("Selected date is in the past");
      }
    }
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<input type="date" id="date" name="date" />

See this answer

Get date from datepicker not working as expected

3 Answers3