From a65977eebd75a59ce2a0df4ec677035c2e302027 Mon Sep 17 00:00:00 2001
From: Maik Hinrichs <maik@mahiso.de>
Date: Fri, 9 Oct 2020 23:59:52 +0200
Subject: [PATCH 1/3] ISO format, without time, without clear button

---
 README.md                         |  4 +-
 package.json                      |  6 +--
 src/app.vue                       | 71 +++++++++++++++++++++++++++++++
 src/components/DatetimePicker.vue | 33 +++++++++++---
 4 files changed, 104 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8b609a0..248e363 100644
--- a/README.md
+++ b/README.md
@@ -49,11 +49,13 @@ Once installed, it can be used in a template as simply as:
 | dialogWidth      | Number      | 340           | The width of the dialog.                                                                                    |
 | dateFormat       | string      | yyyy-MM-dd    | Defines the format of a date.                                                                               |
 | timeFormat       | string      | HH:mm         | Defines the format of a time.                                                                               |
-| clearText        | string      | CLEAR         | Sets the text of the clear button.                                                                          |
+| clearText        | string      | CLEAR         | Sets the text of the clear button. An empty string prevents the button from showing.                        |
 | okText           | string      | OK            | Sets the text of the ok button.                                                                             |
 | textFieldProps   | Object      |               | Text fields properties. See [Vuetify Docs](https://vuetifyjs.com/en/components/text-fields 'Vuetify Docs')  |
 | datePickerProps  | Object      |               | Date pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/date-pickers 'Vuetify Docs') |
 | timePickerProps  | Object      |               | Time pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/time-pickers 'Vuetify Docs') |
+| useIso           | Boolean     | false         | Use ISO format in datetime (model) and input event                                                          |
+| withoutTime      | Boolean     | false         | Pick a date without a time.                                                                                 |
 
 ## Events
 
diff --git a/package.json b/package.json
index 29abb24..7f462bd 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
     "webpack-merge": "^4.2.1"
   },
   "dependencies": {
-    "date-fns": "^2.1.0",
-    "vue": "^2.6.10",
-    "vuetify": "^2.1.3"
+    "date-fns": "^2.16.1",
+    "vue": "^2.6.12",
+    "vuetify": "^2.3.13"
   }
 }
diff --git a/src/app.vue b/src/app.vue
index da8d998..8bc1ac5 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -30,6 +30,26 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
 
+          <v-expansion-panel>
+            <v-expansion-panel-header>Init with Date without Time</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="dateWithoutTime" without-time></v-datetime-picker>
+              </v-flex>
+              <div>Date value: <span v-text="dateWithoutTime"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
+          <v-expansion-panel>
+            <v-expansion-panel-header>Init with Date without Clear Button</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="datetime" clear-text=""></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
           <v-expansion-panel>
             <v-expansion-panel-header>Init with String</v-expansion-panel-header>
             <v-expansion-panel-content>
@@ -40,6 +60,16 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
 
+          <v-expansion-panel>
+            <v-expansion-panel-header>Init with String without Time</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="dateStringWithoutTime" without-time></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="dateStringWithoutTime"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
           <v-expansion-panel>
             <v-expansion-panel-header>Loading</v-expansion-panel-header>
             <v-expansion-panel-content>
@@ -145,6 +175,36 @@
               <div>Datetime value: <span v-text="datetime"></span></div>
             </v-expansion-panel-content>
           </v-expansion-panel>
+
+          <v-expansion-panel>
+            <v-expansion-panel-header>Custom Format: ISO</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="datetimeStringISO" use-iso ></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="datetimeStringISO"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
+          <v-expansion-panel>
+            <v-expansion-panel-header>Custom Property and Format: German date and time format, ISO</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker
+                  v-model="datetimeStringISO"
+                  use-iso
+                  label="Tag und Zeit"
+                  date-format="dd.MM.yyyy"
+                  time-format="HH:mm"
+                  clear-text="Löschen"
+                  :date-picker-props="datePropsDe"
+                  :time-picker-props="timePropsDe"
+                ></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="datetimeStringISO"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
         </v-expansion-panels>
       </v-row>
     </v-container>
@@ -159,7 +219,10 @@ export default {
     return {
       nullDatetime: null,
       datetime: new Date(),
+      dateWithoutTime: new Date(),
       datetimeString: '2019-01-01 12:00',
+      datetimeStringISO: '2019-01-01T11:00:00.000Z',
+      dateStringWithoutTime: '2019-01-01',
       formattedDatetime: '09/01/2019 12:00',
       textFieldProps: {
         appendIcon: 'event'
@@ -170,6 +233,14 @@ export default {
       timeProps: {
         useSeconds: true,
         ampmInTitle: true
+      },
+      datePropsDe: {
+        locale: 'de-de',
+        firstDayOfWeek: 1
+      },
+      timePropsDe: {
+        locale: 'de-de',
+        format: '24hr'
       }
     }
   }
diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 71feba8..ff83858 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 fixed-tabs v-model="activeTab" v-if="!withoutTime">
           <v-tab key="calendar">
             <slot name="dateIcon">
               <v-icon>event</v-icon>
@@ -44,11 +44,18 @@
             ></v-time-picker>
           </v-tab-item>
         </v-tabs>
+        <v-date-picker
+          v-if="withoutTime"
+          v-model="date"
+          v-bind="datePickerProps"
+          @input="showTimePicker"
+          full-width
+        ></v-date-picker>
       </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="grey lighten-1" text @click.native="clearHandler" v-if="clearText.length > 0">{{ clearText }}</v-btn>
           <v-btn color="green darken-1" text @click="okHandler">{{ okText }}</v-btn>
         </slot>
       </v-card-actions>
@@ -57,7 +64,7 @@
 </template>
 
 <script>
-import { format, parse } from 'date-fns'
+import { format, parse, parseISO } from 'date-fns'
 
 const DEFAULT_DATE = ''
 const DEFAULT_TIME = '00:00:00'
@@ -116,6 +123,14 @@ export default {
     },
     timePickerProps: {
       type: Object
+    },
+    useIso: {
+      type: Boolean,
+      default: false
+    },
+    withoutTime: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -131,7 +146,7 @@ export default {
   },
   computed: {
     dateTimeFormat() {
-      return this.dateFormat + ' ' + this.timeFormat
+      return this.withoutTime ? this.dateFormat : this.dateFormat + ' ' + this.timeFormat
     },
     defaultDateTimeFormat() {
       return DEFAULT_DATE_FORMAT + ' ' + DEFAULT_TIME_FORMAT
@@ -165,7 +180,11 @@ export default {
         initDateTime = this.datetime
       } else if (typeof this.datetime === 'string' || this.datetime instanceof String) {
         // see https://stackoverflow.com/a/9436948
-        initDateTime = parse(this.datetime, this.dateTimeFormat, new Date())
+        initDateTime = this.useIso ? parseISO(this.datetime) : parse(this.datetime, this.dateTimeFormat, new Date())
+      }
+
+      if (this.withoutTime) {
+        initDateTime.setHours(0, 0, 0, 0)
       }
 
       this.date = format(initDateTime, DEFAULT_DATE_FORMAT)
@@ -173,7 +192,9 @@ export default {
     },
     okHandler() {
       this.resetPicker()
-      this.$emit('input', this.selectedDatetime)
+      return this.useIso
+        ? this.$emit('input', this.selectedDatetime.toISOString())
+        : this.$emit('input', this.selectedDatetime)
     },
     clearHandler() {
       this.resetPicker()

From fbc17ad57951c0343c52eb28ee78452cbcd9e5d6 Mon Sep 17 00:00:00 2001
From: Maik Hinrichs <maik@mahiso.de>
Date: Sat, 10 Oct 2020 17:34:00 +0200
Subject: [PATCH 2/3] adds persistence and cancel button

---
 README.md                         |  2 ++
 package.json                      |  1 +
 src/app.vue                       | 22 ++++++++++++++++++++++
 src/components/DatetimePicker.vue | 26 +++++++++++++++++++++++++-
 4 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 248e363..b2567d7 100644
--- a/README.md
+++ b/README.md
@@ -45,11 +45,13 @@ Once installed, it can be used in a template as simply as:
 | datetime (model) | Date/String |               | Time picker model.                                                                                          |
 | disabled         | Boolean     | false         | Input is disabled.                                                                                          |
 | loading          | Boolean     | false         | Input is loading.                                                                                           |
+| persistent       | Boolean     | false         | Clicking outside of the picker will not close it.                                                           |
 | label            | string      |               | Sets input label.                                                                                           |
 | dialogWidth      | Number      | 340           | The width of the dialog.                                                                                    |
 | dateFormat       | string      | yyyy-MM-dd    | Defines the format of a date.                                                                               |
 | timeFormat       | string      | HH:mm         | Defines the format of a time.                                                                               |
 | clearText        | string      | CLEAR         | Sets the text of the clear button. An empty string prevents the button from showing.                        |
+| cancelText       | string      |               | Sets the text of the cancel button. An empty string prevents the button from showing. Click on it resets datetime to value before opening the picker. |  
 | okText           | string      | OK            | Sets the text of the ok button.                                                                             |
 | textFieldProps   | Object      |               | Text fields properties. See [Vuetify Docs](https://vuetifyjs.com/en/components/text-fields 'Vuetify Docs')  |
 | datePickerProps  | Object      |               | Date pickers properties.See [Vuetify Docs](https://vuetifyjs.com/en/components/date-pickers 'Vuetify Docs') |
diff --git a/package.json b/package.json
index 7f462bd..330d5f3 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "DatetimePicker component for Vuetify.js.",
   "main": "src/index.js",
   "scripts": {
+    "start": "npm run dev",
     "dev": "webpack-dev-server --config webpack/webpack.dev.config.js",
     "build": "webpack --config webpack/webpack.build.config.js --progress --profile --colors",
     "deploy": "npm run build && npm publish --registry https://registry.npmjs.org/",
diff --git a/src/app.vue b/src/app.vue
index 8bc1ac5..24c0eca 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -50,6 +50,26 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
 
+          <v-expansion-panel>
+            <v-expansion-panel-header>Init with Date without Cancel Button</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="datetime" cancelText=""></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
+          <v-expansion-panel>
+            <v-expansion-panel-header>Init with Date (persistent)</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-datetime-picker v-model="datetime" persistent></v-datetime-picker>
+              </v-flex>
+              <div>Datetime value: <span v-text="datetime"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
           <v-expansion-panel>
             <v-expansion-panel-header>Init with String</v-expansion-panel-header>
             <v-expansion-panel-content>
@@ -196,7 +216,9 @@
                   label="Tag und Zeit"
                   date-format="dd.MM.yyyy"
                   time-format="HH:mm"
+                  ok-text="Speichern"
                   clear-text="Löschen"
+                  cancel-text="Abbrechen"
                   :date-picker-props="datePropsDe"
                   :time-picker-props="timePropsDe"
                 ></v-datetime-picker>
diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index ff83858..7a5e327 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="display" :width="dialogWidth">
+  <v-dialog v-model="display" :width="dialogWidth" :persistent="persistent" @click:outside="outsiteHandler" @keydown.esc="outsiteHandler">
     <template v-slot:activator="{ on }">
       <v-text-field
         v-bind="textFieldProps"
@@ -57,6 +57,7 @@
         <slot name="actions" :parent="this">
           <v-btn color="grey lighten-1" text @click.native="clearHandler" v-if="clearText.length > 0">{{ clearText }}</v-btn>
           <v-btn color="green darken-1" text @click="okHandler">{{ okText }}</v-btn>
+          <v-btn color="grey lighten-1" text @click.native="cancelHandler" v-if="cancelText.length > 0">{{ cancelText }}</v-btn>
         </slot>
       </v-card-actions>
     </v-card>
@@ -73,6 +74,7 @@ const DEFAULT_TIME_FORMAT = 'HH:mm:ss'
 const DEFAULT_DIALOG_WIDTH = 340
 const DEFAULT_CLEAR_TEXT = 'CLEAR'
 const DEFAULT_OK_TEXT = 'OK'
+const DEFAULT_CANCEL_TEXT = 'CANCEL'
 
 export default {
   name: 'v-datetime-picker',
@@ -91,6 +93,10 @@ export default {
     loading: {
       type: Boolean
     },
+    persistent: {
+      type: Boolean,
+      default: false
+    },
     label: {
       type: String,
       default: ''
@@ -115,6 +121,10 @@ export default {
       type: String,
       default: DEFAULT_OK_TEXT
     },
+    cancelText: {
+      type: String,
+      default: DEFAULT_CANCEL_TEXT
+    },
     textFieldProps: {
       type: Object
     },
@@ -202,6 +212,20 @@ export default {
       this.time = DEFAULT_TIME
       this.$emit('input', null)
     },
+    cancelHandler() {
+      this.resetPicker()
+      if (this.datetime) {
+        this.init()
+      } else {
+        this.date = DEFAULT_DATE
+        this.time = DEFAULT_TIME
+      }
+    },
+    outsiteHandler() {
+      if (!this.persistent) {
+        this.cancelHandler()
+      }
+    },
     resetPicker() {
       this.display = false
       this.activeTab = 0

From 11c0b1e5ccd15252e8644f912c510bb7087935b5 Mon Sep 17 00:00:00 2001
From: Maik Hinrichs <maik@mahiso.de>
Date: Sun, 11 Oct 2020 13:33:52 +0200
Subject: [PATCH 3/3] Adds example of custom validation, sets default date and
 time in case of null value

---
 src/app.vue                       | 17 +++++++++++++++++
 src/components/DatetimePicker.vue |  9 +++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/app.vue b/src/app.vue
index 24c0eca..f1e5c7c 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -164,6 +164,19 @@
             </v-expansion-panel-content>
           </v-expansion-panel>
 
+          <v-expansion-panel>
+            <v-expansion-panel-header>Custom Validation (Input Required)</v-expansion-panel-header>
+            <v-expansion-panel-content>
+              <v-flex xs4>
+                <v-form v-model="validForm">
+                  <v-datetime-picker v-model="nullDatetime" :textFieldProps="textFieldPropsRules"></v-datetime-picker>
+                </v-form>
+              </v-flex>
+              <div>Datetime value: <span v-text="nullDatetime"></span></div>
+              <div>Valid Form: <span v-text="validForm"></span></div>
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+
           <v-expansion-panel>
             <v-expansion-panel-header>Use Seconds</v-expansion-panel-header>
             <v-expansion-panel-content>
@@ -239,6 +252,7 @@ import '@fortawesome/fontawesome-free/css/all.css'
 export default {
   data() {
     return {
+      validForm: false,
       nullDatetime: null,
       datetime: new Date(),
       dateWithoutTime: new Date(),
@@ -249,6 +263,9 @@ export default {
       textFieldProps: {
         appendIcon: 'event'
       },
+      textFieldPropsRules: {
+        rules: [v => !!v || 'Date is required']
+      },
       dateProps: {
         headerColor: 'red'
       },
diff --git a/src/components/DatetimePicker.vue b/src/components/DatetimePicker.vue
index 7a5e327..fca9e89 100644
--- a/src/components/DatetimePicker.vue
+++ b/src/components/DatetimePicker.vue
@@ -182,6 +182,8 @@ export default {
   methods: {
     init() {
       if (!this.datetime) {
+        this.date = DEFAULT_DATE
+        this.time = DEFAULT_TIME
         return
       }
 
@@ -214,12 +216,7 @@ export default {
     },
     cancelHandler() {
       this.resetPicker()
-      if (this.datetime) {
-        this.init()
-      } else {
-        this.date = DEFAULT_DATE
-        this.time = DEFAULT_TIME
-      }
+      this.init()
     },
     outsiteHandler() {
       if (!this.persistent) {