diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss index 59f69a7c29..b70ce8b764 100644 --- a/core/client/assets/sass/patterns/forms.scss +++ b/core/client/assets/sass/patterns/forms.scss @@ -49,7 +49,8 @@ form { input[type="tel"], input[type="text"], input[type="url"], - input[type="date"] { + input[type="date"], + input[type="datetime-local"] { padding-left: 3.2rem; } .gh-select { @@ -144,6 +145,7 @@ input[type="tel"], input[type="text"], input[type="url"], input[type="date"], +input[type="datetime-local"], textarea, .gh-select, select { @@ -166,6 +168,11 @@ select { } +// Fix for iOS where this element _looks_ like a <select> element +input[type="datetime-local"] { + -webkit-appearance: none; +} + textarea { width: 100%; max-width: 500px; diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs index 34cab541fa..db45752418 100644 --- a/core/client/templates/post-settings-menu.hbs +++ b/core/client/templates/post-settings-menu.hbs @@ -19,7 +19,7 @@ <div class="form-group"> <label for="post-setting-date">Publish Date</label> <span class="input-icon icon-calendar"> - {{gh-input class="post-setting-date" id="post-setting-date" value=publishedAtValue name="post-setting-date" focus-out="setPublishedAt" stopEnterKeyDownPropagation="true"}} + {{gh-input type="datetime-local" class="post-setting-date" id="post-setting-date" value=publishedAtValue name="post-setting-date" focus-out="setPublishedAt" stopEnterKeyDownPropagation="true"}} </span> </div> diff --git a/core/client/utils/date-formatting.js b/core/client/utils/date-formatting.js index f81554c2fe..291c0afa1e 100644 --- a/core/client/utils/date-formatting.js +++ b/core/client/utils/date-formatting.js @@ -14,9 +14,10 @@ parseDateFormats = ['DD MMM YY @ HH:mm', 'DD MMM YY HH:mm', 'DD-MM-YY @ HH:mm', 'DD-MM-YY HH:mm', 'DD-MM-YYYY @ HH:mm', 'DD-MM-YYYY HH:mm', 'YYYY-MM-DD @ HH:mm', 'YYYY-MM-DD HH:mm', - 'DD MMM @ HH:mm', 'DD MMM HH:mm']; + 'DD MMM @ HH:mm', 'DD MMM HH:mm', + 'YYYY-MM-DDTHH:mm']; -displayDateFormat = 'DD MMM YY @ HH:mm'; +displayDateFormat = 'YYYY-MM-DDTHH:mm'; // Add missing timestamps verifyTimeStamp = function (dateString) {