"Step" attribute not working on datetime-local - html

I'm trying to use datetime-local to pick both date and time.
The input works okay, unfortunately I can't seem to get the step attribute to work at all.
The MDN docs seem to suggest I should be able to use it to set a step in seconds, however this just isn't working at all.
<form method='post' action='#'>
<input
type="datetime-local"
id="meeting-time"
name="meeting-time"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00"
step="900"
/>
<input type='submit' value='Go!'>
</form>
Am I missing something?

So, my confusion came from the fact that step doesn't change the steps that appear in the calendar nor stops users from typing the time in themselves.
The step attribute does "work" in loosest sense possible in that it allows users to step between values with arrows after selecting them with the keyboard.

Your issue may be your browser. The CanIUse website states that datetime-local is not currently supported by Firefox, IE, or Safari.
I have run your example code in Google Chrome 86 and it works correctly with a step of 15 minutes.
I have run your code in Firefox 82 and the input box acts as a text input type rather than as a datetime-local type.

Step attribute value should be in seconds. In your example, you have given it as 900 which translates to 15mins. Your example in codesandbox works as expected.
MDN says
For datetime-local inputs, the value of step is given in seconds, with a scaling factor of 1000 (since the underlying numeric value is in milliseconds). The default value of step is 60, indicating 60 seconds (or 1 minute, or 60,000 milliseconds).

Related

How can I set the starting time for the time input widget?

I'm working on web app and I use this custom component based on a classic <input type="time">
<ui-input type="time" step="900" value.bind="nbH">
It's basically the same as a classic <input>, in the context of my question, it doesn't change anything
<input type="time" step="900" id="appt-time" name="appt-time" value="13:30">
The problem is that I'm using this component like a field indicating the number of hours (less than 24 hours) and not like an indicator of the time.
So I would like to change the default value when you click the clock icon. I would like to choose a a fixed value by myself because I don't want the default value to be the current time. Is it possible?
And then, I would like the step to be used also for the display of the hours and minutes list when you click the clock icon, not just with the top and bottom arrows of the keyboard. So instead of display each minutes (in the right column), in my case it would display 00, 15, 30, 45. Is it possible?
I didn't find what I searched in the doc so I wanted to know if I can do these things without creating a new whole component.
The kind of customization you desire is AFAIK not supported by the standard <input type="time">. Also note that what is considered 'standard' may differ between browsers and sometimes even browser versions.
A custom component is most likely the way to go, possibly even based on <input type="text"> so you won't have to deal with "time" behaviour getting in the way of your custom actions.

Input type time Should be in AM/PM After Changing System Time Format To 24 hour

I am Using input type="time" in my form.
Problem is Whenever I change my system time format to 24 hour clock, Input type="time" considers that and removes AM/PM selection from the input.
But this should not happen.
When my system time format is set to 24 hours it's shows
But i want AM/PM Format like below, even after changing system time format to 24 hours.
Does anyone have Simple Solution for this?
The type="time" input does not have support for hardcoding the format. It will always follow the clients locale or user-agent in Chrome, Firefox, Safari and Edge (according to MDN).
The solution is either:
Creating your own custom input component (by creating a component that implements the ControlValueAccessor interface)
Use one of the many time-picker libraries avilable for Angular, such as ng-bootstrap, ngx-material-timepicker or date-time-picker

How to enter 24:00 in a html5 time input?

I use a html5 time input:
<input type="time" />
My application takes a time interval for working hours, or availibility. This works fine for 9-17 or similar. But the problem arises when I want to be able to enter 00:00 - 24:00, that means the entire day. There is no way to enter 24:00.
Is there a way to get around this?
Create a checkbox instead for selecting the entire day. Or you can use text input and validate it with js. But the problem is that 24.00 is not a valid date.

HTML input time, step attribute to set timestep by (say) x minutes?

I have a time input, basically just:
Time: <input type="time" name="timeinput"/>
http://jsfiddle.net/X8E9N/
According to
http://www.w3.org/TR/html-markup/input.time.html
it supports the step attribute. Is it possible to use this attribute (or other means) to set the step size to 10 minutes? If so, how?
I am aware of some other solutions (e.g. datebox plugin), but I'm hoping for a purely html solution if possible. I am using the datebox plugin sometimes, but it seems pretty slow on mobile devices so I am trying to use the native time pickers when possible.
It's possible. You just need to put seconds in step parameter, ex.
<input type="time" step="300"> <!-- 5 min step -->
Yes. You can specify step attribute in seconds.
However, Opera, iOS Safari, and Google Chrome don't reject non-aligned user input. A user can specify 11:59 to such time field. Then, Opera and Google Chrome show a validation error message when he tries to submit the form.
Seems like Chrome 86 does not support this.
As of iOS 9.1, iOS doesn't support max min or step.
http://caniuse.com/#feat=input-datetime

Is there a flag you can set to disable auto suggest behavior for an HTML field on iPad/iPhone/Android/etc

For desktop browsers I can set this on a field to disable the auto-completion list based on recent entries.
<input type="text" name="username" autocomplete="off"/>
^^^^^^^^^^^^^^^^^^
However this doesn't disable the auto-suggestion feature of iPad / iPhone / Android / etc. which can be very frustrating if your username is a concatination of your first/last name or if your device thinks you want to upper case the first letter.
e.g. "jsmith" either becomes "Smith" because it thinks you miss-spelled it or "Jsmith" to try and be nice... neither of which is really desired.
Thus the question is... is there a way to disable this behavior on a per field basis?
You are wanting to use the attribute autocorrect instead of autocomplete. The attribute autocomplete is used for form autofill.
FYI there is a bug in Chrome for Android resulting in those HTML 5 attributes not working properly. It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...