Fix new date input timezone issue (#88)

* fix timezone issue on new date input

* date range validation error

app/Http/Requests/AnswerFormRequest.php

@@ -121,6 +121,24 @@ class AnswerFormRequest extends FormRequest
         return $fields;
     }
 
+    /**
+     * Get the validation messages that apply to the request.
+     *
+     * @return array
+     */
+    public function messages()
+    {
+        $messages = [];
+        foreach ($this->form->properties as $property) {
+            if($property['type'] == 'date' && isset($property['date_range']) && $property['date_range']){
+                $messages[$property['id'].'.0.required_with'] = "From date is required";
+                $messages[$property['id'].'.1.required_with'] = "To date is required";
+                $messages[$property['id'].'.0.before_or_equal'] = "From date must be before or equal To date";
+            }
+        }
+        return $messages;
+    }
+
     /**
      * Return validation rules for a given form property
      * @param $property
@@ -160,6 +178,8 @@ class AnswerFormRequest extends FormRequest
             case 'date':
                 if (isset($property['date_range']) && $property['date_range']) {
                     $this->requestRules[$property['id'].'.*'] = $this->getRulesForDate($property);
+                    $this->requestRules[$property['id'].'.0'] = ['required_with:'.$property['id'].'.1', 'before_or_equal:'.$property['id'].'.1'];
+                    $this->requestRules[$property['id'].'.1'] = ['required_with:'.$property['id'].'.0'];
                     return ['array', 'min:2'];
                 }
                 return $this->getRulesForDate($property);

resources/js/components/forms/DateInput.vue

@@ -87,22 +87,24 @@ export default {
     },
     fromDate: {
       handler(val) {
-        this.toDate = null
+        if(this.dateRange){
-        if(val){
+          if(!Array.isArray(this.compVal)){
-          this.compVal = (this.dateRange) ? [val] : val
+            this.compVal = [];
+          }
+          this.compVal[0] = this.dateToUTC(val)
         }else{
-          this.compVal = null
+          this.compVal = this.dateToUTC(val)
         }
       },
       immediate: false
     },
     toDate: {
       handler(val) {
-        if(this.dateRange && val){
+        if(this.dateRange){
           if(!Array.isArray(this.compVal)){
             this.compVal = [null];
           }
-          this.compVal[1] = val ?? null
+          this.compVal[1] = this.dateToUTC(val)
         }else{
           this.compVal = null
         }
@@ -117,7 +119,7 @@ export default {
         this.fromDate = this.compVal[0] ?? null
         this.toDate = this.compVal[1] ?? null
       }else{
-        this.fromDate = this.compVal
+        this.fromDate = this.dateToLocal(this.compVal)
       }
     }
 
@@ -140,6 +142,29 @@ export default {
         const dateInput = this.$refs.datepicker.$el.getElementsByTagName('input')[0]
         dateInput.style.setProperty('--tw-ring-color', this.color)
       }
+    },
+    dateToUTC(val){
+      if(!val){
+        return null
+      }
+      if(!this.useTime){
+        return val
+      }
+      return new Date(val).toISOString()
+    },
+    dateToLocal(val){
+      if(!val){
+        return null
+      }
+      const dateObj = new Date(val)
+      let dateStr = dateObj.getFullYear() + '-' +
+                  String(dateObj.getMonth() + 1).padStart(2, '0') + '-' +
+                  String(dateObj.getDate()).padStart(2, '0')
+      if(this.useTime){
+        dateStr += 'T' + String(dateObj.getHours()).padStart(2, '0') + ':' +
+        String(dateObj.getMinutes()).padStart(2, '0');
+      }
+      return dateStr
     }
   }
 }