I have an input tag like so:
<input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>
and for this, it is allowed to have the time in it, so anywhere from 00:00 to 12:00. but i basiclly want to also allow people to type in there time, but i want it to be constrainted to only being allowed to type in either one of the values that is presented in the datalist based on the javascript i have, or only allows them to type in a time between the said times above. here is the js:
<% var arrayOfTimes = []; %>
<% for (var i = 0; i <= 48; i++) { %>
<% var n = Math.floor(i/4) + [":00", ":15", ":30", ":45"][i%4]; %>
<% if(n<10) %>
<% n = ''+n; %>
<% arrayOfTimes.push(n); %>
<% console.log(arrayOfTimes); %>
<% } %>
<input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>
<datalist id="eventstarttime" required>
<% for (var i = 0; i < arrayOfTimes.length; i++) { %>
<option value="<%= arrayOfTimes[i] %>">
<% } %>
</datalist>
and the returned results are like so:
[
'0:00', '0:15', '0:30', '0:45', '1:00',
'1:15', '1:30', '1:45', '2:00', '2:15',
'2:30', '2:45', '3:00', '3:15', '3:30',
'3:45', '4:00', '4:15', '4:30', '4:45',
'5:00', '5:15', '5:30', '5:45', '6:00',
'6:15', '6:30', '6:45', '7:00', '7:15',
'7:30', '7:45', '8:00', '8:15', '8:30',
'8:45', '9:00', '9:15', '9:30', '9:45',
'10:00', '10:15', '10:30', '10:45', '11:00',
'11:15', '11:30', '11:45', '12:00'
]
so i would want them to only be able to type in one of those values essentially. Now my question is, can i do this directly through the input tag, like specificy the number of charcaters and the type of characters, or does it have to be done through js? Wasn't able to find anything online.
A simple solution is to use the pattern attribute on the <input> element. Reference
Input any time not in your list and it should prompt you to input the requested pattern. When you input one of the times it will not prompt you. You'll need to hit the submit button to see the prompt.
Note: times in this input may begin with 00 (like 00:15).
document.forms[0].onsubmit = e =>e.preventDefault();<form>
<input pattern="[01]?[0-9]:(15|30|45|00)" placeholder="XX:XX (quarter hour)">
<button>Submit</button>
</form>input:invalid+span:after {
position: absolute;
content: '✖';
padding-left: 5px;
}
input:valid+span:after {
position: absolute;
content: '✓';
padding-left: 5px;
}
div {
position: relative;
}<label>Choose a time for your meeting:
<div>
<input type="time" name="time"
min="00:00" max="12:00" step="900" required>
<span class="validity"></span>
</div>
<small>from 00:00 to 12:00</small>
</label>