CODEWITHSUNDEEP
javascriptjquerydatepicker
User_FTW
User_FTW

Reputation: 524

Get date from datepicker not working as expected

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?

Upvotes: 1

Views: 783

Answers (3)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

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

Upvotes: 0

Twisty
Twisty

Reputation: 30893

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" />

Upvotes: 1

Pratham
Pratham

Reputation: 269

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">

Upvotes: 0

Related Questions