Input type DateTime - Value format?

Question

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.

Unrighteous

Can you post the code you've tried? – Durga

@Durga <input type="datetime" name="timeOpen" value="<?php echo date('d/m/Y H:i:s'); ?>" size="64" required="required" /> – Unrighteous

Answer 1

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

Bradski

I don't know what's wrong, but... imgdumper.nl/uploads5/4fc8fe650df5f/… – Unrighteous

You're describing the datetime-local type, not datetime. datetime actually allows for timezones, offsets etc. See: W3C/html5: input type=datetime. – Plus

For anyone looking to convert a date string into the format mentioned in this post.. Using JavaScript, you can: new Date('valid-date-here').toISOString() – Lemnos

@HithamS.AlQadheeb I am also facing same problem. Could change the formate of time?#48881456 – Obvert

const dateForDateTimeInputValue = date => new Date(date.getTime() + new Date().getTimezoneOffset() * -60 * 1000).toISOString().slice(0, 19) – Humanitarian

Answer 2

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))

Godbey

Personally I couldn't care less about iOS 7 :p I care about the standards. If Apple doesn't, then that's their problem. – Unrighteous

@Unrighteous Unfortunately, HTML5 has decided to standardise what actually exists rather than what might be wanted to exist, and support for type="datetime" is already sparse. The current HTML5 version notes that the feature is "at risk and may be removed due to lack of implementation" – Pitiful

See also #21264015 – Pitiful

schema.org/docs/gs.html Sod Apple, I'll stick with the standards that agree with each other. – Disillusion

<input type="datetime-local"> working with desktop Chrome v53 and androud chrome. Thank you! – Wang

Answer 3

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).

Birthplace

It doesn't seem to be working, though. imgdumper.nl/uploads5/4fc8fe650df5f/… – Unrighteous

In the part you just added about the input element, it gives an exampe for date and time, but not datetime. And, as I mentioned in my question, simply combining them does not work. – Unrighteous

There is no datetime tag <datetime ... you can use date or time tags with datetime property which takes datetime="YYYY-MM-DDThh:mm:ssTZD" – Bradski

@D3mon-1stVFW ... I'm not using either date or time tags, though. – Unrighteous

@D3mon-1stVFW How's this not HTML5? – Unrighteous

how can I use the datetime type if I have a datetime in mysql format (YYYY-MM-DD hh:mm:ss)? In mysql, i do not have the "T" to separate date and time – Glaudia

Answer 4

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.

Finnigan

Answer 5

This works for setting the value of the INPUT:

strftime('%Y-%m-%dT%H:%M:%S', time())

Gravestone

Answer 6

That one shows up correctly as HTML5-Tag for those looking for this:

<input type="datetime" name="somedatafield" value="2011-12-21T11:33:23Z" />

Dygal

I think datetime is only available on Firefox. – Wifeless