Tengo una etiqueta de entrada así:

 <input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>

y para esto, se permite tener la hora en él, así que en cualquier lugar de 00:00 a 12:00 . pero básicamente también quiero permitir que las personas escriban en ese momento, pero quiero que esté restringido a que solo se les permita escribir cualquiera de los valores que se presentan en la lista de datos según el datalist que tengo, o solo les permite para escribir un tiempo entre los tiempos mencionados anteriormente. aquí está el 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>

y los resultados devueltos son así:

 [ '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' ]

así que me gustaría que solo pudieran escribir uno de esos valores esencialmente. Ahora mi pregunta es, ¿puedo hacer esto directamente a través de la etiqueta de input , como específicamente la cantidad de caracteres y el tipo de caracteres, o tengo que hacerlo a través de js? No pude encontrar nada en línea.