All geek questions in one place

How to accept only future or current time in input type = 'time'?

I have an input field with type="time" . How to make this field accept only the current or future?

If the user enters the wrong time, a message should be displayed asking you to enter the time again. The future here means up to 2 days.

Here I just show the current time using jquery.

 function validDate(){ var today = new Date().toISOString().split('T')[0]; document.getElementsByName("date")[0].setAttribute('min', today); } $(function() { $('input[type="time"][value="now"]').each(function() { var d = new Date(), h = d.getHours(), m = d.getMinutes(); if (h < 10) h = '0' + h; if (m < 10) m = '0' + m; $(this).attr({ 'value': h + ':' + m }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onload="validDate()"> <div class="form-group"> <p>Date<span>*</span></p> <input type="date" name="date" id="date" class="form-control input-sm " required /> </div> <div> <p>Time <span>*</span></p> <input type="time" value="now" name="time" id="time" class="form-control input-sm " required /> </div> </body>
+5
source share
2 answers

Here I give a simple solution. If both values ​​are less than the current value, it will alert the user.

 $(document).ready(function(){ $("#time").on("focusout",function(e){ var currentTime = new Date(); var userTime = $("#time").val().split(":"); if(currentTime.getHours() > parseInt(userTime[0])){ alert("To old value"); $(this).focus(); } if(currentTime.getHours() <= parseInt(userTime[0])){ if(currentTime.getMinutes() > parseInt(userTime[1])){ alert("To old value"); $(this).focus(); } } }); });
+1
source

You can create your own AddDays() function to receive two days later, and can hide() or show() to display an error message according to the selected date value. You can implement as shown below.

 function validDate(){ var today = new Date().toISOString().split('T')[0]; document.getElementsByName("date")[0].setAttribute('min', today); } $(function() { $('input[type="time"][value="now"]').each(function() { var d = new Date(), h = d.getHours(), m = d.getMinutes(); if (h < 10) h = '0' + h; if (m < 10) m = '0' + m; $(this).attr({ 'value': h + ':' + m }); }); }); // Your custom day addition function function addDays (date, days) { const result = new Date(date) result.setDate(result.getDate() + days) return result } $("#date").on("change",function(e){ var val = new Date($(this).val()); // selected value var current = new Date(); // current date var futuredate = addDays(current,2) // two days later if(val.getTime() <= futuredate.getTime()) { $("#error").hide(); } else { $("#error").show(); $(this).val(null); // makes input default } }) 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onload="validDate()"> <div class="form-group"> <p>Date<span>*</span></p> <input type="date" name="date" id="date" class="form-control input-sm " required /> <span id="error" style="display:none; color:red">Please select a date within two days</span> </div> <div> <p>Time <span>*</span></p> <input type="time" value="now" name="time" id="time" class="form-control input-sm " required /> </div> </body>
0
source

Source: https://habr.com/ru/post/1269667/

More articles:


All Articles