fix: resolve whack-a-mole behavior of time/date pickers

Author: abhinavk96

app/components/widgets/forms/time-picker.js

@@ -38,6 +38,13 @@ export default Component.extend({
     }
 
     this.$().calendar(merge(defaultOptions, this.options));
+  },
+  actions: {
+    onChange() {
+      if (this.onChange) {
+        this.sendAction('onChange', this.value);
+      }
+    }
   }
 
 });

app/models/access-code.js

@@ -28,8 +28,8 @@ export default ModelBase.extend({
    * Computed properties
    */
 
-  validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date'),
-  validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time'),
+  validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date', 'validTill'),
+  validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time', 'validTill'),
   validTillDate : computedDateTimeSplit.bind(this)('validTill', 'date'),
   validTillTime : computedDateTimeSplit.bind(this)('validTill', 'time')
 });

app/models/discount-code.js

@@ -42,8 +42,8 @@ export default ModelBase.extend({
   }), // The events that this discount code has been applied to [Form (1)]
   marketer: belongsTo('user'),
 
-  validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date'),
-  validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time'),
+  validFromDate : computedDateTimeSplit.bind(this)('validFrom', 'date', 'validTill'),
+  validFromTime : computedDateTimeSplit.bind(this)('validFrom', 'time', 'validTill'),
   validTillDate : computedDateTimeSplit.bind(this)('validTill', 'date'),
   validTillTime : computedDateTimeSplit.bind(this)('validTill', 'time')
 });

app/models/event.js

@@ -147,8 +147,8 @@ export default ModelBase.extend(CustomPrimaryKeyMixin, {
    * Computed properties
    */
 
-  startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
-  startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
+  startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
+  startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
   endsAtDate   : computedDateTimeSplit.bind(this)('endsAt', 'date'),
   endsAtTime   : computedDateTimeSplit.bind(this)('endsAt', 'time'),
 

app/models/session.js

@@ -48,8 +48,8 @@ export default ModelBase.extend({
     }
   }),
 
-  startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
-  startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
+  startAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
+  startAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
   endsAtDate  : computedDateTimeSplit.bind(this)('endsAt', 'date'),
   endsAtTime  : computedDateTimeSplit.bind(this)('endsAt', 'time'),
 

app/models/speakers-call.js

@@ -17,8 +17,8 @@ export default ModelBase.extend({
 
   event: belongsTo('event'),
 
-  startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date'),
-  startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time'),
+  startsAtDate : computedDateTimeSplit.bind(this)('startsAt', 'date', 'endsAt'),
+  startsAtTime : computedDateTimeSplit.bind(this)('startsAt', 'time', 'endsAt'),
   endsAtDate   : computedDateTimeSplit.bind(this)('endsAt', 'date'),
   endsAtTime   : computedDateTimeSplit.bind(this)('endsAt', 'time'),
 

app/models/ticket.js

@@ -39,8 +39,8 @@ export default ModelBase.extend({
   /**
    * Computed properties
    */
-  salesStartAtDate : computedDateTimeSplit.bind(this)('salesStartsAt', 'date'),
-  salesStartAtTime : computedDateTimeSplit.bind(this)('salesStartsAt', 'time'),
+  salesStartAtDate : computedDateTimeSplit.bind(this)('salesStartsAt', 'date', 'salesEndsAt'),
+  salesStartAtTime : computedDateTimeSplit.bind(this)('salesStartsAt', 'time', 'salesEndsAt'),
   salesEndsAtDate  : computedDateTimeSplit.bind(this)('salesEndsAt', 'date'),
   salesEndsAtTime  : computedDateTimeSplit.bind(this)('salesEndsAt', 'time'),
 

app/utils/computed-helpers.js

@@ -38,22 +38,27 @@ export const computedSegmentedLink = function(property) {
 };
 
 /**
- * Get set splitted date time from/to a Full datetime object
+ * Get, set split date time from/to a Full datetime object
  * @param property The full date time object
  * @param segmentFormat The part of the date to be returned. (time/date or a custom format)
+ * @param endProperty Optional end field name for date or time.
  * @returns {*}
  */
-export const computedDateTimeSplit = function(property, segmentFormat) {
+export const computedDateTimeSplit = function(property, segmentFormat, endProperty) {
+  console.log(property);
   return computed(property, {
     get() {
-      // if (property === 'endsAt' && segmentFormat === 'date') {
-      //   return moment(this.get(property)).add(1, 'days').format(getFormat(segmentFormat));
-      // } The following line was adding one extra day to the endsAt Attribute . Commenting it to fix the issue .
       return moment(this.get(property)).format(getFormat(segmentFormat));
     },
     set(key, value) {
+      console.log(key, value, this);
       const newDate = moment(value, getFormat(segmentFormat));
-      let oldDate = moment(this.get(property));
+      let oldDate = newDate;
+      if (this.get(property)) {
+        oldDate = moment(this.get(property), segmentFormat === 'date' ? FORM_DATE_FORMAT : FORM_TIME_FORMAT);
+      } else {
+        oldDate = newDate;
+      }
       if (segmentFormat === 'time') {
         oldDate.hour(newDate.hour());
         oldDate.minute(newDate.minute());
@@ -65,7 +70,11 @@ export const computedDateTimeSplit = function(property, segmentFormat) {
         oldDate = newDate;
       }
       this.set(property, oldDate);
-      this.set('endsAt', oldDate);
+      if (endProperty) {
+        if (segmentFormat === 'date' && this.get(endProperty) < oldDate) {
+          this.set(endProperty, oldDate);
+        }
+      }
       return value;
     }
   });

app/utils/dictionary/date-time.js

@@ -2,7 +2,7 @@ import moment from 'moment';
 
 export const timezones = moment.tz.names();
 
-export const FORM_DATE_FORMAT = 'MM/DD/YYYY';
+export const FORM_DATE_FORMAT = 'MM-DD-YYYY';
 export const FORM_TIME_FORMAT = 'HH:mm';
 
 export const FORM_DATE_TIME_FORMAT = `${FORM_DATE_FORMAT} ${FORM_TIME_FORMAT}`;