{"id":4367,"date":"2015-05-20T12:15:05","date_gmt":"2015-05-20T09:15:05","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=4367"},"modified":"2017-12-19T14:01:26","modified_gmt":"2017-12-19T12:01:26","slug":"html5-date-time-components-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/","title":{"rendered":"HTML5 Date Time Components Example"},"content":{"rendered":"<p>The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and not all browsers support it (i.e mozilla firefox).<\/p>\n<p>Chrome fully supports the following components, while IE and Firefox still don&#8217;t. To check if your browser supports this component check  <a href=\"http:\/\/caniuse.com\/\" target=\"_blank\">here<\/a>.<\/p>\n<p>We take these elements in consideration because they represent <code>input<\/code> elements of html and thus we get get data from the user. <\/p>\n<p>The approach we&#8217;ll use is going to be getting to know all elements of date and time we can use, and then do some styling to enhance usability.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;tgm4cmEWcKUikZNn&#8217;]<\/p>\n<h2> 1. Basic Setup and Application<\/h2>\n<p>Below, we take a look at the necessary setup and the basic application of this element in html.<\/p>\n<h3> 1.1 Basic Setup<\/h3>\n<p>First, go ahead and create a new html file with the basic syntax in it like this:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;HTML5 Date and Time Components&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n\t&lt;!-- STYLE  SECTION --&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n\r\n  &lt;\/style&gt;\r\n\r\n\t&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<h3> 1.2 Basic Application<\/h3>\n<p>The date and time component can be applied by giving the input a <code>datetime-local<\/code> type.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Date and Time --&gt;\r\n&lt;input type=\"datetime-local\" value=\"none\" \/&gt;\r\n<\/pre>\n<p>You could once use the input type <code>datetime<\/code> to show this component but Chrome doesn&#8217;t support that anymore.<\/p>\n<p>The datetime component would look like this:<br \/>\n<figure id=\"attachment_4382\" aria-describedby=\"caption-attachment-4382\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime11.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime11.jpg\" alt=\"Basic Datetime Component in HTML\" width=\"820\" height=\"257\" class=\"size-full wp-image-4382\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime11.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime11-300x94.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4382\" class=\"wp-caption-text\">Basic Datetime Component in HTML<\/figcaption><\/figure><\/p>\n<p>As you can see, the initial view consists of mm\/dd\/yyyy hh:mm well-known format, while the hover view adds controls.<\/p>\n<p>The dropdown icon (the last item you see) brings up a simplified calendar-like section for you to choose the date.<br \/>\n<figure id=\"attachment_4385\" aria-describedby=\"caption-attachment-4385\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime2.jpg\" alt=\"The dropdown component of date!\" width=\"820\" height=\"257\" class=\"size-full wp-image-4385\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime2-300x94.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4385\" class=\"wp-caption-text\">The dropdown component of date!<\/figcaption><\/figure><br \/>\nThat was the most basic application\/type of date and time components. Now lets see what other types there are.<\/p>\n<p>The dropdown left and right arrows navigate thorugh months white the dot in the middle sets the current date in the input.<\/p>\n<h2> 2. Data and Time Input Types<\/h2>\n<p>In this section, we will see other cases of date or time input types.<\/p>\n<h3> 2.1 Unristricted Date Input<\/h3>\n<p>For a typical date choosing option with no restrictions at all, you could just have the <code>date<\/code> input type.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Date Unrestricted --&gt;\r\n&lt;input type=\"date\" value=\"none\" \/&gt;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4388\" aria-describedby=\"caption-attachment-4388\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime3.jpg\" alt=\"Date HTML5 Component - Not Restricted\" width=\"820\" height=\"257\" class=\"size-full wp-image-4388\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime3-300x94.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4388\" class=\"wp-caption-text\">Date HTML5 Component &#8211; Not Restricted<\/figcaption><\/figure><br \/>\nWe say not restricted, because you can restrict\/limit the choice of dates the user can make in case you want.<\/p>\n<h3> 2.2 Ristricted Date Input<\/h3>\n<p>If you want to limit date choice just add a <code>min<\/code> and <code>max<\/code> attributes and values after the <code>date<\/code> input type like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Date Restricted --&gt;\r\n&lt;input type=\"date\" min=\"2012-01-01\" max=\"2013-01-01\"&gt;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4390\" aria-describedby=\"caption-attachment-4390\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime4.jpg\" alt=\"Date HTML5 Component \u2013 Restricted\" width=\"820\" height=\"257\" class=\"size-full wp-image-4390\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime4-300x94.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4390\" class=\"wp-caption-text\">Date HTML5 Component \u2013 Restricted<\/figcaption><\/figure><br \/>\nLook at the year choices, there are only two, 2012 and 2013, the ones we decided as limits.<\/p>\n<h3> 2.3 Month Input Type<\/h3>\n<p>If you want a monthly focused input, just add the <code>month<\/code> keyword inside the type of input like below:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Month Choice --&gt;\r\n&lt;input name=\"month\" type=\"month\"&gt;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4392\" aria-describedby=\"caption-attachment-4392\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime5.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime5.jpg\" alt=\"Month HTML5 Component \" width=\"820\" height=\"257\" class=\"size-full wp-image-4392\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime5.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime5-300x94.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4392\" class=\"wp-caption-text\">Month HTML5 Component<\/figcaption><\/figure><br \/>\nNow you get months to choose, instead of dates, and the input box is kinda changed to fit the month name.<\/p>\n<h3> 2.4 Week Input Type<\/h3>\n<p>Alongside with date and month, you could also have an input type <code>week<\/code> which will show the week number of the year.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Week Choice --&gt;\r\n&lt;input name=\"week\" type=\"week\"&gt;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4394\" aria-describedby=\"caption-attachment-4394\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime6.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime6.jpg\" alt=\"Week HTML5 Component\" width=\"820\" height=\"271\" class=\"size-full wp-image-4394\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime6.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime6-300x99.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4394\" class=\"wp-caption-text\">Week HTML5 Component<\/figcaption><\/figure><br \/>\nNow you get a slightly different view of the dropdown, which allows you to easier choose weeks highlighting days.<\/p>\n<h3> 2.5 Time Input Type<\/h3>\n<p>Just like you want to get date from input, you might also want to get time, and you do that with the <code>time<\/code> input type.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Time Choice --&gt;\r\n&lt;input name=\"time\" type=\"time\"&gt;\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_4396\" aria-describedby=\"caption-attachment-4396\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime7.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime7.jpg\" alt=\"Time HTML5 Component\" width=\"820\" height=\"153\" class=\"size-full wp-image-4396\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime7.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime7-300x56.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4396\" class=\"wp-caption-text\">Time HTML5 Component<\/figcaption><\/figure><br \/>\nAs simple as that, you get a time information from the user with this input type.<\/p>\n<p>Another thing you can do with the <code>time<\/code> component is give it some parameters like min and max time and also a step attribute where you define how minutes should a click of the chevron\/arrows step forward\/backward. Look at the code:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Time Choice - 15 min intervals --&gt;\r\n&lt;input type='time' min=9:00 max=17:00 step=900 &gt;\r\n<\/pre>\n<p>It sets a minimum and maximum time limit that you can choose and also a 900s (15min) step per click.<\/p>\n<p>The time intervals on up and down icons click would look like this:<br \/>\n<figure id=\"attachment_4403\" aria-describedby=\"caption-attachment-4403\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime9.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime9.jpg\" alt=\"Custom Time Component\" width=\"820\" height=\"153\" class=\"size-full wp-image-4403\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime9.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime9-300x56.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4403\" class=\"wp-caption-text\">Custom Time Component<\/figcaption><\/figure><\/p>\n<h2> 3. A Styling Example<\/h2>\n<p>The above components in html were not styled at all, that was their default style. Lets style one of the components.<\/p>\n<p>First, give the date input element a class of <code>date<\/code>.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;!-- Example of Time Choice --&gt;\r\n&lt;input class=\"date\" type=\"date\" value=\"none\" &gt;\r\n<\/pre>\n<p>Now, add some styling like font family, size, color, width and height, border and padding.<\/p>\n<pre class=\"brush:css\">\r\n  .date {\r\n  \twidth: 10em;\r\n  \theight: 2em;\r\n  \tborder: 0.2em solid #2db0e6;\r\n  \tborder-radius: 0.5em;\r\n  \tpadding: 0.1em 0em 0.1em 1em;\r\n  \tvertical-align: middle;\r\n  \tbackground-color: #ebf5ff;\r\n  \tcolor: #727272;\r\n  \tfont-size: 1.2em;\r\n  \tfont-family: \"Lato\";\r\n  }\r\n<\/pre>\n<p>The styled date input would look like this:<br \/>\n<figure id=\"attachment_4407\" aria-describedby=\"caption-attachment-4407\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime10.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime10.jpg\" alt=\"Styled Date Component\" width=\"820\" height=\"153\" class=\"size-full wp-image-4407\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime10.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/datetime10-300x56.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-4407\" class=\"wp-caption-text\">Styled Date Component<\/figcaption><\/figure><br \/>\nHowever, you will notice that you cannot still style the controls icons or the dropdown because browsers won&#8217;t read your changes.<\/p>\n<h2> 4. Conclusion<\/h2>\n<p>To conclude, we can say that as an input type, date and time inputs are really easy and efficent to use to get information from users. Remember the basic types: <code>datetime-local<\/code>, <code>date<\/code>, <code>month<\/code>, <code>week<\/code>, <code>time<\/code> and their custom forms.<\/p>\n<p>You can also add styling on date and time components, but that is optional as long as it has a default style. Whenever you want to get information from the inputs, do add the <code>name<\/code> keyword and give it an understandable name that you can refer.<\/p>\n<p>That was all, feel free to try all of the components by yourself, or download the code below.<\/p>\n<h2> 5. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/04\/HTML-Datetime.zip\"><strong>HTML5 Date &amp; Time Components<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and not all browsers support it (i.e mozilla firefox). Chrome fully supports the following components, while IE and Firefox still don&#8217;t. To check if your browser supports &hellip;<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-4367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Date Time Components Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Date Time Components Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-20T09:15:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T12:01:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Date Time Components Example\",\"datePublished\":\"2015-05-20T09:15:05+00:00\",\"dateModified\":\"2017-12-19T12:01:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\"},\"wordCount\":918,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\",\"name\":\"HTML5 Date Time Components Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-05-20T09:15:05+00:00\",\"dateModified\":\"2017-12-19T12:01:26+00:00\",\"description\":\"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Date Time Components Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Date Time Components Example - Web Code Geeks - 2026","description":"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Date Time Components Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-05-20T09:15:05+00:00","article_modified_time":"2017-12-19T12:01:26+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Date Time Components Example","datePublished":"2015-05-20T09:15:05+00:00","dateModified":"2017-12-19T12:01:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/"},"wordCount":918,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/","name":"HTML5 Date Time Components Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-05-20T09:15:05+00:00","dateModified":"2017-12-19T12:01:26+00:00","description":"The aim of this example is to show how to use and style different date and time components. Date and time components are new elements added on HTML5 and","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-date-time-components-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Date Time Components Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=4367"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/4367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=4367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=4367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=4367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}