Search code examples
javascripthtmldatetimedatepicker

How to validate Date and Time with JavaScript


This code below is suppose to show an alert box if an incorrect date and/or time is selected.

The problem I'm having is, If I selected 25/11/2015 and choose 11:00 It shows "Please change date or Time". If I then select 25/11/2015 and choose 21:00 it shows "That's Fine".

The function is ignoring the date and just checking the time.

It should show a message saying "Please change date or time" if the user selects a time that is gone already or a date that is before today.

function myFunction() {
  var today = new Date();
  var select_text = document.getElementById("datepicker-leave").value;
  var select_date = new Date(select_text);
  var select_time = document.getElementById("leavedrop").value;
  var curr_time = today.getHours() + 1;

  if ((select_date.getTime() <= today.getTime()) && select_time < curr_time) {
    alert("Please change Date or Time")
  } else {
    alert("That's Fine")
  }
}

<script>
  $(function() { //datepickers
      $( "#datepicker-leave).datepicker({            
        dateFormat: 'd-M-yy'}); 
   });
</script>
<input type="text" id="datepicker-leave">

<select id="leavedrop">
  <option value="0">00:00</option>
  <option value="1">01:00</option>
  <option value="2">02:00</option>
  <option value="3">03:00</option>
  <option value="4">04:00</option>
  <option value="5">05:00</option>
  <option value="6">06:00</option>
  <option value="7">07:00</option>
  <option value="8">08:00</option>
  <option value="9">09:00</option>
  <option value="10">10:00</option>
  <option value="11">11:00</option>
  <option value="12">12:00</option>
  <option value="13">13:00</option>
  <option value="14">14:00</option>
  <option value="15">15:00</option>
  <option value="16">16:00</option>
  <option value="17">17:00</option>
  <option value="18">18:00</option>
  <option value="19">19:00</option>
  <option value="20">20:00</option>
  <option value="21">21:00</option>
  <option value="22">22:00</option>
  <option value="24">23:00</option>
</select>

<input type="button" value="Submit" onClick="myFunction()" />


Solution

  • Try the below structure for the date

    $( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });
    

    Then try this

    $(function() {
        $( "#date" ).datepicker({ 
         dateFormat: 'd MM, yy',
         onSelect: function(dateText, inst) {
             var stop = dateText.indexOf(',');
            alert( dateText.substring(0, stop));
         }
        });
    });
    

    In side on select you trigger the alert.