Change Date picker to use Wordpress date format

assets/js/src/date.js

@@ -40,8 +40,17 @@ define('date',
       return this;
     },
     format: function(date, options) {
+      options = options || {};
       this.init(options);
-      return Moment(date).format(this.convertFormat(this.options.format));
+
+      return Moment(date, this.convertFormat(options.parseFormat))
+        .format(this.convertFormat(this.options.format));
+    },
+    toDate: function(date, options) {
+      options = options || {};
+      this.init(options);
+
+      return Moment(date, this.convertFormat(options.parseFormat)).toDate();
     },
     short: function(date) {
       return this.format(date, {
@@ -113,6 +122,8 @@ define('date',
         }
       };
 
+      if (!format || format.length <= 0) return format;
+
       const replacements = format_mappings['date'];
 
       let outputFormat = '';

assets/js/src/newsletters/send/standard.jsx

@@ -21,7 +21,9 @@ define(
     var settings = window.mailpoet_settings || {},
         currentTime = window.mailpoet_current_time || '00:00',
         defaultDateTime = window.mailpoet_current_date + ' ' + '00:00:00';
-        timeOfDayItems = window.mailpoet_schedule_time_of_day;
+        timeOfDayItems = window.mailpoet_schedule_time_of_day,
+        dateDisplayFormat = window.mailpoet_date_display_format,
+        dateStorageFormat = window.mailpoet_date_storage_format;
 
     var datepickerTranslations = {
       closeText: MailPoet.I18n.t('close'),
@@ -85,26 +87,46 @@ define(
       ],
     };
 
-    var isScheduledField = {
-      name: 'isScheduled',
-    };
-
     var DateText = React.createClass({
+      onChange: function(event) {
+        // Swap display format to storage format
+        var displayDate = event.target.value,
+            storageDate = this.getStorageDate(displayDate);
+
+        event.target.value = storageDate;
+        this.props.onChange(event);
+      },
       componentDidMount: function() {
         var $element = jQuery(this.refs.dateInput),
             that = this;
         if ($element.datepicker) {
+          // Override jQuery UI datepicker Date parsing and formatting
+          jQuery.datepicker.parseDate = function(format, value) {
+            // Transform string format to Date object
+            return MailPoet.Date.toDate(value, {
+              parseFormat: dateDisplayFormat,
+              format: format
+            });
+          };
+          jQuery.datepicker.formatDate = function(format, value) {
+            // Transform Date object to string format
+            var newValue = MailPoet.Date.format(value, {
+              format: format
+            });
+            return newValue;
+          };
+
           $element.datepicker(_.extend({
-            dateFormat: "yy-mm-dd",
+            dateFormat: this.props.displayFormat,
             isRTL: false,
             onSelect: function(value) {
-              that.props.onChange({
+              that.onChange({
                 target: {
                   name: that.getFieldName(),
                   value: value,
                 },
               });
-            }
+            },
           }, datepickerTranslations));
 
           this.datepickerInitialized = true;
@@ -118,14 +140,26 @@ define(
       getFieldName: function() {
         return this.props.name || 'date';
       },
+      getDisplayDate: function(date) {
+        return MailPoet.Date.format(date, {
+          parseFormat: this.props.storageFormat,
+          format: this.props.displayFormat
+        });
+      },
+      getStorageDate: function(date) {
+        return MailPoet.Date.format(date, {
+          parseFormat: this.props.displayFormat,
+          format: this.props.storageFormat
+        });
+      },
       render: function() {
         return (
           <input
             type="text"
             size="10"
             name={this.getFieldName()}
-            value={this.props.value}
+            value={this.getDisplayDate(this.props.value)}
-            onChange={this.props.onChange}
+            onChange={this.onChange}
             ref="dateInput"
             {...this.props.validation} />
         );
@@ -203,6 +237,8 @@ define(
               name="date"
               value={this.state.date}
               onChange={this.handleChange}
+              displayFormat={dateDisplayFormat}
+              storageFormat={dateStorageFormat}
               validation={this.props.dateValidation}/>
             <TimeSelect
               name="time"
@@ -241,7 +277,6 @@ define(
         return {
           'data-parsley-required': true,
           'data-parsley-required-message': MailPoet.I18n.t('noScheduledDateError'),
-          'data-parsley-pattern': '[0-9]{4}-[0-9]{2}-[0-9]{2}',
           'data-parsley-errors-container': '#mailpoet_scheduling',
         };
       },

lib/Twig/Functions.php

@@ -52,6 +52,16 @@ class Functions extends \Twig_Extension {
         array($this, 'getSendingFrequency'),
         array('is_safe' => array('all'))
       ),
+      new \Twig_SimpleFunction(
+        'wp_date_format',
+        array($this, 'getWPDateFormat'),
+        array('is_safe' => array('all'))
+      ),
+      new \Twig_SimpleFunction(
+        'wp_time_format',
+        array($this, 'getWPTimeFormat'),
+        array('is_safe' => array('all'))
+      ),
       new \Twig_SimpleFunction(
         'wp_datetime_format',
         array($this, 'getWPDateTimeFormat'),
@@ -96,14 +106,20 @@ class Functions extends \Twig_Extension {
     }
   }
 
-  function getWPDateTimeFormat() {
+  function getWPDateFormat() {
-    $date_format = (get_option('date_format')) ?
+    return (get_option('date_format')) ?
       get_option('date_format') :
       'F j, Y';
-    $time_format = (get_option('time_format')) ?
+  }
+
+  function getWPTimeFormat() {
+    return (get_option('time_format')) ?
       get_option('time_format') :
       'g:i a';
-    return sprintf('%s %s', $date_format, $time_format);
+  }
+
+  function getWPDateTimeFormat() {
+    return sprintf('%s %s', $this->getWPDateFormat(), $this->getWPTimeFormat());
   }
 
   function params($key = null) {

views/newsletters.html

@@ -12,6 +12,8 @@
     var mailpoet_current_date = <%= json_encode(current_date) %>;
     var mailpoet_current_time = <%= json_encode(current_time) %>;
     var mailpoet_schedule_time_of_day = <%= json_encode(schedule_time_of_day) %>;
+    var mailpoet_date_display_format = "<%= wp_date_format() %>";
+    var mailpoet_date_storage_format = "Y-m-d";
   </script>
 <% endblock %>