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
Related
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).
I have an issue with an HTML5 input type="date" in edge only. The value is set at end of time, by default ("31.12.9999") and min is set to today. When opening the datepicker the page breaks, I guess it has something to do with the difference between the min date and the current value. Any idea of how I can avoid this?
See example:
<input type="date" value="9999-12-31" min="2020-10-01">
You did not mention whether you are using the MS Edge legacy browser or the MS Edge Chromium browser.
Here, I assume that you are using the MS Edge legacy browser.
I have made a test with the Microsoft Edge 44.18362.449.0 and looks like it is working properly.
I have also made a test with the MS Edge (Chromium) browser version: 84.0.522.61 (Official Build) (64-bit). It also works fine.
If you are using an older version of the MS Edge legacy browser then you can try to update it to the latest version may help to fix the issue.
Try to check the issue on any other machine with the Edge browser may help to decide whether this is a machine-specific issue or not.
Let us know if we are missing something or misunderstanding by providing some more information about the issue. We will try to provide further suggestions.
According to the definition of Input on the site Mozilla :
The latest date to accept. If the value entered into the element occurs afterward, the element fails constraint validation. If the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element has no maximum date value.
If both the max and min attributes are set, this value must be a date string later than or equal to the one in the min attribute.
<input type="datetime-local" name="partyDate" id="partyDate" >
The input field shows as dd/mm/yyyy, -:-- on my new Chromebook
My other computers also using Chrome browser see it in 12hr time, so it is something in the Chromebook settings.
The input field shows as dd-----yyyy --:-- -- (local OS (winxp) date settings set to dd/MMM/yyyy and 12 hour time)
Time settings in the Chromebook is not set to 24hr time.
I am not sure where else to look as I am new to Chrome OS.
I would prefer to fix this without having to replace the datetime-local input field.
Thanks
EDIT - by changing the Chrome language from English UK to English US I got back the 12hr time, which technically answers the question, but an extension question: is there a setting I can change to have it display 29-May-2015 rather than 05-29-2015 like good ol Microsoft lets me?
Seems the default language of the Chromebook is English-UK which defines how dates are displayed. By changing the language to English-US, dates in the browser are now showing in 12hr format
I'm developing a web app where I should get time and date through a form. I have tried time but unfortunately it is not compatible with all browser. For example it doesn't work properly in Safari. So which is the best way to get date and time?
Select a time: <input type="time" name="usr_time">
this element doesn't work correctly on Safari
The new HTML 5 input types are very poorly supported right now.
Some options:
You can leave the code as it is and sanity check the input with JavaScript.
Use two input fields as suggested by #HaukurHaf
Use a JavaScript library
Write your own JavaScript
The quickest to get right would be to use a library that uses JavaScript to attach a script to the input field giving the user a better experience with perhaps a clock or other selector to help them.
For example, the JQuery based Time Entry helper by Keith Wood.
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...