refactor: 3.0

example/demo/Basic.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date (default)</p>
+      <date-picker
+        v-model="value1"
+        format="YYYY-MM-DD"
+        type="date"
+        placeholder="Select date"
+      ></date-picker>
+    </section>
+    <section>
+      <p>month</p>
+      <date-picker v-model="value2" type="month" placeholder="Select month"></date-picker>
+    </section>
+    <section>
+      <p>year</p>
+      <date-picker v-model="value3" type="year" placeholder="Select year"></date-picker>
+    </section>
+    <section>
+      <p>datetime</p>
+      <date-picker v-model="value4" type="datetime" placeholder="Select datetime"></date-picker>
+    </section>
+    <section>
+      <p>time</p>
+      <date-picker v-model="value5" type="time" placeholder="Select time"></date-picker>
+    </section>
+    <section>
+      <p>week</p>
+      <date-picker v-model="value6" type="week" placeholder="Select week"></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      value3: null,
+      value4: null,
+      value5: null,
+      value6: null,
+    };
+  },
+};
+</script>

example/demo/ControlOpen.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      value-type="format"
+      type="time"
+      :open.sync="open"
+      placeholder="Select time"
+      @change="handleChange"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: null,
+      open: false,
+    };
+  },
+  methods: {
+    handleChange(value, type) {
+      if (type === 'second') {
+        this.open = false;
+      }
+    },
+  },
+};
+</script>

example/demo/ControlTimePanel.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="box">
+    <section>
+      <date-picker
+        v-model="value1"
+        type="datetime"
+        placeholder="Select datetime"
+        :show-time-panel="showTimePanel"
+        @close="handleOpenChange"
+      >
+        <template v-slot:footer>
+          <button class="mx-btn mx-btn-text" @click="toggleTimePanel">
+            {{ showTimePanel ? 'select date' : 'select time' }}
+          </button>
+        </template>
+      </date-picker>
+    </section>
+    <section>
+      <date-picker
+        v-model="value2"
+        type="datetime"
+        placeholder="Select datetime range"
+        range
+        :show-time-panel="showTimeRangePanel"
+        @close="handleRangeClose"
+      >
+        <template v-slot:footer>
+          <button class="mx-btn mx-btn-text" @click="toggleTimeRangePanel">
+            {{ showTimeRangePanel ? 'select date' : 'select time' }}
+          </button>
+        </template>
+      </date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value1: null,
+      value2: [],
+      showTimePanel: false,
+      showTimeRangePanel: false,
+    };
+  },
+  methods: {
+    toggleTimePanel() {
+      this.showTimePanel = !this.showTimePanel;
+    },
+    toggleTimeRangePanel() {
+      this.showTimeRangePanel = !this.showTimeRangePanel;
+    },
+    handleOpenChange() {
+      this.showTimePanel = false;
+    },
+    handleRangeClose() {
+      this.showTimeRangePanel = false;
+    },
+  },
+};
+</script>

example/demo/Disabled.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="box">
+    <section>
+      <p>disabled = "true"</p>
+      <date-picker v-model="value1" disabled></date-picker>
+    </section>
+    <section>
+      <p>editable = "false"</p>
+      <date-picker v-model="value2" :editable="false"></date-picker>
+    </section>
+    <section>
+      <p>clearable = "false"</p>
+      <date-picker v-model="value3" :clearable="false"></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date(),
+      value3: new Date(),
+    };
+  },
+};
+</script>

example/demo/DisabledDateTime.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date not before today</p>
+      <date-picker v-model="value1" :disabled-date="notBeforeToday"></date-picker>
+    </section>
+    <section>
+      <p>date not after today</p>
+      <date-picker v-model="value2" :disabled-date="notAfterToday"></date-picker>
+    </section>
+    <section>
+      <p>time not before 09:00</p>
+      <date-picker
+        v-model="value3"
+        value-type="format"
+        type="time"
+        placeholder="HH:mm:ss"
+        :default-value="new Date().setHours(9, 0, 0)"
+        :disabled-time="notBeforeNine"
+      ></date-picker>
+    </section>
+    <section>
+      <p>datetime not before 2019-10-09 12:00</p>
+      <date-picker
+        v-model="value4"
+        type="datetime"
+        :disabled-date="notBeforeDate"
+        :disabled-time="notBeforeTime"
+        value-type="format"
+      ></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
+export default {
+  data() {
+    return {
+      value1: new Date(),
+      value2: new Date(),
+      value3: '',
+      value4: '',
+      value5: '',
+    };
+  },
+  methods: {
+    notBeforeToday(date) {
+      return date < today;
+    },
+    notAfterToday(date) {
+      return date > today;
+    },
+    notBeforeNine(date) {
+      return date.getHours() < 9;
+    },
+    notBeforeDate(date) {
+      return date < new Date(2019, 9, 9);
+    },
+    notBeforeTime(date) {
+      return date < new Date(2019, 9, 9, 12);
+    },
+  },
+};
+</script>

example/demo/FixedTimeList.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      :time-picker-options="{
+        start: '08:30',
+        step: '00:30',
+        end: '18:30',
+      }"
+      format="hh:mm a"
+      type="time"
+      placeholder="hh:mm a"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FixedTimeList',
+  data() {
+    return {
+      value: null,
+    };
+  },
+};
+</script>

example/demo/HideSeconds.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      format="hh:mm a"
+      value-type="format"
+      type="time"
+      placeholder="hh:mm a"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: '',
+    };
+  },
+};
+</script>

example/demo/MinuteStep.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <date-picker
+      v-model="value"
+      :minute-step="30"
+      :hour-options="hours"
+      format="HH:mm"
+      value-type="format"
+      type="time"
+      placeholder="HH:mm"
+    ></date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ControlOpen',
+  data() {
+    return {
+      value: '',
+      hours: Array.from({ length: 10 }).map((_, i) => i + 8),
+    };
+  },
+};
+</script>

example/demo/Range.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="box">
+    <section>
+      <p>date range</p>
+      <date-picker v-model="value1" type="date" range placeholder="Select date range"></date-picker>
+    </section>
+    <section>
+      <p>datetime range</p>
+      <date-picker
+        v-model="value2"
+        type="datetime"
+        range
+        placeholder="Select datetime range"
+      ></date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Range',
+  data() {
+    return {
+      value1: [new Date(2019, 9, 8), new Date(2019, 9, 19)],
+      value2: [],
+    };
+  },
+};
+</script>

example/demo/Shortcut.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="box">
+    <section>
+      <p>shortcuts</p>
+      <date-picker v-model="value1" :shortcuts="shortcuts" placeholder="Select date"></date-picker>
+    </section>
+    <section>
+      <p>header slot</p>
+      <date-picker v-model="value2" placeholder="Select date">
+        <template v-slot:header="{ emit }">
+          <button class="mx-btn mx-btn-text" @click="emit(new Date())">Today</button>
+        </template>
+      </date-picker>
+    </section>
+    <section>
+      <p>footer slot</p>
+      <date-picker v-model="value3" range placeholder="Select date range">
+        <template v-slot:footer="{ emit }">
+          <div style="text-align: left">
+            <button class="mx-btn mx-btn-text" @click="selectNextThreeDay(emit)">
+              NextThreeDay
+            </button>
+          </div>
+        </template>
+      </date-picker>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Basic',
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      value3: null,
+      shortcuts: [
+        {
+          text: 'Today',
+          onClick() {
+            const date = new Date();
+            // return a Date
+            return date;
+          },
+        },
+        {
+          text: 'Yesterday',
+          onClick() {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            return date;
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    selectNextThreeDay(emit) {
+      const start = new Date();
+      const end = new Date();
+      end.setTime(end.getTime() + 3 * 24 * 3600 * 1000);
+      const date = [start, end];
+      emit(date);
+    },
+  },
+};
+</script>

example/demo/ValueType.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="box">
+    <section>
+      <p>format</p>
+      <date-picker v-model="value2" value-type="format" format="YYYY-MM-DD"></date-picker>
+      <p>
+        <code>v-model = {{ value2 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>date (Date Object)</p>
+      <date-picker v-model="value1" value-type="date"></date-picker>
+      <p>
+        <code>v-model = {{ value1 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>timestamp</p>
+      <date-picker v-model="value3" value-type="timestamp"></date-picker>
+      <p>
+        <code>v-model = {{ value3 }}</code>
+      </p>
+    </section>
+    <section>
+      <p>DD/MM/YYYY</p>
+      <date-picker v-model="value4" value-type="DD/MM/YYYY" format="YYYY-MM-DD"></date-picker>
+      <p>
+        <code>v-model = {{ value4 }}</code>
+      </p>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ValueType',
+  data() {
+    return {
+      value1: new Date(2019, 9, 9),
+      value2: '2019-10-09',
+      value3: new Date(2019, 9, 9).getTime(),
+      value4: '09/10/2019',
+    };
+  },
+};
+</script>