It turns out that I have 2 inputs of the type datetime-local
in a form about cabin reservations, and I would like to know if it is possible to establish validations that prevent the user from freely interacting with the controls.
As a 1st validation, I try to achieve that in one, when entering a date, the other does not allow the entry of a date less than the one already selected.
That is, for example:
These are the inputs:
<input type="datetime-local" id="fecha1" name="datetime_1" required="required"/>
<br>
<input type="datetime-local" id="fecha2" name="datetime_2" required="required"/>
If the following date was selected in the first: 05-12-2018 08:00:00.
The second should not allow the selection of a date less than that. It should also not allow you to manually write a date that is less than the chosen one, and lastly, it should not allow you to increase it with the selectors of the control ( ↕? ). Can it be achieved?
At the moment I have the following idea :
$('#input_datetime-local').change(function(e){
if ($('#input_datetime-local2').val() < $('#input_datetime-local').val()) {
$.alert({
title: '<i class="fa fa-danger"></i>ERROR',
content: '<p>FECHA INTRODUCIDA INVALIDA</p>',
});
e.preventDefault();
/*DESDE AQUI YA NO SE MUY BIEN COMO VALIDAR LO SIGUIENTE QUE
EXPLIQUE ANTERIORMENTE*/
}
}
But it does not work.
Also as a 2nd validation, I would like to establish that the time that can be selected and written is not a time less than 08:00 or greater than 23:00.
For this 2nd validation I have the following idea , but I don't know very well how to add to this validation that prevents writing and selecting a time less than 08:00 and greater than 23:00:
$('#input_datetime-local').change(function(e){
var today = new Date();
$('#new_date_fin').val(today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)+'T'+'08'+':'+'00');
}
And as the 3rd and last validation I would like to establish the increment of only the hour that increases from 1 to 1, and that the minutes are 'disabled'.
And for this last option I have the following as an idea , although it works with a button. When my idea is to use the controls ( ↕? ) of thedatetime-local:
<label>Date:</label> <input type="datetime-local" id="new_date">
<button onclick="myFunction()">Inténtalo</button>
<script type="text-javascript">
function myFunction() {
var today = new Date();
$('#new_date').val(today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)+'T'+today.getHours()+':'+today.getMinutes());
document.getElementById("new_date").stepUp(60);
}
</script>
Is all that possible?
As an extra piece of information, I add that when the site is always loaded, the 1st input comes with a value assigned by default, which is the current date of the system with an initial time of 08:00.
First of all, I want to tell you that there are very intuitive Javascript libraries that would make things much easier for you when it comes to doing what you want. Jquery UI Datepicker is the one I usually use and it gives me very good results and is widely supported by browsers. If you still want to continue hurting yourself by trying to use this type of input, I've been messing around with it (I've never worked with this type of input) and I'll give you the solutions I've found.
By handling the HTML attributes that this type of input makes available to us, added to the handling of some other Javascript event, you can solve most of the things you expose.
Question 1
You could solve this with the use of the attribute
min
, modifying themin
a date2 so that it has as a minimum value the one selected in date1 :question 2
Solving the problem that I had when I couldn't restrict the time of date2 to be greater than that of date1 being both on the same day, I also solved the problem of your second question. After transforming the
string
one that returns theval()
delinput
to an object,date
I was able to compare them to find out which one was greater and in the event that date2 was greater, give it as the value that date1 set as the top.The code that solves this second question is integrated in the one I put in the first question.
Question 3
This issue was resolved in the same way as the second. When comparing both date objects through the change event , when trying to increase the value
input
above the allowed value, when losing the focus, the element would return back to the top value.Question 4
I have added this new functionality to the code. Using the
seters
andgeters
's of the Date() objects, I check if the time is less than 8:00 or greater than 23:00 and if so, I modify it so that it is within the range.Since he
datetime-local
is very rigid withstring
what he has to receive,val()
I chose to use a substring to remove what was left over from the string thattoISOString()
the objects function returnsDate()
.Question 5
This already has a more difficult solution. I think that the shots can go through the attribute
step
of thedatetime-local
, but I haven't found it yet. However, I will continue investigating at another time and if I find it, I will publish it here ^^Conclusions
I found
input
it quite cumbersome to use.change
It took me a few minutes to understand why the event associated with both was not executedinput
(until you also fill in the hours and minutes fields, it does not consider that itinput
has changed).The fact that each browser can display it in different ways (as it happens with other HTML
input
browsers ) does not convince me. Therefore, this would be a compelling reason to opt for a library.Giving styles to this type of elements that are displayed in different ways depending on the browser is a real headache.
The fact that it is not supported by the Firefox and Safari browsers in their desktop versions is perhaps the biggest downside that I see.
used reference