2

I have an input box, with a type of "time". I want to have a late time (23:00pm) as a min value, and an early time (6:00am) as a max value - creating a range of 23pm - 6am. (ie. 11pm, 12pm, 1am, 2am, 3am, 4am, 5am, 6am).

I've tried using Javascript, although I want to use it as a last resort. I don't want the native component to show up with values that I don't want the user to select (for example, on mobile devices).

Setting the 'min' value to 00:00:00 and the 'max' value to "06:00:00" works as intended. It's when the min value is before midnight it becomes an issue.

I'd expect the min and max values to create a range, but that doesn't work as expected.

JCoulam
  • 181
  • 2
  • 13

2 Answers2

1

As stated in MDN docs:

Unlike many data types, time values have a periodic domain, meaning that the values reach the highest possible value, then wrap back around to the beginning again. For example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 PM, run through midnight to the next day, ending at 2:00 AM.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#max

That said, it seems like this is not working properly in Chrome 76.0, after a simple test with a min value greater than the max, all times fail the validation and the form just don't work.

I suggest https://timepicker.co/ since it will work cross browser.

input:invalid+.validity:after {
  content: '✖';
}

input:valid+.validity:after {
  content: '✓';
}
<form>
  <label for="time1">3:00 to 6:00: </label>
  <input type="time" min="3:00" max="6:00" name="time1" required>
  <span class="validity"></span>
  <hr>
  <label for="time2">23:00 to 6:00: </label>
  <input type="time" min="23:00" max="6:00" name="time2" required>
  <span class="validity"></span>
</form>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • 1
    I've marked this as the 'right answer'. Simply put - it looks like the periodic domain restricts you from having a min time greater than a max time. My solution was to use moment.js and create a select / option box dynamically using a while loop. Unfortunately the timepicker.co has the same problem, you can't put a range in where the min is greater than the max. – JCoulam May 29 '19 at 15:28
  • You could also use a combination of type time and type date. – rafaelcastrocouto May 29 '19 at 21:29
0

I experimented a little using the :invalid CSS pseudo-class but I couldn't come up with anything.

Note that in Firefox (unlike Chrome), the browser does not include up and down arrows on any <input type="time"> form element, so the min and max attributes have no effect.

I note that Mozilla Developer Network says the following:

By default, <input type="time"> does not apply any validation to entered values, other than the user agent's interface generally not allowing you to enter anything other than a time value. This is helpful (assuming the time input is fully supported by the user agent), but you can't entirely rely on the value to be a proper time string, since it might be an empty string (""), which is allowed. It's also possible for the value to look roughly like a valid time but not be correct, such as 25:05.

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Validation

Rounin
  • 27,134
  • 9
  • 83
  • 108