From 0ad3d3f4e4365440827555309a4472c5e9f40039 Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Mon, 16 Dec 2019 17:01:30 +0400
Subject: [PATCH 1/7] clear text field when clear model

---
 src/components/DatetimePicker.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 71feba8..83f7008 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -157,6 +157,8 @@ export default {
   methods: {
     init() {
       if (!this.datetime) {
+        this.date = DEFAULT_DATE;
+        this.time = DEFAULT_TIME;
         return
       }
 

From b3aba9ff440d7c84864ca34d82545f4e938bc565 Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Thu, 13 Feb 2020 15:38:34 +0400
Subject: [PATCH 2/7] use clearHandler

---
 src/components/DatetimePicker.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 83f7008..1d65ff7 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -157,9 +157,7 @@ export default {
   methods: {
     init() {
       if (!this.datetime) {
-        this.date = DEFAULT_DATE;
-        this.time = DEFAULT_TIME;
-        return
+        return this.clearHandler();
       }
 
       let initDateTime

From 33ff1300fa66d292fb662d6f6e9f21c86c10d5fb Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Fri, 21 Feb 2020 12:37:42 +0400
Subject: [PATCH 3/7] add theming props

---
 src/app.vue                       |   4 +-
 src/components/DatetimePicker.vue | 127 +++++++++++++++++-------------
 2 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/app.vue b/src/app.vue
index da8d998..1335403 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app dark>
+  <v-app>
     <v-container>
       <div class="mb-5">
         Get Source Code:
@@ -14,7 +14,7 @@
             <v-expansion-panel-header>Null Value</v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-flex xs4>
-                <v-datetime-picker v-model="nullDatetime"></v-datetime-picker>
+                <v-datetime-picker color="blue-grey lighten-1" v-model="nullDatetime"></v-datetime-picker>
               </v-flex>
               <div>Datetime value: <span v-text="nullDatetime"></span></div>
             </v-expansion-panel-content>
diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 1d65ff7..1156565 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -1,59 +1,64 @@
 <template>
-  <v-dialog v-model="display" :width="dialogWidth">
-    <template v-slot:activator="{ on }">
-      <v-text-field
-        v-bind="textFieldProps"
-        :disabled="disabled"
-        :loading="loading"
-        :label="label"
-        :value="formattedDatetime"
-        v-on="on"
-        readonly
-      >
-        <template v-slot:progress>
-          <slot name="progress">
-            <v-progress-linear color="primary" indeterminate absolute height="2"></v-progress-linear>
-          </slot>
+    <v-dialog v-model="display" :width="dialogWidth">
+        <template v-slot:activator="{ on }">
+            <v-text-field
+                    v-bind="textFieldProps"
+                    :disabled="disabled"
+                    :loading="loading"
+                    :label="label"
+                    :value="formattedDatetime"
+                    v-on="on"
+                    readonly
+            >
+                <template v-slot:progress>
+                    <slot name="progress">
+                        <v-progress-linear color="primary" indeterminate absolute height="2"></v-progress-linear>
+                    </slot>
+                </template>
+            </v-text-field>
         </template>
-      </v-text-field>
-    </template>
 
-    <v-card>
-      <v-card-text class="px-0 py-0">
-        <v-tabs fixed-tabs v-model="activeTab">
-          <v-tab key="calendar">
-            <slot name="dateIcon">
-              <v-icon>event</v-icon>
-            </slot>
-          </v-tab>
-          <v-tab key="timer" :disabled="dateSelected">
-            <slot name="timeIcon">
-              <v-icon>access_time</v-icon>
-            </slot>
-          </v-tab>
-          <v-tab-item key="calendar">
-            <v-date-picker v-model="date" v-bind="datePickerProps" @input="showTimePicker" full-width></v-date-picker>
-          </v-tab-item>
-          <v-tab-item key="timer">
-            <v-time-picker
-              ref="timer"
-              class="v-time-picker-custom"
-              v-model="time"
-              v-bind="timePickerProps"
-              full-width
-            ></v-time-picker>
-          </v-tab-item>
-        </v-tabs>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <slot name="actions" :parent="this">
-          <v-btn color="grey lighten-1" text @click.native="clearHandler">{{ clearText }}</v-btn>
-          <v-btn color="green darken-1" text @click="okHandler">{{ okText }}</v-btn>
-        </slot>
-      </v-card-actions>
-    </v-card>
-  </v-dialog>
+        <v-card>
+            <v-card-text class="px-0 py-0">
+                <v-tabs fixed-tabs v-model="activeTab">
+                    <v-tab key="calendar">
+                        <slot name="dateIcon">
+                            <v-icon>event</v-icon>
+                        </slot>
+                    </v-tab>
+                    <v-tab key="timer" :disabled="dateSelected">
+                        <slot name="timeIcon">
+                            <v-icon>access_time</v-icon>
+                        </slot>
+                    </v-tab>
+                    <v-tab-item key="calendar">
+                        <v-date-picker v-model="date"
+                                       v-bind="datePickerProps"
+                                       :color="color"
+                                       @input="showTimePicker"
+                                       full-width></v-date-picker>
+                    </v-tab-item>
+                    <v-tab-item key="timer">
+                        <v-time-picker
+                                ref="timer"
+                                class="v-time-picker-custom"
+                                v-model="time"
+                                v-bind="timePickerProps"
+                                :color="color"
+                                full-width
+                        ></v-time-picker>
+                    </v-tab-item>
+                </v-tabs>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <slot name="actions" :parent="this">
+                    <v-btn :color="clearColor" text @click.native="clearHandler">{{ clearText }}</v-btn>
+                    <v-btn :color="okColor" text @click="okHandler">{{ okText }}</v-btn>
+                </slot>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
 </template>
 
 <script>
@@ -116,6 +121,17 @@ export default {
     },
     timePickerProps: {
       type: Object
+    },
+    color: {
+      type: String
+    },
+    okColor: {
+      type: String,
+      default: 'green darken-1'
+    },
+    clearColor: {
+      type: String,
+      default: 'grey lighten-1'
     }
   },
   data() {
@@ -154,10 +170,13 @@ export default {
       return !this.date
     }
   },
+
   methods: {
     init() {
       if (!this.datetime) {
-        return this.clearHandler();
+        this.date = DEFAULT_DATE
+        this.time = DEFAULT_TIME
+        return
       }
 
       let initDateTime

From 1a323db63cd5ce6cb54e9707985c73488125a9b5 Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Fri, 21 Feb 2020 12:51:52 +0400
Subject: [PATCH 4/7] add tabs customization props

---
 src/components/DatetimePicker.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 1156565..bf7e0dd 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -20,7 +20,7 @@
 
         <v-card>
             <v-card-text class="px-0 py-0">
-                <v-tabs fixed-tabs v-model="activeTab">
+                <v-tabs :slider-color="tabsSliderColor" :background-color="tabsBackgroundColor" fixed-tabs v-model="activeTab">
                     <v-tab key="calendar">
                         <slot name="dateIcon">
                             <v-icon>event</v-icon>
@@ -132,6 +132,14 @@ export default {
     clearColor: {
       type: String,
       default: 'grey lighten-1'
+    },
+    tabsBackgroundColor: {
+      type: String,
+      default: ''
+    },
+    tabsSliderColor: {
+      type: String,
+      default: ''
     }
   },
   data() {

From 70c94bcddb48bf22d9fbd515fcd93aaf06b11558 Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Tue, 10 Mar 2020 11:42:18 +0400
Subject: [PATCH 5/7] add validation utils

---
 src/components/DatetimePicker.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index bf7e0dd..db376e1 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -7,6 +7,8 @@
                     :loading="loading"
                     :label="label"
                     :value="formattedDatetime"
+                    :error="error"
+                    :error-messages="errorMessages"
                     v-on="on"
                     readonly
             >
@@ -20,7 +22,8 @@
 
         <v-card>
             <v-card-text class="px-0 py-0">
-                <v-tabs :slider-color="tabsSliderColor" :background-color="tabsBackgroundColor" fixed-tabs v-model="activeTab">
+                <v-tabs :slider-color="tabsSliderColor" :background-color="tabsBackgroundColor" fixed-tabs
+                        v-model="activeTab">
                     <v-tab key="calendar">
                         <slot name="dateIcon">
                             <v-icon>event</v-icon>
@@ -140,6 +143,14 @@ export default {
     tabsSliderColor: {
       type: String,
       default: ''
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    errorMessages: {
+      type: String,
+      default: ''
     }
   },
   data() {

From 9addc431941039e1317aa897a7ac1880c734663a Mon Sep 17 00:00:00 2001
From: Petr Chalov <tchalov.pyotr@yandex.ru>
Date: Fri, 13 Mar 2020 11:39:36 +0400
Subject: [PATCH 6/7] add min/max props

---
 src/components/DatetimePicker.vue | 43 ++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index db376e1..8674f46 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -38,6 +38,8 @@
                         <v-date-picker v-model="date"
                                        v-bind="datePickerProps"
                                        :color="color"
+                                       :min="minDate"
+                                       :max="maxDate"
                                        @input="showTimePicker"
                                        full-width></v-date-picker>
                     </v-tab-item>
@@ -47,6 +49,8 @@
                                 class="v-time-picker-custom"
                                 v-model="time"
                                 v-bind="timePickerProps"
+                                :min="minTime"
+                                :max="maxTime"
                                 :color="color"
                                 full-width
                         ></v-time-picker>
@@ -65,7 +69,7 @@
 </template>
 
 <script>
-import { format, parse } from 'date-fns'
+import { format, parse, isSameDay } from 'date-fns'
 
 const DEFAULT_DATE = ''
 const DEFAULT_TIME = '00:00:00'
@@ -151,6 +155,14 @@ export default {
     errorMessages: {
       type: String,
       default: ''
+    },
+    min: {
+      type: Date,
+      default: null
+    },
+    max: {
+      type: Date,
+      default: null
     }
   },
   data() {
@@ -185,6 +197,35 @@ export default {
         return null
       }
     },
+
+    minDate() {
+      return this.min ? format(this.min, DEFAULT_DATE_FORMAT) : null
+    },
+
+    minTime() {
+      const { selectedDatetime, min } = this
+
+      if (selectedDatetime === null || min === null || !isSameDay(selectedDatetime, min)) {
+        return null
+      }
+
+      return format(min, DEFAULT_TIME_FORMAT)
+    },
+
+    maxDate() {
+      return this.max ? format(this.max, DEFAULT_DATE_FORMAT) : null
+    },
+
+    maxTime() {
+      const { selectedDatetime, max } = this
+
+      if (selectedDatetime === null || max === null || !isSameDay(selectedDatetime, max)) {
+        return null
+      }
+
+      return format(max, DEFAULT_TIME_FORMAT)
+    },
+
     dateSelected() {
       return !this.date
     }

From ec7330111c287b39a5f9db91c87dc90b8971855a Mon Sep 17 00:00:00 2001
From: Shaine Gordon <sgordon@realmdigital.co.za>
Date: Wed, 26 Aug 2020 13:15:45 +0200
Subject: [PATCH 7/7] allow error-messages prop to be String or Array

---
 src/components/DatetimePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 8674f46..c455182 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -153,7 +153,7 @@ export default {
       default: false
     },
     errorMessages: {
-      type: String,
+      type: [Array, String],
       default: ''
     },
     min: {