I am trying to add time picker using html5 default input field as
<input type="time" name="stat-time" value="" max="03:15:00 PM" />
Since i used 03:15:00 PM for the max value, whereas; whenever user adds 4:00 Pm, it generates error and show Please enter a value less than or equal to 15:15:00 PM..
Although it is correct for showing error, but i want to display this error in 12 hour format. like Please enter a value less than equal to 4:15:00 PM
In other words error should also be in same format which is taken by the input field.
Screenshot:
Any Suggestion will be appreciated. Thanks
Note: This error can only reproduce on browser using mobile devices.
I come up with a trick, as far as, this issue is only on mobile devices, i used the php to add the title to modify the error message.
like <input name="start_time" type="time" max="<?php echo $dt->format('H:i:s A'); ?>" value="" <?php echo $device != 'pc' ? 'title="Please enter a value less than equal to '.$dt->format('h:i:s A').'" : 'title="Enter time value"' ' ?>>
Now it compares 24hour format but will display the error message in 12 hour format.
Though i still want to have a proper method to handle this issue in html5.
Related
I am trying to pre-populate a time field on an input form, and I'm getting the field from a database. I was successful in finding how to do this with the date field by putting this in my value attribute:
"value="{{shipment.pickup_date|date:'Y-m-d'}}">"
Is there a similar conversion I can make with a time value? I've tried "HH:mm:ss", "H:m:s", to no avail. I can see in via the Chrome Elements tab that the value is getting passed properly, it's just not getting displayed in the field.
You can provide a value to the input tag in your template by passing the shipment's pickup_date value to the time filter with the right format. Providing the right format is key here, since the additional a.m. in your current value is not accepted. As a result, type="time" expects something like H:M; where H is the hour in double digits, and M is the minutes in double digits, as well. This means that you should change your code to the following:
<div class="">
<input type="time" name="pickup_time" value="{{ shipment.pickup_date|time:'H:i' }}">
</div>
Here, H:i is the format that converts your time value to something like H:M.
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.
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>
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
My problem is how to input date in HTML form in this format 21-01-1999 and not in this format 01-21-1999?
When I write this HTML code
<input name = "dPregled" id="dat" type="date" required="required" />
</p>
it gives me mm-dd-yyyy format for input.
Also is there a way to automatically take today's date in a form?
I have been researching for an answer everywhere but I can not find it.
Thank u so much.
A quick Google search gives me loads of answers to your question.
From https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome?hl=en (so this applies to Chrome)
Web authors have no way to change the date format because there
currently is no standards to specify the format.
For the rest, according to Is there any way to change input type="date" format? and How to set date format in HTML date input tag?, there is currently no way to change the date format. It is all determined by your browser/OS, and because there is no specification yet for how to change the date format, you currently cannot change the format.
However
The Stack Overflow posts mentioned above are quite old, but one of the more recent answers (currently the second one on Is there any way to change input type="date" format?) does provide an answer on how to edit the format, although it requires some playing around with what I'd call somewhat advanced stuff. You can do it with HTML5 and the shadow DOM, which enables you to more or less create your own HTML elements. Older browsers / browser versions don't usually support it too well, though, but you could dig into it a bit and see if it works for you.
Regard to this question:
Also is there a way to automatically take today's date in a form?
Here what I'm gonna do if I need the current date:
//assign that variable to your date field
//today date.
if(empty ($_POST['date_today'])){
$_POST['date_today'] = date("Y-m-d");
}
//if u need other date + or - number day to count that date(here is past 5 days)
if(empty ($_POST['date_from'])){
$_POST['date_from'] = date("Y-m-d", strtotime("-5 day"));
}
in your html (for today) should be like this:
<input type="date" name="date_today" value="<?=$date_today?>" >
don't forget to declare that variable (eg. today date)
$date_today = $_POST['date_today'];
go with Jquery date picker its easy and it can modify date in any format
use Input type text instead so its more convenient to use predefined values
or use this code, and edit as per requirement
basically this code will help you check out
<!-----user will type date in dd-mm-yyyy formate but as he leaves textbox date will be converted to mm-dd-yyyy--->
<!--run it on fiddle : https://jsfiddle.net/rokrd/jp1swqru/9/ --->
<input type="text" name = "dPregled" id="dat" onchange="dateconverter()" required="required" />
<script>
function dateconverter(){
/*const monthNames = ["Jan","Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];*/
var testDate = document.getElementById("dat").value;
dteSplit = testDate.split("-");
yr = dteSplit[2]; //special yr format, take last 2 digits
month = dteSplit[1];
month = parseInt(month);
//month = monthNames[month];
//remove comment to get output in dd/M/yyyy
day = dteSplit[0];
alert ("converted to mm/dd/yyyy > "+month+"-"+day+"-"+yr);
document.getElementById("dat").value = month+"-"+day+"-"+yr;
}
</script>
with firefox, I have the same issue.
I found this link :
https://support.mozilla.org/en-US/questions/1309229
use about:config to set firefox params
and switch intl.regional_prefs.use_os_locales to true and it works fine.
I have a simple operating booking system using php. I give the user an option to select a data and time from date and time input fields. Now for the booking system I only want the user to be able to select in hour blocks but the current format of the time picker is hours:minutes:seconds in the format 00:00:00. Is there any way to disable the minutes and seconds? My current code is as follows, just the default for the time picker.
<input type="time" name="time" id="time" />
Any help would be great if possible, I know its hard to format the date and time pickers and varies alot on web browser so i'm using google chrome latest version 48.0.2564.116. Thanks!
The HTML5 specification states that valid type=time input elements must have a valid time string which must have:
Two ASCII digits, representing hour, in the range 0 ≤ hour ≤ 23
A ":" (U+003A) character
Two ASCII digits, representing minute, in the range 0 ≤ minute ≤ 59
The seconds themselves are already optional (that's part 4, but I didn't quote that above). However this does mean that the value of these elements wouldn't be valid without the minute entry.
Perhaps you'd be better off with a type=number input element instead, with a min of 0 and a max of 11 or 23 depending on your preference:
<input type=number min=0 max=23 value=0 />
Use JSON.stringify() to convet the time to string.
Then use the following function
var time = str.substring(0, 3);
This will display time in hours only
Add step attribute.
<input type="time" name="time" id="time" step="3600"/>
This will help you formatting the timepicker of chrome:
http://www.html5tutorial.info/html5-date.php
So you can see, that the steps, you could choose, doesn't contain n "Hour" step.
Best solution would be an html timepicker and/or a Javascriptfunction
In which format should I put the date and time, for use in the HTML5 input element with datetime type?
I have tried:
1338575502
01/06/2012 19:31
01/06/2012 19:21:00
2012-06-01
2012-06-01 19:31
2012-06-01 19:31:00
None of them seem to work.
For <input type="datetime" value="" ...
A string representing a global date and time.
Value: A valid date-time
as defined in [RFC 3339], with these additional qualifications:
•the literal letters T and Z in the date/time syntax must always be uppercase
•the date-fullyear production is instead defined as four or
more digits representing a number greater than 0
Examples:
1990-12-31T23:59:60Z
1996-12-19T16:39:57-08:00
http://www.w3.org/TR/html-markup/input.datetime.html#input.datetime.attrs.value
Update:
This feature is obsolete. Although it may still work in some browsers,
its use is discouraged since it could be removed at any time. Try to
avoid using it.
The HTML was a control for entering a date and
time (hour, minute, second, and fraction of a second) as well as a
timezone. This feature has been removed from WHATWG HTML, and is no
longer supported in browsers.
Instead, browsers are implementing (and developers are encouraged to
use) the datetime-local input type.
Why is HTML5 input type datetime removed from browsers already supporting it?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
For what it's worth, with iOS7 dropping support for datetime you need to use datetime-local which doesn't accept timezone portion (which makes sense).
Doesn't work (iOS anyway):
<input type="datetime-local" value="2000-01-01T00:00:00+05:00" />
Works:
<input type="datetime-local" value="2000-01-01T00:00:00" />
PHP for value (windows safe):
strftime('%Y-%m-%dT%H:%M:%S', strtotime($my_datetime_input))
This article seems to show the valid types that are acceptable
<time>2009-11-13</time>
<!-- without #datetime content must be a valid date, time, or precise datetime -->
<time datetime="2009-11-13">13<sup>th</sup> November</time>
<!-- when using #datetime the content can be anything relevant -->
<time datetime="20:00">starting at 8pm</time>
<!-- time example -->
<time datetime="2009-11-13T20:00+00:00">8pm on my birthday</time>
<!-- datetime with time-zone example -->
<time datetime="2009-11-13T20:00Z">8pm on my birthday</time>
<!-- datetime with time-zone “Z” -->
This one covers using it in the <input> field:
<input type="date" name="d" min="2011-08-01" max="2011-08-15"> This
example of the HTML5 input type "date" combine with the attributes min
and max shows how we can restrict the dates a user can input. The
attributes min and max are not dependent on each other and can be used
independently.
<input type="time" name="t" value="12:00"> The HTML5 input type
"time" allows users to choose a corresponding time that is displayed
in a 24hour format. If we did not include the default value of "12:00"
the time would set itself to the time of the users local machine.
<input type="week" name="w"> The HTML5 Input type week will display
the numerical version of the week denoted by a "W" along with the
corresponding year.
<input type="month" name="m"> The HTML5 input type month does
exactly what you might expect it to do. It displays the month. To be
precise it displays the numerical version of the month along with the
year.
<input type="datetime" name="dt"> The HTML5 input type Datetime
displays the UTC date and time code. User can change the the time
steps forward or backward in one minute increments. If you wish to
display the local date and time of the user you will need to use the
next example datetime-local
<input type="datetime-local" name="dtl" step="7200"> Because
datetime steps through one minute at a time, you may want to change
the default increment by using the attribute "step". In the following
example we will have it increment by two hours by setting the
attribute step to 7200 (60seconds X 60 minutes X 2).
This was a good waste of an hour of my time. For you eager beavers, the following format worked for me:
<input type="datetime-local" name="to" id="to" value="2014-12-08T15:43:00">
The spec was a little confusing to me, it said to use RFC 3339, but on my PHP server when I used the format DATE_RFC3339 it wasn't initializing my hmtl input :( PHP's constant for DATE_RFC3339 is "Y-m-d\TH:i:sP" at the time of writing, it makes sense that you should get rid of the timezone info (we're using datetime-LOCAL, folks). So the format that worked for me was:
"Y-m-d\TH:i:s"
I would've thought it more intuitive to be able to set the value of the datepicker as the datepicker displays the date, but I'm guessing the way it is displayed differs across browsers.
This works for setting the value of the INPUT:
strftime('%Y-%m-%dT%H:%M:%S', time())
That one shows up correctly as HTML5-Tag for those looking for this:
<input type="datetime" name="somedatafield" value="2011-12-21T11:33:23Z" />