feat: fix date-time bugs in wizard step 1:

Author: abhinavk96

app/components/forms/wizard/basic-details-step.js

@@ -121,6 +121,11 @@ export default Component.extend(FormMixin, EventWizardMixin, {
   },
 
   getValidationRules() {
+    window.$.fn.form.settings.rules.checkDates = () => {
+      let startDatetime = moment(this.get('data.event.startsAt'));
+      let endDatetime = moment(this.get('data.event.endsAt'));
+      return (endDatetime.diff(startDatetime, 'minutes') > 0);
+    };
     let validationRules = {
       inline : true,
       delay  : false,
@@ -154,6 +159,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
             {
               type   : 'date',
               prompt : this.l10n.t('Please give a valid start date')
+            },
+            {
+              type   : 'checkDates',
+              prompt : this.l10n.t('Start date & time should be after End date and time')
             }
           ]
         },
@@ -167,6 +176,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
             {
               type   : 'date',
               prompt : this.l10n.t('Please give a valid end date')
+            },
+            {
+              type   : 'checkDates',
+              prompt : this.l10n.t('Start date & time should be after End date and time')
             }
           ]
         },
@@ -177,6 +190,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
             {
               type   : 'empty',
               prompt : this.l10n.t('Please give a start time')
+            },
+            {
+              type   : 'checkDates',
+              prompt : '..'
             }
           ]
         },
@@ -187,6 +204,10 @@ export default Component.extend(FormMixin, EventWizardMixin, {
             {
               type   : 'empty',
               prompt : this.l10n.t('Please give an end time')
+            },
+            {
+              type   : 'checkDates',
+              prompt : '..'
             }
           ]
         },
@@ -469,6 +490,9 @@ export default Component.extend(FormMixin, EventWizardMixin, {
         logoUrl    : license.logoUrl,
         licenceUrl : license.link
       });
+    },
+    onChange() {
+      this.onValid(() => {});
     }
   }
 });

app/templates/components/forms/wizard/basic-details-step.hbs

@@ -25,34 +25,35 @@
     <div class="five wide field">
       <label class="required" for="start_date">{{t 'Starts'}}</label>
       {{widgets/forms/date-picker type='text'
-                                  inputId='start_date'
+                                  name='start_date'
                                   placeholder='MM/DD/YYYY'
                                   rangePosition='start'
                                   value=data.event.startsAtDate
-                                  onChange=(action 'updateSalesEndDate')}}
+                                  onChange=(pipe-action (action 'updateSalesEndDate') (action 'onChange'))}}
     </div>
     <div class="three wide field">
       <label for="start_time">&nbsp;</label>
       {{widgets/forms/time-picker type='text'
-                                  inputId='start_time'
+                                  name='start_time'
                                   placeholder='HH:MM'
-                                  rangePosition='start'
+                                  onChange=(action 'onChange')
                                   value=data.event.startsAtTime}}
     </div>
     <div class="five wide field">
       <label class="required" for="end_date">{{t 'Ends'}}</label>
       {{widgets/forms/date-picker type='text'
-                                  inputId='end_date'
+                                  name='end_date'
                                   placeholder='MM/DD/YYYY'
                                   rangePosition='end'
+                                  onChange=(action 'onChange')
                                   value=data.event.endsAtDate}}
     </div>
     <div class="three wide field">
       <label for="end_time">&nbsp;</label>
       {{widgets/forms/time-picker type='text'
-                                  inputId='end_time'
+                                  name='end_time'
                                   placeholder='HH:MM'
-                                  rangePosition='end'
+                                  onChange=(action 'onChange')
                                   value=data.event.endsAtTime}}
     </div>
     <div class="five wide field">