Merge pull request #6184 from kevinansfield/fix-date-input

Fix changing text and jumping caret in PSM's date input

core/client/app/components/gh-datetime-input.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+import TextInputMixin from 'ghost/mixins/text-input';
+import boundOneWay from 'ghost/utils/bound-one-way';
+import {formatDate} from 'ghost/utils/date-formatting';
+
+const {Component} = Ember;
+
+export default Component.extend(TextInputMixin, {
+    tagName: 'span',
+    classNames: 'input-icon icon-calendar',
+
+    datetime: boundOneWay('value'),
+    inputClass: null,
+    inputId: null,
+    inputName: null,
+
+    didReceiveAttrs() {
+        let datetime = this.get('datetime') || moment();
+
+        if (!this.attrs.update) {
+            throw new Error(`You must provide an \`update\` action to \`{{${this.templateName}}}\`.`);
+        }
+
+        this.set('datetime', formatDate(datetime));
+    },
+
+    focusOut() {
+        let datetime = this.get('datetime');
+
+        this.attrs.update(datetime);
+    }
+});

core/client/app/controllers/post-settings-menu.js

@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import {parseDateString, formatDate} from 'ghost/utils/date-formatting';
+import {parseDateString} from 'ghost/utils/date-formatting';
 import SettingsMenuMixin from 'ghost/mixins/settings-menu-controller';
 import SlugGenerator from 'ghost/models/slug-generator';
 import boundOneWay from 'ghost/utils/bound-one-way';
@@ -43,25 +43,6 @@ export default Controller.extend(SettingsMenuMixin, {
             .create(deferred);
     }),
 
-    /*jshint unused:false */
-    publishedAtValue: computed('model.published_at', {
-        get() {
-            let pubDate = this.get('model.published_at');
-
-            if (pubDate) {
-                return formatDate(pubDate);
-            }
-
-            return formatDate(moment());
-        },
-        set(key, value) {
-            // We're using a fake setter to reset
-            // the cache for this property
-            return formatDate(moment());
-        }
-    }),
-    /*jshint unused:true */
-
     slugValue: boundOneWay('model.slug'),
 
     // Lazy load the slug generator
@@ -302,7 +283,7 @@ export default Controller.extend(SettingsMenuMixin, {
          */
         setPublishedAt(userInput) {
             let newPublishedAt = parseDateString(userInput);
-            let publishedAt = this.get('model.published_at');
+            let publishedAt = moment(this.get('model.published_at'));
             let errMessage = '';
 
             if (!userInput) {
@@ -326,7 +307,6 @@ export default Controller.extend(SettingsMenuMixin, {
             // If errors, notify and exit.
             if (errMessage) {
                 this.get('model.errors').add('post-setting-date', errMessage);
-
                 return;
             }
 

core/client/app/templates/components/gh-datetime-input.hbs

@@ -0,0 +1,5 @@
+{{gh-input value=datetime
+           id=inputId
+           class=inputClass
+           name=inputName
+           stopEnterKeyDownPropagation="true"}}

core/client/app/templates/post-settings-menu.hbs

@@ -28,9 +28,11 @@
 
             {{#gh-form-group errors=model.errors property="post-setting-date"}}
                 <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"}}
-                </span>
+                {{gh-datetime-input value=model.published_at
+                                    update=(action "setPublishedAt")
+                                    inputClass="post-setting-date"
+                                    inputId="post-setting-date"
+                                    inputName="post-setting-date"}}
                 {{gh-error-message errors=model.errors property="post-setting-date"}}
             {{/gh-form-group}}