{"id":1044,"date":"2016-05-23T14:55:45","date_gmt":"2016-05-23T14:55:45","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1044"},"modified":"2016-05-23T17:32:56","modified_gmt":"2016-05-23T17:32:56","slug":"ionic-2-fixing-date-inputs-for-the-mobile-web","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web","title":{"rendered":"Ionic 2: Fixing Date Inputs for the Mobile Web"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"620\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\" alt=\"pickers-header-img\" class=\"aligncenter size-full wp-image-1052 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-300x133.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-768x340.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-1024x453.jpg 1024w\" data-sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1400px; --smush-placeholder-aspect-ratio: 1400\/620;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"620\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\" alt=\"pickers-header-img\" class=\"aligncenter size-full wp-image-1052\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg 1400w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-300x133.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-768x340.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img-1024x453.jpg 1024w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/noscript><\/p>\n<p>Remember how easy it was to select a specific date from an HTML input? Or when you had that great experience with JavaScript\u2019s <code>Date<\/code> object? Or that large project where you had no troubles dealing with timezones? Me either. I think the best way to describe the experience comes from a Stack Overflow comment stating, \u201cHandling dates with Javascript is like trying to get a cat into a tub of water.\u201d<\/p>\n<p>Don\u2019t get me wrong&#8211;I absolutely love JavaScript and HTML. And to be fair, handling datetime values within any programming language or any user interface is a challenge (but let\u2019s be honest, it\u2019s exceptionally difficult with JavaScript and HTML). Ionic aims to make it easier for all parties involved by providing a great user interaction and an easy way to handle datetime values.<\/p>\n<p><!--more--><\/p>\n<div style=\"float: left; margin-left: -120px; margin-right: 20px; margin-top: 10px; margin-bottom: 0px; width: 42%;\">\n  <img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"1699\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker.jpg\" alt=\"nexus-picker\" class=\"alignnone size-full wp-image-1045 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker.jpg 920w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-162x300.jpg 162w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-768x1418.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-554x1024.jpg 554w\" data-sizes=\"auto, (max-width: 920px) 100vw, 920px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 920px; --smush-placeholder-aspect-ratio: 920\/1699;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"920\" height=\"1699\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker.jpg\" alt=\"nexus-picker\" class=\"alignnone size-full wp-image-1045\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker.jpg 920w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-162x300.jpg 162w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-768x1418.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/nexus-picker-554x1024.jpg 554w\" sizes=\"auto, (max-width: 920px) 100vw, 920px\" \/><\/noscript>\n<\/div>\n<h3>Native HTML Inputs<\/h3>\n<p>Let\u2019s start from the beginning: the user interaction. Simply put, native HTML inputs leave a lot to be desired, and what makes them even more challenging is how various browsers and operating systems all have a different interpretation of how they should work and how the user should interact with the selections.<\/p>\n<p>There&#8217;s just no consistency of datetime inputs on which app developers and designers can rely. And what makes matters worse is that HTML\u2019s datetime input is still <a href=\"http:\/\/stackoverflow.com\/questions\/21263515\/why-is-html5-input-type-datetime-removed-from-browsers-already-supporting-it\">undergoing changes<\/a> and is <a href=\"http:\/\/caniuse.com\/#feat=input-datetime\">not well supported<\/a>. This is where Ionic steps in to smooth over the rough edges of native HTML elements.<\/p>\n<h3>Ionic DateTime Picker<\/h3>\n<div style=\"float: right; margin-right: -160px; margin-left: 20px; margin-bottom: 12px; width: 46%;\">\n  <img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"1082\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker.jpg\" alt=\"iphone-picker\" class=\"alignnone size-full wp-image-1046 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker.jpg 582w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker-161x300.jpg 161w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker-551x1024.jpg 551w\" data-sizes=\"auto, (max-width: 582px) 100vw, 582px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 582px; --smush-placeholder-aspect-ratio: 582\/1082;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"1082\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker.jpg\" alt=\"iphone-picker\" class=\"alignnone size-full wp-image-1046\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker.jpg 582w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker-161x300.jpg 161w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/iphone-picker-551x1024.jpg 551w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/noscript>\n<\/div>\n<p>Instead of counting on each browser to provide a clean user interface and input selection (which simply cannot be relied upon across the board), Ionic provides the <code>ion-datetime<\/code> component as a way to normalize input behavior and to make it easier for developers to work with datetime values.<\/p>\n<p>And as a side note, the DateTime picker is actually just a thin wrapper around Ionic\u2019s Picker API. By exposing the Picker API, which the DateTime component uses under the hood, apps can create any single or multi-column selectable input, and they\u2019re not just restricted to dates and times.<\/p>\n<p>One difference from native HTML inputs, is that <code>&lt;ion-datetime&gt;<\/code> can format both the printed text of the value and the picker\u2019s user interface. Traditionally, HTML\u2019s <code>&lt;input&gt;<\/code>s have been notoriously difficult to style, or even to format. But now, with <code>&lt;ion-datetime&gt;<\/code>, developers can control the formats of both the display and interface, and even better, they can style them with simple CSS to get as detailed as needed.<\/p>\n<div style=\"width: 1100px; margin-left: -210px; margin-top: 40px;\">\n<img loading=\"lazy\" decoding=\"async\" width=\"2200\" height=\"720\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img.jpg\" alt=\"pickers-img\" class=\"aligncenter size-full wp-image-1050 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img.jpg 2200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-300x98.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-768x251.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-1024x335.jpg 1024w\" data-sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 2200px; --smush-placeholder-aspect-ratio: 2200\/720;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"2200\" height=\"720\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img.jpg\" alt=\"pickers-img\" class=\"aligncenter size-full wp-image-1050\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img.jpg 2200w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-300x98.jpg 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-768x251.jpg 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-img-1024x335.jpg 1024w\" sizes=\"auto, (max-width: 2200px) 100vw, 2200px\" \/><\/noscript>\n<\/div>\n<p \/>\n<p>As with any part of Ionic, we want to make sure the interface feels right at home on the platform with which the user is familiar. The Material Design, iOS, and Windows modes within Ionic all have datetime pickers that feel natural to their respective users. But what\u2019s important to note is that the same source code is used for each platform, so there&#8217;s no need to rewrite the same concept for every platform.<\/p>\n<pre><code>&lt;ion-item&gt;\n  &lt;ion-label&gt;Date&lt;\/ion-label&gt;\n  &lt;ion-datetime displayFormat=&quot;MMM DD, YYYY&quot; [(ngModel)]=&quot;myDate&quot;&gt;&lt;\/ion-datetime&gt;\n&lt;\/ion-item&gt;\n<\/code><\/pre>\n<p \/>\n<p>All of this only scratches the surface of what DateTime components brings to Ionic apps. Please check out the <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/datetime\/DateTime\/\">DateTime API<\/a> to find out more about its capabilities and features.<\/p>\n<h3>Conclusion<\/h3>\n<p>Receiving datetime values from users and persisting that value within JavaScript is often an essential part of an app. However, dealing with datetime values is easier said than done. With Ionic\u2019s new <code>&lt;ion-datetime&gt;<\/code>, we\u2019ve made it even easier for developers to quickly create a great user interface with just a few lines of code. This is all part of Ionic\u2019s larger effort to fill in the holes where native HTML struggles and make it even easier to develop performant apps.<\/p>\n<p>Check it out and let us know how it goes! Also, take a look at the new <a href=\"http:\/\/ionicframework.com\/docs\/v2\/api\/components\/picker\/Picker\/\">Picker API<\/a>, which helps to make all this possible.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Remember how easy it was to select a specific date from an HTML input? Or when you had that great experience with JavaScript\u2019s Date object? Or that large project where you had no troubles dealing with timezones? Me either. I think the best way to describe the experience comes from a Stack Overflow comment stating, [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13],"class_list":["post-1044","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ionic 2: Fixing Date Inputs for the Mobile Web - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 2: Fixing Date Inputs for the Mobile Web\" \/>\n<meta property=\"og:description\" content=\"Remember how easy it was to select a specific date from an HTML input? Or when you had that great experience with JavaScript\u2019s Date object? Or that large project where you had no troubles dealing with timezones? Me either. I think the best way to describe the experience comes from a Stack Overflow comment stating, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-23T14:55:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-23T17:32:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\" \/>\n<meta name=\"author\" content=\"Adam Bradley\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@adamdbradley\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Bradley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\"},\"author\":{\"name\":\"Adam Bradley\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21\"},\"headline\":\"Ionic 2: Fixing Date Inputs for the Mobile Web\",\"datePublished\":\"2016-05-23T14:55:45+00:00\",\"dateModified\":\"2016-05-23T17:32:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\"},\"wordCount\":635,\"commentCount\":31,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\",\"keywords\":[\"Ionic\",\"Ionic 2\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\",\"url\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\",\"name\":\"Ionic 2: Fixing Date Inputs for the Mobile Web - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\",\"datePublished\":\"2016-05-23T14:55:45+00:00\",\"dateModified\":\"2016-05-23T17:32:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg\",\"width\":1400,\"height\":620},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 2: Fixing Date Inputs for the Mobile Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21\",\"name\":\"Adam Bradley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg\",\"caption\":\"Adam Bradley\"},\"sameAs\":[\"http:\/\/twitter.com\/adamdbradley\",\"https:\/\/x.com\/adamdbradley\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/adam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ionic 2: Fixing Date Inputs for the Mobile Web - Ionic Blog","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:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web","og_locale":"en_US","og_type":"article","og_title":"Ionic 2: Fixing Date Inputs for the Mobile Web","og_description":"Remember how easy it was to select a specific date from an HTML input? Or when you had that great experience with JavaScript\u2019s Date object? Or that large project where you had no troubles dealing with timezones? Me either. I think the best way to describe the experience comes from a Stack Overflow comment stating, [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web","og_site_name":"Ionic Blog","article_published_time":"2016-05-23T14:55:45+00:00","article_modified_time":"2016-05-23T17:32:56+00:00","og_image":[{"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg"}],"author":"Adam Bradley","twitter_card":"summary_large_image","twitter_creator":"@adamdbradley","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Adam Bradley","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web"},"author":{"name":"Adam Bradley","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21"},"headline":"Ionic 2: Fixing Date Inputs for the Mobile Web","datePublished":"2016-05-23T14:55:45+00:00","dateModified":"2016-05-23T17:32:56+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web"},"wordCount":635,"commentCount":31,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg","keywords":["Ionic","Ionic 2"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web","url":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web","name":"Ionic 2: Fixing Date Inputs for the Mobile Web - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg","datePublished":"2016-05-23T14:55:45+00:00","dateModified":"2016-05-23T17:32:56+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2016\/05\/pickers-header-img.jpg","width":1400,"height":620},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/ionic-2-fixing-date-inputs-for-the-mobile-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Ionic 2: Fixing Date Inputs for the Mobile Web"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/92f90fb9d52e33d4241c5ac46477cd21","name":"Adam Bradley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/04\/adambradley-150x150.jpg","caption":"Adam Bradley"},"sameAs":["http:\/\/twitter.com\/adamdbradley","https:\/\/x.com\/adamdbradley"],"url":"https:\/\/ionic.io\/blog\/author\/adam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1044"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1044\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}