Respect min date on default selection

mariomka · Oct 9, 2018 · f8e40ea · f8e40ea
1 parent 56bac54
commit f8e40ea
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -82,6 +82,28 @@ <h2>Macro tokens</h2>
       </div>
   </div>
 
+  <h2>Default min date</h2>
+
+  <div class="example">
+    <div class="example-inputs">
+      <datetime type="datetime" v-model="datetimeMin" placeholder="Select date" :min-datetime="minDatetimePlus" :max-datetime="maxDatetimePlus"></datetime>
+
+      <div class="values">
+        <p>
+          <strong>Value:</strong> {{ datetimeMin }}
+        </p>
+      </div>
+    </div>
+    <div class="example-code">
+      <pre><code>&#x3C;datetime
+  type=&#x22;datetime&#x22;
+  v-model=&#x22;datetimeMin&#x22;
+  :min-datetime=&#x22;minDatetimePlus&#x22;
+  :max-datetime=&#x22;maxDatetimePlus&#x22;
+  &#x3E;&#x3C;/datetime&#x3E;</code></pre>
+    </div>
+  </div>
+
   <h2>Complete demo</h2>
 
   <div class="example">

diff --git a/demo/src/app.js b/demo/src/app.js
@@ -15,10 +15,13 @@ new Vue({
       datetime: '2018-05-12T17:19:06.151Z',
       datetime12: '2018-05-12T17:19:06.151Z',
       datetime13: '2018-05-12T17:19:06.151Z',
+      datetimeMin: '',
       datetimeEmpty: '',
       minDatetime: LuxonDateTime.local().minus({ days: 3 }).toISO(),
       maxDatetime: LuxonDateTime.local().plus({ days: 3 }).toISO(),
-      datetimeTheming: LuxonDateTime.local().toISO()
+      datetimeTheming: LuxonDateTime.local().toISO(),
+      minDatetimePlus: LuxonDateTime.local().plus({ days: 3 }).toISO(),
+      maxDatetimePlus: LuxonDateTime.local().plus({ days: 7 }).toISO()
     }
   }
 })

diff --git a/src/Datetime.vue b/src/Datetime.vue
@@ -179,7 +179,15 @@ export default {
       this.close()
     },
     newPopupDatetime () {
-      const datetime = DateTime.utc().setZone(this.zone).set({ seconds: 0, milliseconds: 0 })
+      let datetime = DateTime.utc().setZone(this.zone).set({ seconds: 0, milliseconds: 0 })
+
+      if (this.popupMinDatetime && datetime < this.popupMinDatetime) {
+        datetime = this.popupMinDatetime.set({ seconds: 0, milliseconds: 0 })
+      }
+
+      if (this.popupMaxDatetime && datetime > this.popupMaxDatetime) {
+        datetime = this.popupMaxDatetime.set({ seconds: 0, milliseconds: 0 })
+      }
 
       if (this.minuteStep === 1) {
         return datetime