修改日期、日期时间控件。

examples/App.vue

@@ -12,9 +12,6 @@
           <li>
             <router-link :to="{ path: '/desktop/date-time-example'}">日期时间控件</router-link>
           </li>
-          <li>
-            <router-link :to="{ path: '/desktop/date-time-v2-example'}">日期时间V2控件</router-link>
-          </li>
           <li>
             <router-link :to="{ path: '/desktop/image-preview-example'}">图片预览</router-link>
           </li>

examples/date/src/DateExample.vue

@@ -3,17 +3,30 @@
     <h1>日期控件</h1>
 
     <h2>基本表单</h2>
+
     <div>
       <div class="form-group">
         <label for="datetime">日期</label>
-        <DateTime
-          :date-value="dateValueV2"
-          @on-value-change="dateValueV2 = $event"
+        <Date
+          v-model="dateValue0"
+          @update:model-value="changedCount0++"
         />
       </div>
     </div>
 
-    {{ dateValueV2 }}
+    {{ dateValue0 }} 更改次数 {{ changedCount0 }}
+
+    <div>
+      <div class="form-group">
+        <label for="datetime">日期(日期时间强制转换)</label>
+        <Date
+          v-model="dateValue1"
+          @update:model-value="changedCount1++"
+        />
+      </div>
+    </div>
+
+    {{ dateValue1 }} 更改次数 {{ changedCount1 }}
 
     <h2>内联表单</h2>
     <div class="form-inline">
@@ -22,9 +35,8 @@
           class="control-label"
           for="inputGroupSuccess3"
         >日期</label>
-        <DateTime
-          :date-value="dateValueV2"
-          @on-value-change="dateValueV2 = $event"
+        <Date
+          v-model="dateValueV2"
         />
       </div>
     </div>
@@ -39,8 +51,8 @@
           class="control-label"
           for="inputGroupSuccess3"
         >日期</label>
-        <DateTime
-          :date-value="dateValueV3"
+        <Date
+          v-model="dateValueV3"
           :readonly="true"
         />
       </div>
@@ -53,20 +65,28 @@
 <script>
 
 
-import DateTime from '@/date/index.js';
+import Date from '@/date/index.js';
 
 export default {
   name: 'DateExample',
 
   components: {
-    DateTime,
+    Date,
   },
 
   data: function () {
     return {
-      dateValue: '2021-10-09',
-      dateValueV2: '2021-10-09 14:02:00',
-      dateValueV3: '2022-10-09 14:02:00',
+      dateValue0: '2021-10-08',
+      changedCount0: 0,
+
+      dateValue1: '2021-10-09 17:54:00',
+      changedCount1: 0,
+
+      dateValueV2: '2021-10-09',
+      changedCount2: 0,
+
+      dateValueV3: '2022-10-09',
+      changedCount3: 0,
     };
   },
 

examples/datetime-v2/src/DateTimeV2Example.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <h1>时间日期控件V2</h1>
-
-    <h2>基本表单</h2>
-    <div>
-      <div class="form-group">
-        <label for="datetime">日期</label>
-        <DateTimeV2
-          :date-value="dateValue1"
-          @on-value-change="dateValue1 = $event"
-        />
-      </div>
-    </div>
-
-    {{ dateValue1 }}
-
-    <h2>内联表单</h2>
-    <div class="form-inline">
-      <div class="form-group">
-        <label
-          class="control-label"
-          for="inputGroupSuccess3"
-        >日期</label>
-        <DateTimeV2
-          :date-value="dateValue2"
-          @on-value-change="dateValue2 = $event"
-        />
-      </div>
-    </div>
-
-    {{ dateValue2 }}
-
-    <h2>只读</h2>
-    <DateTimeV2
-      :date-value="dateValue3"
-      :readonly="true"
-    />
-    {{ dateValue3 }}
-
-    <h2>复制/粘贴</h2>
-    <DateTimeV2
-      :date-value="dateValue4"
-      @on-value-change="dateValue4 = $event"
-    />
-    {{ dateValue4 }}
-  </div>
-</template>
-
-<script>
-
-
-import DateTimeV2 from '../../../packages/datetime-v2/index.js';
-
-export default {
-  name: 'App',
-
-  components: {
-    DateTimeV2,
-  },
-
-  data: function () {
-    return {
-      dateValue1: '2021-10-09 14:02:01',
-      dateValue2: '2021-10-09 14:02:02',
-      dateValue3: '2021-10-09 14:02:03',
-      dateValue4: '2021-10-09 14:02:04',
-    };
-  },
-
-  methods: {
-
-  },
-};
-</script>
-
-<style>
-</style>

examples/datetime/src/DateTimeExample.vue

@@ -7,13 +7,25 @@
       <div class="form-group">
         <label for="datetime">日期时间</label>
         <DateTime
-          :date-value="dateValue1"
-          @on-value-change="dateValue1 = $event"
+          v-model="dateValue1"
+          @update:model-value="changedCount1++"
+        />
+      </div>
+    </div>
+
+    {{ dateValue1 }} 更改次数 {{ changedCount1 }}
+
+
+    <div>
+      <div class="form-group">
+        <label for="datetime">日期时间</label>
+        <DateTime
+          :model-value="dateValue1"
+          :readonly="true"
         />
       </div>
     </div>
 
-    {{ dateValue1 }}
 
     <h2>内联表单</h2>
     <div class="form-inline">
@@ -23,13 +35,13 @@
           for="inputGroupSuccess3"
         >日期时间</label>
         <DateTime
-          :date-value="dateValue2"
-          @on-value-change="dateValue2 = $event"
+          v-model="dateValue2"
+          @update:model-value="changedCount2 ++ "
         />
       </div>
     </div>
 
-    {{ dateValue2 }}
+    {{ dateValue2 }} 更改次数 {{ changedCount2 }}
 
     <h2>只读</h2>
         
@@ -40,7 +52,7 @@
           for="inputGroupSuccess3"
         >日期时间</label>
         <DateTime
-          :date-value="dateValue3"
+          v-model="dateValue3"
           :readonly="true"
         />
       </div>
@@ -65,8 +77,13 @@ export default {
   data: function () {
     return {
       dateValue1: '2021-10-09 12:00:01',
+      changedCount1: 0,
+
       dateValue2: '2021-10-09 14:02:00',
+      changedCount2: 0,
+
       dateValue3: '2022-10-09 14:02:00',
+      changedCount3: 0,
     };
   },
 

examples/route/index.js

@@ -2,7 +2,6 @@ import Desktop from '../Desktop.vue';
 const CheckBoxExample = () => import(/* webpackChunkName: "check-box-example" */ '../checkbox/src/CheckBoxExample.vue');
 const DateExample = () => import(/* webpackChunkName: "date-example" */ '../date/src/DateExample.vue');
 const DateTimeExample = () => import(/* webpackChunkName: "date-time-example" */ '../datetime/src/DateTimeExample.vue');
-const DateTimeV2Example = () => import(/* webpackChunkName: "date-time-v2-example" */ '../datetime-v2/src/DateTimeV2Example.vue');
 const ModalExample = () => import(/* webpackChunkName: "modal-example" */ '../modal/src/ModalExample.vue');
 const NavbarExample = () => import(/* webpackChunkName: "nav-bar-example" */ '../navbar/src/NavbarExample.vue');
 const ImagePreviewExample = () => import(/* webpackChunkName: "image-preview-example" */ '../image-preview/src/ImagePreviewExample.vue');
@@ -43,9 +42,6 @@ export default {
         /** 日期时间控件 */
         { path: 'date-time-example', component: DateTimeExample },
 
-        /** 日期时间控件V2 */
-        { path: 'date-time-v2-example', component: DateTimeV2Example },
-
         /** 模态框控件 */
         { path: 'modal-example', component: ModalExample },
 

packages/components.js

@@ -1,7 +1,6 @@
 import Loading from './loading/index.js';
 import Modal from './modal/index.js';
 import DateTime from './dateTime/index.js';
-import DateTimeV2 from './dateTime-v2/index.js';
 import Date from './date/index.js';
 import Checkbox from './checkbox/index.js';
 import AmisWidget from './amis/index.js';
@@ -53,7 +52,6 @@ export {
   Loading,
   Modal,
   DateTime,
-  DateTimeV2,
   Date,
   Checkbox,
   AmisWidget,

packages/date/src/Date.vue

@@ -1,80 +1,188 @@
 <template>
-  <date-picker
-    :readonly="readonly"
-    :date="starttime"
-    :option="option"
-    style="padding: 0px; border: none;"
-  />
+  <div
+    class="datetime-container input-group"
+    :class="{'has-error' : isValid === false}"
+  >
+    <input
+      id="datetime"
+      autocomplete="off"
+      type="date"
+      :readonly="readonly"
+      :value="dateTime"
+      class="datetime-item-1 form-control"
+      @change="dateValueChanged($event)"
+    />
+
+    <input
+      autocomplete="off"
+      type="text"
+      :readonly="readonly"
+      :value="dateTime"
+      class="datetime-item-2 form-control"
+      @change="textValueChanged($event)"
+    />
+
+    <span
+      v-if="isValid === false"
+      class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback"
+      aria-hidden="true"
+    />
+  </div>
 </template>
 
 <script>
-import VueDatepicker from '../../vue-datepicker/src/vue-datepicker.vue';
-import VueDatepickerOption0 from './vue-datepicker-setting.js';
+
+import moment from 'moment';
 
 export default {
-  // eslint-disable-next-line
+
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'Date',
 
   components: {
-    'date-picker': VueDatepicker,
+
   },
-  
+
   props: {
-    'dateValue':{
+    'modelValue': {
       type: String,
       default: null,
     },
-    'readonly':{
+    'readonly': {
       type: Boolean,
-      default: null,
+      default: false,
     },
   },
 
-  emits: ['on-value-change', 'input'],
+  emits: ['update:modelValue'],
 
   data: function () {
-    var vueDatepickerOption = VueDatepickerOption0();
-    vueDatepickerOption.option.type = 'day';
-    vueDatepickerOption.option.format = 'YYYY-MM-DD';
-
-    vueDatepickerOption.timeoption.type = 'min';
-    vueDatepickerOption.timeoption.format = 'YYYY-MM-DD';
-
-    vueDatepickerOption.multiOption.type = 'multi-day';
-    vueDatepickerOption.multiOption.format = 'YYYY-MM-DD';
     return {
-      starttime: {
-        time: this.dateValue,
-      },
-      endtime: {
-        time: '',
-      },
-      testTime: '',
-      multiTime: '',
-      option: vueDatepickerOption.option,
-      timeoption: vueDatepickerOption.timeoption,
-      multiOption: vueDatepickerOption.multiOption,
-      limit: vueDatepickerOption.limit,
+      'isValid': true,
     };
   },
 
-  watch: {
-    // 'value': function(val){
-    // 	// 监听外部对props属性value的变更，并同步到组件内
-    // 	starttime.time = val;
-    // },
-
-    'starttime.time': function (val) {
-      // 组件内对starttime.time变更后向外部发送事件通知
-      this.$emit('on-value-change', val);
-      this.$emit('input', val);
-      console.log('name has been changed:', val);
+
+  computed: {
+
+    /**
+     * 把(YYYY-MM-DD)格式的日期字符串转换成datetime-local(YYYY-MM-DD)
+     */
+    dateTime: function () {
+      if (this.modelValue == null || this.modelValue.length == 0) {
+        return null;
+      } else {
+        if(this.modelValue.length > 10){
+          return moment(this.modelValue, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD');
+        }else{
+          return moment(this.modelValue, 'YYYY-MM-DD').format('YYYY-MM-DD');
+        }
+      }
+    },
+
+  },
+
+  mounted: function () {
+
+  },
+
+  methods: {
+    /**
+     * 是否是有效的日期时间格式，YYYY-MM-DD
+     */
+    isValidDateTime: function (text) {
+      if (text == null || text.length == 0) {
+        return true;
+      }
+      return moment(text, 'YYYY-MM-DD', true).isValid();
+    },
+
+    textValueChanged: function (event) {
+      let newValue = event.target.value;
+
+      // 日期时间校验
+      if (this.isValidDateTime(newValue)) {
+        if (this.readonly == true && (newValue == null || newValue.length == 0)) {
+          this.isValid = false;
+        } else {
+          this.isValid = true;
+        }
+        console.log('Date input value changed: orginal value: %s, current value: %s', this.modelValue, newValue);
+        this.$emit('update:modelValue', newValue + ' 00:00:00');
+      } else {
+        this.isValid = false;
+      }
     },
 
-    dateValue: function (val) {
-      this.starttime.time = val;
+
+    /**
+     * 值改变事件
+     */
+    dateValueChanged: function (event) {
+      let newValue = event.target.value;
+      let parsedDateTime = '';
+      if (newValue != null && newValue.length > 0) {
+        parsedDateTime = moment(newValue).format('YYYY-MM-DD');
+      }
+
+      // 日期时间校验
+      if (this.isValidDateTime(parsedDateTime)) {
+        if (this.readonly == true && (parsedDateTime == null || parsedDateTime.length == 0)) {
+          this.isValid = false;
+        } else {
+          this.isValid = true;
+        }
+        console.log('Date value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
+        this.$emit('update:modelValue', parsedDateTime + ' 00:00:00');
+      } else {
+        this.isValid = false;
+      }
     },
   },
 };
 </script>
 
+<style>
+.form-inline .datetime-container {
+    display: inline-flex !important;
+    vertical-align: middle;
+}
+</style>
+
+
+<style scoped>
+.datetime-container {
+    position: relative;
+    height: 34px;
+    width: auto;
+    vertical-align: middle;
+    min-width: 200px;
+    /* display : inline-flex; */
+    display: block;
+}
+
+.datetime-item-1 {
+    position: absolute;
+    display: inline;
+    width: 100%;
+    cursor: pointer;
+    border-radius: 4px !important;
+}
+
+.datetime-item-2 {
+    position: absolute !important;
+    border-radius: 4px 0px 0px 4px !important;
+    display: inline;
+    width: calc(100% - 39px) !important;
+}
+
+.datetime-item-3 {
+    right: 39px;
+}
+
+/*控制下拉小箭头的*/
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+    padding-right: 0px;
+}
+</style>
+

packages/date/src/vue-datepicker-setting.js

@@ -1,61 +0,0 @@
-export default function () {
-  return {
-    option: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-      placeholder: '请选择时间',
-      inputStyle: {
-        'display': 'inline-block',
-        'width': '100%',
-        'height': '34px',
-        'padding': '6px',
-        'font-size': '14px',
-        'line-height': '22px',
-        'color': '#555',
-        'background-color': '#fff',
-        'background-image': 'none',
-        'border': '1px solid #ccc',
-        'border-radius': '4px 4px 4px 4px',
-        'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
-        'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
-
-      },
-      color: {
-        checked: '#F50057',
-        header: '#3f51b5',
-        headerText: '#fff',
-      },
-      buttons: {
-        ok: '确定',
-        cancel: '取消',
-      },
-      overlayOpacity: 0.5, // 0.5 as default
-      dismissible: true, // as true as default
-    },
-    timeoption: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-    },
-    multiOption: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-    },
-    limit: [
-      {
-        type: 'weekday',
-        available: [1, 2, 3, 4, 5],
-      },
-      {
-        type: 'fromto',
-        from: '2016-02-01',
-        to: '2016-02-20',
-      },
-    ],
-  };
-}

packages/datetime-v2/index.js

@@ -1,8 +0,0 @@
-
-import DateTimeV2 from './src/DateTimeV2.vue';
-
-DateTimeV2.install = function(Vue) {
-  Vue.component(DateTimeV2.name, DateTimeV2);
-};
-
-export default DateTimeV2;

packages/datetime-v2/src/DateTimeV2.vue

@@ -1,183 +0,0 @@
-<template>
-  <div
-    class="datetime-container input-group"
-    :class="{'has-error' : isValid === false}"
-  >
-    <input
-      id="datetime"
-      autocomplete="off"
-      type="datetime-local"
-      :readonly="readonly"
-      :value="dateTime"
-      class="datetime-item-1 form-control"
-      @change="datetimeLocalValueChanged($event)"
-    />
-
-    <input
-      autocomplete="off"
-      type="text"
-      :readonly="readonly"
-      :value="dateValue"
-      class="datetime-item-2 form-control"
-      @change="textValueChanged($event)"
-    />
-
-    <span
-      v-if="isValid === false"
-      class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback"
-      aria-hidden="true"
-    />
-  </div>
-</template>
-
-<script>
-
-import moment from 'moment';
-
-export default {
-
-  name: 'DateTimeV2',
-
-  components: {
-
-  },
-
-  props: {
-    'dateValue': {
-      type: String,
-      default: null,
-    },
-    'readonly': {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['on-value-change'],
-
-  data: function () {
-    return {
-      'isValid': true,
-    };
-  },
-
-
-  computed: {
-
-    /**
-             * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
-             */
-    dateTime: function () {
-      if (this.dateValue == null || this.dateValue.length == 0) {
-        return null;
-      } else {
-        return moment(this.dateValue, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DDTHH:mm:ss');
-      }
-    },
-
-  },
-
-  mounted: function () {
-
-  },
-
-  methods: {
-    /**
-         * 是否是有效的日期时间格式，YYYY-MM-DD HH:mm:ss
-         */
-    isValidDateTime: function (text) {
-      if (text == null || text.length == 0) {
-        return true;
-      }
-      return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
-    },
-
-    textValueChanged: function (event) {
-      let newValue = event.target.value;
-
-      // 日期时间校验
-      if (this.isValidDateTime(newValue)) {
-        if (this.readonly == true && (newValue == null || newValue.length == 0)) {
-          this.isValid = false;
-        } else {
-          this.isValid = true;
-        }
-        console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.dateValue, newValue);
-        this.$emit('on-value-change', newValue);
-      } else {
-        this.isValid = false;
-      }
-    },
-
-
-    /**
-             * 值改变事件
-             */
-    datetimeLocalValueChanged: function (event) {
-      let newValue = event.target.value;
-      let parsedDateTime = '';
-      if (newValue != null && newValue.length > 0) {
-        parsedDateTime = moment(newValue).format('YYYY-MM-DD HH:mm:ss');
-      }
-
-      // 日期时间校验
-      if (this.isValidDateTime(parsedDateTime)) {
-        if (this.readonly == true && (parsedDateTime == null || parsedDateTime.length == 0)) {
-          this.isValid = false;
-        } else {
-          this.isValid = true;
-        }
-        console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
-        this.$emit('on-value-change', parsedDateTime);
-      } else {
-        this.isValid = false;
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.form-inline .datetime-container {
-    display: inline-flex !important;
-    vertical-align: middle;
-}
-</style>
-
-
-<style scoped>
-.datetime-container {
-    position: relative;
-    height: 34px;
-    width: auto;
-    vertical-align: middle;
-    min-width: 200px;
-    /* display : inline-flex; */
-    display: block;
-}
-
-.datetime-item-1 {
-    position: absolute;
-    display: inline;
-    width: 100%;
-    cursor: pointer;
-    border-radius: 4px !important;
-}
-
-.datetime-item-2 {
-    position: absolute !important;
-    border-radius: 4px 0px 0px 4px !important;
-    display: inline;
-    width: calc(100% - 39px) !important;
-}
-
-.datetime-item-3 {
-    right: 39px;
-}
-
-/*控制下拉小箭头的*/
-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
-    padding-right: 0px;
-}
-</style>
-

packages/datetime-v2/src/date.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar2-date" viewBox="0 0 16 16">
-  <path d="M6.445 12.688V7.354h-.633A12.6 12.6 0 0 0 4.5 8.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
-  <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>
-  <path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4z"/>
-</svg>

packages/datetime/src/DateTime.vue

@@ -1,75 +1,183 @@
 <template>
-  <date-picker
-    :readonly="readonly"
-    :date="starttime"
-    :option="option"
-    style="padding: 0px; border: none;"
-  />
+  <div
+    class="datetime-container input-group"
+    :class="{'has-error' : isValid === false}"
+  >
+    <input
+      id="datetime"
+      autocomplete="off"
+      type="datetime-local"
+      :readonly="readonly"
+      :value="dateTime"
+      class="datetime-item-1 form-control"
+      @change="datetimeLocalValueChanged($event)"
+    />
+
+    <input
+      autocomplete="off"
+      type="text"
+      :readonly="readonly"
+      :value="modelValue"
+      class="datetime-item-2 form-control"
+      @change="textValueChanged($event)"
+    />
+
+    <span
+      v-if="isValid === false"
+      class="glyphicon glyphicon-remove datetime-item-3 form-control-feedback"
+      aria-hidden="true"
+    />
+  </div>
 </template>
 
 <script>
-import VueDatepicker from '../../vue-datepicker/src/vue-datepicker.vue';
-import VueDatepickerOption1 from './vue-datepicker-setting.js';
+
+import moment from 'moment';
 
 export default {
+
   name: 'DateTime',
 
   components: {
-    'date-picker': VueDatepicker,
+
   },
+
   props: {
-    'dateValue':{
+    'modelValue': {
       type: String,
       default: null,
     },
-    'readonly':{
+    'readonly': {
       type: Boolean,
-      default: null,
+      default: false,
     },
   },
 
-  emits: ['on-value-change'],
+  emits: ['update:modelValue'],
 
   data: function () {
-    var vueDatepickerOption = VueDatepickerOption1();
-    vueDatepickerOption.option.type = 'min';
-    vueDatepickerOption.option.format = 'YYYY-MM-DD HH:mm:ss';
-
-    vueDatepickerOption.timeoption.type = 'min';
-    vueDatepickerOption.timeoption.format = 'YYYY-MM-DD HH:mm:ss';
-
-    vueDatepickerOption.multiOption.type = 'multi-day';
-    vueDatepickerOption.multiOption.format = 'YYYY-MM-DD HH:mm:ss';
     return {
-      starttime: {
-        time: this.dateValue,
-      },
-      endtime: {
-        time: '',
-      },
-      testTime: '',
-      multiTime: '',
-      option: vueDatepickerOption.option,
-      timeoption: vueDatepickerOption.timeoption,
-      multiOption: vueDatepickerOption.multiOption,
-      limit: vueDatepickerOption.limit,
+      'isValid': true,
     };
   },
 
-  watch: {
-    // 'value': function(val){
-    // 	// 监听外部对props属性value的变更，并同步到组件内
-    // 	starttime.time = val;
-    // },
 
-    'starttime.time': function (val) {
-      // 组件内对starttime.time变更后向外部发送事件通知
-      this.$emit('on-value-change', val);
-      console.log('name has been changed:', val);
+  computed: {
+
+    /**
+             * 把(YYYY-MM-DD HH:mm:ss)格式的日期字符串转换成datetime-local(YYYY-MM-DDTHH:mm:ss)
+             */
+    dateTime: function () {
+      if (this.modelValue == null || this.modelValue.length == 0) {
+        return null;
+      } else {
+        return moment(this.modelValue, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DDTHH:mm:ss');
+      }
     },
-    dateValue: function (val) {
-      this.starttime.time = val;
+
+  },
+
+  mounted: function () {
+
+  },
+
+  methods: {
+    /**
+         * 是否是有效的日期时间格式，YYYY-MM-DD HH:mm:ss
+         */
+    isValidDateTime: function (text) {
+      if (text == null || text.length == 0) {
+        return true;
+      }
+      return moment(text, 'YYYY-MM-DD HH:mm:ss', true).isValid();
+    },
+
+    textValueChanged: function (event) {
+      let newValue = event.target.value;
+
+      // 日期时间校验
+      if (this.isValidDateTime(newValue)) {
+        if (this.readonly == true && (newValue == null || newValue.length == 0)) {
+          this.isValid = false;
+        } else {
+          this.isValid = true;
+        }
+        console.log('DateTimeV2 input value changed: orginal value: %s, current value: %s', this.modelValue, newValue);
+        this.$emit('update:modelValue', newValue);
+      } else {
+        this.isValid = false;
+      }
+    },
+
+
+    /**
+             * 值改变事件
+             */
+    datetimeLocalValueChanged: function (event) {
+      let newValue = event.target.value;
+      let parsedDateTime = '';
+      if (newValue != null && newValue.length > 0) {
+        parsedDateTime = moment(newValue).format('YYYY-MM-DD HH:mm:ss');
+      }
+
+      // 日期时间校验
+      if (this.isValidDateTime(parsedDateTime)) {
+        if (this.readonly == true && (parsedDateTime == null || parsedDateTime.length == 0)) {
+          this.isValid = false;
+        } else {
+          this.isValid = true;
+        }
+        console.log('DateTimeV2 value changed: orginal value: %s, current value: %s', newValue, parsedDateTime);
+        this.$emit('update:modelValue', parsedDateTime);
+      } else {
+        this.isValid = false;
+      }
     },
   },
 };
-</script>
+</script>
+
+<style>
+.form-inline .datetime-container {
+    display: inline-flex !important;
+    vertical-align: middle;
+}
+</style>
+
+
+<style scoped>
+.datetime-container {
+    position: relative;
+    height: 34px;
+    width: auto;
+    vertical-align: middle;
+    min-width: 200px;
+    /* display : inline-flex; */
+    display: block;
+}
+
+.datetime-item-1 {
+    position: absolute;
+    display: inline;
+    width: 100%;
+    cursor: pointer;
+    border-radius: 4px !important;
+}
+
+.datetime-item-2 {
+    position: absolute !important;
+    border-radius: 4px 0px 0px 4px !important;
+    display: inline;
+    width: calc(100% - 39px) !important;
+}
+
+.datetime-item-3 {
+    right: 39px;
+}
+
+/*控制下拉小箭头的*/
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+    padding-right: 0px;
+}
+</style>
+

packages/datetime/src/vue-datepicker-setting.js

@@ -1,61 +0,0 @@
-export default function () {
-  return {
-    option: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-      placeholder: '请选择时间',
-      inputStyle: {
-        'display': 'block',
-        'width': '100%',
-        'height': '34px',
-        'padding': '6px 12px',
-        'font-size': '14px',
-        'line-height': '1.42857143',
-        'color': '#555',
-        'background-color': '#fff',
-        'background-image': 'none',
-        'border': '1px solid #ccc',
-        'border-radius': '4px 0px 0px 4px',
-        'box-shadow': 'inset 0 1px 1px rgba(0,0,0,.075)',
-        'transition': 'border-color ease-in-out .15s,box-shadow ease-in-out .15s',
-
-      },
-      color: {
-        checked: '#F50057',
-        header: '#3f51b5',
-        headerText: '#fff',
-      },
-      buttons: {
-        ok: '确定',
-        cancel: '取消',
-      },
-      overlayOpacity: 0.5, // 0.5 as default
-      dismissible: true, // as true as default
-    },
-    timeoption: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-    },
-    multiOption: {
-      type: '',
-      week: ['一', '二', '三', '四', '五', '六', '日'],
-      month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
-      format: 'YYYY-MM-DD',
-    },
-    limit: [
-      {
-        type: 'weekday',
-        available: [1, 2, 3, 4, 5],
-      },
-      {
-        type: 'fromto',
-        from: '2016-02-01',
-        to: '2016-02-20',
-      },
-    ],
-  };
-}

packages/info/src/QueryConditionComplex.vue

@@ -161,7 +161,7 @@
                 :id="item.id" 
                 v-model="item.value.value2" 
                 @keyup.enter="complexSearch()"> -->
-            <DateTimeV2
+            <DateTime
               v-if="item.displayType =='DateTimeBoxEditor'"
               :date-value="item.value.value2"
               class="m-form-input"
@@ -260,7 +260,7 @@
 import { defineAsyncComponent } from 'vue';
 
 import EnumSelectWidgetInfo from './EnumSelectWidgetInfo.vue';
-import DateTimeV2 from '../../datetime-v2/src/DateTimeV2.vue';
+import DateTime from '../../datetime/src/DateTime.vue';
 import YearPicker from '../../year-picker/src/YearPicker.vue';
 import DateWidget from '../../date/src/Date.vue';
 import VueMonthlyPicker from '../../vue-monthly-picker/src/VueMonthlyPicker.vue';
@@ -270,7 +270,7 @@ export default {
 
   components: {
     EnumSelectWidgetInfo,
-    DateTimeV2,
+    DateTime,
     SearchWidget : defineAsyncComponent(() =>
       import('./SearchWidget.vue'),
     ),

packages/vue-datepicker/README.md

@@ -1,259 +0,0 @@
-# vue-datepicker
-calendar and datepicker component with material design for Vue.js
-
-# Demo
-
-The demo page is [HERE](http://hilongjw.github.io/vue-datepicker/demo.html).
-
-![Screenshot](screenshot.png)
-
-# Requirements
-
-- [Vue.js](https://github.com/yyx990803/vue) `^1.0.0` & `^2.0.0`
-- [moment](https://github.com/moment/moment) `^2.11.1`
-
-# Instllation
-
-## npm
-
-```shell
-$ npm install vue-datepicker
-```
-
-# Usage
-
-```html
-<script>
-// for Vue 1.0
-import myDatepicker from 'vue-datepicker/vue-datepicker-1.vue'
-
-// for Vue 2.0
-import myDatepicker from 'vue-datepicker'
-
-export default {
-  data () {
-    return {
-      // for Vue 1.0
-      starttime: '',
-      endtime: '2016-01-19',
-      testTime: '',
-      multiTime: '',
-
-      // for Vue 2.0
-      startTime: {
-        time: ''
-      },
-      endtime: {
-        time: ''
-      }
-
-      option: {
-        type: 'day',
-        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        format: 'YYYY-MM-DD',
-        placeholder: 'when?',
-        inputStyle: {
-          'display': 'inline-block',
-          'padding': '6px',
-          'line-height': '22px',
-          'font-size': '16px',
-          'border': '2px solid #fff',
-          'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
-          'border-radius': '2px',
-          'color': '#5F5F5F'
-        },
-        color: {
-          header: '#ccc',
-          headerText: '#f00'
-        },
-        buttons: {
-          ok: 'Ok',
-          cancel: 'Cancel'
-        },
-        overlayOpacity: 0.5, // 0.5 as default
-        dismissible: true // as true as default
-      },
-      timeoption: {
-        type: 'min',
-        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        format: 'YYYY-MM-DD HH:mm'
-      },
-      multiOption: {
-        type: 'multi-day',
-        week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-        month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        format:"YYYY-MM-DD HH:mm"
-      },
-      limit: [{
-        type: 'weekday',
-        available: [1, 2, 3, 4, 5]
-      },
-      {
-        type: 'fromto',
-        from: '2016-02-01',
-        to: '2016-02-20'
-      }]
-    }
-  },
-  components: {
-    'date-picker': myDatepicker
-  }
-}
-</script>
-<template>
-  <div class="card">
-
-    <!-- for Vue 1.0 -->
-    <div class="row">
-      <span>Departure Date：</span>
-      <date-picker :time.sync="starttime" :option="option" :limit="limit"></date-picker>
-    </div>
-
-    <!-- for Vue 2.0 -->
-    <div class="row">
-      <span>Departure Date：</span>
-      <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
-    </div>
-
-  </div>
-</template>
-```
-
-# API
-
- - Option 
-
- * type
-
-```
-  type: 'day' // 'min', 'multi-day'
-
-```
-
- * format
-
-```
-format: 'YYYY-MM-DD HH:mm'
-```
-
- * placeholder
-
-```
-placeholder: 'when?'
-```
-
- * week
-
-```
- week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
-```
-
- * month
-
-```
-  month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December']
-```
-
-* inputStyle
-
-```
-inputStyle: {
-  'display': 'inline-block',
-  'padding': '6px',
-  'line-height': '22px',
-  'font-size': '16px',
-  'border': '2px solid #fff',
-  'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
-  'border-radius': '2px',
-  'color': '#5F5F5F'
-}
-```
-
- * color
-
-```
-  color: {
-    header: '#ccc',
-    headerText: '#f00'
-  }
-```
-
-
- * buttons
-
-```
-buttons: {
-  ok: 'OK',
-  cancel: 'Cancel'
-}
-```
-
- * animate
-
-```
-  overlayOpacity: 0.5, // 0.5 as default
-  dismissible: true // as true as default
-```
-
-
- - limit
-
-  * from sometime to sometime(when from/to is empty, days before/after end/start time will be available)
-
-```javascript
-
-limit: {
-  type:'fromto',
-  from:'2016-01-10',
-  to:'2016-01-30'
-}
-
-```
- * weekdays
-
-```javascript
-
-limit:{
-  type: 'weekday',
-  available: [1, 2, 3, 4, 5] 
-}
-
-```
-
-### prop
-
-* Vue 1.0
-
-```javascript
-
-time: '' // string
-
-```
-
-```html
-
-<date-picker :time.sync="time" :limit="limit"></date-picker>
-
-```
-
-* Vue 2.0
-
-```javascript
-date: {
-  time: '' // string
-}
-```
-
-```html
-
-<date-picker :date="date" :limit="limit"></date-picker>
-
-```
-
-
-# License
-
-[The MIT License](http://opensource.org/licenses/MIT)
-

packages/vue-datepicker/index.js

@@ -1,8 +0,0 @@
-
-import VueDatepicker from './src/vue-datepicker.vue';
-
-VueDatepicker.install = function(Vue) {
-    Vue.component(VueDatepicker.name, VueDatepicker);
-};
-
-export default VueDatepicker;

packages/vue-datepicker/src/vue-datepicker.vue

@@ -1,956 +0,0 @@
-<template>
-  <div class="cov-vue-date">
-    <div class="datepickbox">
-      <input
-        v-model="date.time"
-        autocomplete="off"
-        type="text"
-        title="input date"
-        class="cov-datepicker"
-        :readonly="readonly"
-        :disabled="readonly"
-        :placeholder="option.placeholder"
-        :required="required"
-        :style="option.inputStyle ? option.inputStyle : {}"
-        @click="showCheck"
-        @foucus="showCheck"
-      />
-      <span
-        v-if="readonly != true && readonly != 'true'"
-        class="glyphicon glyphicon-remove-circle btn-remove"
-        @click="date.time = ''; $emit('change', '')"
-      />
-    </div>
-    <div
-      v-if="showInfo.check && readonly != true && readonly != 'true'"
-      class="datepicker-overlay"
-      :style="{'background' : option.overlayOpacity? 'rgba(0,0,0,'+option.overlayOpacity+')' : 'rgba(0,0,0,0.5)'}"
-      @click="dismiss($event)"
-    >
-      <div
-        class="cov-date-body"
-        :style="{'background-color': option.color ? option.color.header : '#3f51b5'}"
-      >
-        <div class="cov-date-monthly">
-          <div
-            class="cov-date-previous"
-            @click="nextMonth('pre')"
-          >
-            «
-          </div>
-          <div
-            class="cov-date-caption"
-            :style="{'color': option.color ? option.color.headerText : '#fff'}"
-          >
-            <span @click="showYear"><small>{{ checked.year }}</small></span>
-            <br />
-            <span @click="showMonth">{{ displayInfo.month }}</span>
-          </div>
-          <div
-            class="cov-date-next"
-            @click="nextMonth('next')"
-          >
-            »
-          </div>
-        </div>
-        <div
-          v-if="showInfo.day"
-          class="cov-date-box"
-        >
-          <div class="cov-picker-box">
-            <div class="week">
-              <ul>
-                <li v-for="weekie in library.week" :key="'weekie-' + weekie">{{ weekie }}</li>
-              </ul>
-            </div>
-            <div
-              v-for="day in dayList"
-              :key="'day-' + day"
-              class="day"
-              track-by="$index"
-              :class="{'checked':day.checked,'unavailable':day.unavailable,'passive-day': !(day.inMonth)}"
-              :style="day.checked ? 
-                (option.color && option.color.checkedDay ? { background: option.color.checkedDay } : { background: '#F50057' }) : {}"
-              @click="checkDay(day)"
-            >
-              {{ day.value }}
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="showInfo.year"
-          class="cov-date-box list-box"
-        >
-          <div
-            id="yearList"
-            class="cov-picker-box date-list"
-          >
-            <div
-              v-for="yearItem in library.year"
-              :key="'year-' + yearItem"
-              class="date-item"
-              track-by="$index"
-              @click="setYear(yearItem)"
-            >
-              {{ yearItem }}
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="showInfo.month"
-          class="cov-date-box list-box"
-        >
-          <div class="cov-picker-box date-list">
-            <div
-              v-for="monthItem in library.month"
-              :key="'month-' + monthItem"
-              class="date-item"
-              track-by="$index"
-              @click="setMonth(monthItem)"
-            >
-              {{ monthItem }}
-            </div>
-          </div>
-        </div>
-        <div
-          v-if="showInfo.hour"
-          class="cov-date-box list-box"
-        >
-          <div class="cov-picker-box date-list">
-            <div class="watch-box">
-              <div class="hour-box">
-                <div class="mui-pciker-rule mui-pciker-rule-ft" />
-                <ul>
-                  <li
-                    v-for="hitem in hours"
-                    :key="'hour-' + hitem"
-                    class="hour-item"
-                    :class="{'active':hitem.checked}"
-                    @click="setTime('hour', hitem, hours)"
-                  >
-                    {{ hitem.value }}
-                  </li>
-                </ul>
-              </div>
-              <div class="min-box">
-                <div class="mui-pciker-rule mui-pciker-rule-ft" />
-                <div
-                  v-for="mitem in mins"
-                  :key="'min-' + mitem"
-                  class="min-item"
-                  :class="{'active':mitem.checked}"
-                  @click="setTime('min',mitem, mins)"
-                >
-                  {{ mitem.value }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="button-box">
-          <span @click="showInfo.check=false">{{ option.buttons? option.buttons.cancel : 'Cancel' }}</span>
-          <span @click="picked">{{ option.buttons? option.buttons.ok : 'Ok' }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-'use strict';
-
-
-import _moment from 'moment';
-
-var _moment2 = _interopRequireDefault(_moment);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-export default {
-  name: 'vue-datepicker',
-  props: {
-    required: false,
-    date: {
-      type: Object,
-      required: true,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    option: {
-      type: Object,
-      default: function _default() {
-        return {
-          type: 'day',
-          SundayFirst: false,
-          week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-          month: ['January', 'February', 'March', 'April', 'May',
-            'June', 'July', 'August', 'September', 'October',
-            'November', 'December'],
-          format: 'YYYY-MM-DD',
-          color: {
-            checked: '#F50057',
-            header: '#3f51b5',
-            headerText: '#fff',
-          },
-          inputStyle: {
-            'display': 'inline-block',
-            'padding': '6px',
-            'line-height': '22px',
-            'font-size': '16px',
-            'border': '2px solid #fff',
-            'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
-            'border-radius': '2px',
-            'color': '#5F5F5F',
-          },
-          placeholder: 'when?',
-          buttons: {
-            ok: 'OK',
-            cancel: 'Cancel',
-          },
-          overlayOpacity: 0.5,
-          dismissible: true,
-        };
-      },
-    },
-    limit: {
-      type: Array,
-      default: function _default() {
-        return [];
-      },
-    },
-  },
-  data: function data() {
-    function hours() {
-      var list = [];
-      var hour = 24;
-      while (hour > 0) {
-        hour--;
-        list.push({
-          checked: false,
-          value: hour < 10 ? '0' + hour : hour,
-        });
-      }
-      return list;
-    }
-    function mins() {
-      var list = [];
-      var min = 60;
-      while (min > 0) {
-        min--;
-        list.push({
-          checked: false,
-          value: min < 10 ? '0' + min : min,
-        });
-      }
-      return list;
-    }
-    return {
-      hours: hours(),
-      mins: mins(),
-      showInfo: {
-        hour: false,
-        day: false,
-        month: false,
-        year: false,
-        check: false,
-      },
-      displayInfo: {
-        month: '',
-      },
-      library: {
-        week: this.option.week,
-        month: this.option.month,
-        year: [],
-      },
-      checked: {
-        oldtime: '',
-        currentMoment: null,
-        year: '',
-        month: '',
-        day: '',
-        hour: '00',
-        min: '00',
-      },
-      dayList: [],
-      selectedDays: [],
-    };
-  },
-
-  methods: {
-    pad: function pad(n) {
-      n = Math.floor(n);
-      return n < 10 ? '0' + n : n;
-    },
-    nextMonth: function nextMonth(type) {
-      var next = null;
-      type === 'next' 
-        ? next = (0, _moment2.default)(this.checked.currentMoment).add(1, 'M') 
-        : next = (0, _moment2.default)(this.checked.currentMoment).add(-1, 'M');
-      this.showDay(next);
-    },
-    showDay: function showDay(time) {
-      if (time === undefined || !Date.parse(time)) {
-        this.checked.currentMoment = (0, _moment2.default)();
-      } else {
-        this.checked.currentMoment = (0, _moment2.default)(time, this.option.format);
-      }
-      this.showOne('day');
-      this.checked.year = (0, _moment2.default)(this.checked.currentMoment).format('YYYY');
-      this.checked.month = (0, _moment2.default)(this.checked.currentMoment).format('MM');
-      this.checked.day = (0, _moment2.default)(this.checked.currentMoment).format('DD');
-      this.displayInfo.month = this.library.month[(0, _moment2.default)(this.checked.currentMoment).month()];
-      var days = [];
-      var currentMoment = this.checked.currentMoment;
-      var firstDay = (0, _moment2.default)(currentMoment).date(1).day();
-      // gettting previous and next month
-      // let currentMonth = moment(currentMoment)
-      var previousMonth = (0, _moment2.default)(currentMoment);
-      var nextMonth = (0, _moment2.default)(currentMoment);
-      nextMonth.add(1, 'months');
-      previousMonth.subtract(1, 'months');
-      var monthDays = (0, _moment2.default)(currentMoment).daysInMonth();
-      var oldtime = this.checked.oldtime;
-      for (var i = 1; i <= monthDays; ++i) {
-        days.push({
-          value: i,
-          inMonth: true,
-          unavailable: false,
-          checked: false,
-          moment: (0, _moment2.default)(currentMoment).date(i),
-        });
-        if (i === Math.ceil((0, _moment2.default)(currentMoment).format('D')) 
-            && (0, _moment2.default)(oldtime, this.option.format).year() === (0, _moment2.default)(currentMoment).year() 
-            && (0, _moment2.default)(oldtime, this.option.format).month() === (0, _moment2.default)(currentMoment).month()) {
-          days[i - 1].checked = true;
-        }
-        this.checkBySelectDays(i, days);
-      }
-      if (firstDay === 0) firstDay = 7;
-      for (var _i = 0; _i < firstDay - (this.option.SundayFirst ? 0 : 1); _i++) {
-        var passiveDay = {
-          value: previousMonth.daysInMonth() - _i,
-          inMonth: false,
-          action: 'previous',
-          unavailable: false,
-          checked: false,
-          moment: (0, _moment2.default)(currentMoment).date(1).subtract(_i + 1, 'days'),
-        };
-        days.unshift(passiveDay);
-      }
-      if (this.limit.length > 0) {
-        var _iteratorNormalCompletion = true;
-        var _didIteratorError = false;
-        var _iteratorError = undefined;
-
-        try {
-          for (var _iterator = this.limit[Symbol.iterator](), _step; 
-            !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
-            _iteratorNormalCompletion = true) {
-            var li = _step.value;
-
-            switch (li.type) {
-            case 'fromto':
-              days = this.limitFromTo(li, days);
-              break;
-            case 'weekday':
-              days = this.limitWeekDay(li, days);
-              break;
-            }
-          }
-        } catch (err) {
-          _didIteratorError = true;
-          _iteratorError = err;
-        } finally {
-          try {
-            if (!_iteratorNormalCompletion && _iterator.return) {
-              _iterator.return();
-            }
-          } finally {
-            if (_didIteratorError) {
-              // eslint-disable-next-line
-              throw _iteratorError;
-            }
-          }
-        }
-      }
-      var passiveDaysAtFinal = 42 - days.length;
-      for (var _i2 = 1; _i2 <= passiveDaysAtFinal; _i2++) {
-        var _passiveDay = {
-          value: _i2,
-          inMonth: false,
-          action: 'next',
-          unavailable: false,
-          checked: false,
-          moment: (0, _moment2.default)(currentMoment).add(1, 'months').date(_i2),
-        };
-        days.push(_passiveDay);
-      }
-      this.dayList = days;
-    },
-    checkBySelectDays: function checkBySelectDays(d, days) {
-      var _this = this;
-
-      this.selectedDays.forEach(function (day) {
-        if (_this.checked.year === 
-              (0, _moment2.default)(day).format('YYYY') && _this.checked.month === (0, _moment2.default)(day).format('MM') && d === Math.ceil((0, _moment2.default)(day).format('D'))) {
-          days[d - 1].checked = true;
-        }
-      });
-    },
-    limitWeekDay: function limitWeekDay(limit, days) {
-      days.map(function (day) {
-        if (limit.available.indexOf(Math.floor(day.moment.format('d'))) === -1) {
-          day.unavailable = true;
-        }
-      });
-      return days;
-    },
-    limitFromTo: function limitFromTo(limit, days) {
-      var _this2 = this;
-
-      if (limit.from || limit.to) {
-        days.map(function (day) {
-          if (_this2.getLimitCondition(limit, day)) {
-            day.unavailable = true;
-          }
-        });
-      }
-      return days;
-    },
-    getLimitCondition: function getLimitCondition(limit, day) {
-      var tmpMoment = (0, _moment2.default)(this.checked.year + '-' + this.pad(this.checked.month) + '-' + this.pad(day.value));
-      if (limit.from && !limit.to) {
-        return !tmpMoment.isAfter(limit.from);
-      } else if (!limit.from && limit.to) {
-        return !tmpMoment.isBefore(limit.to);
-      } else {
-        return !tmpMoment.isBetween(limit.from, limit.to);
-      }
-    },
-    checkDay: function checkDay(obj) {
-      if (obj.unavailable || obj.value === '') {
-        return false;
-      }
-      if (!obj.inMonth) {
-        this.nextMonth(obj.action);
-      }
-      if (this.option.type === 'day' || this.option.type === 'min') {
-        this.dayList.forEach(function (x) {
-          x.checked = false;
-        });
-        this.checked.day = this.pad(obj.value);
-        obj.checked = true;
-      } else {
-        var day = this.pad(obj.value);
-        var ctime = this.checked.year + '-' + this.checked.month + '-' + day;
-        if (obj.checked === true) {
-          obj.checked = false;
-          this.selectedDays.$remove(ctime);
-        } else {
-          this.selectedDays.push(ctime);
-          obj.checked = true;
-        }
-      }
-      switch (this.option.type) {
-      case 'day':
-        this.picked();
-        break;
-      case 'min':
-        this.showOne('hour');
-        // shift activated time items to visible position.
-        this.shiftActTime();
-        break;
-      }
-    },
-    showYear: function showYear() {
-      var _this3 = this;
-
-      var year = (0, _moment2.default)(this.checked.currentMoment).year();
-      this.library.year = [];
-      var yearTmp = [];
-      for (var i = year - 100; i < year + 5; ++i) {
-        yearTmp.push(i);
-      }
-      this.library.year = yearTmp;
-      this.showOne('year');
-      this.$nextTick(function () {
-        var listDom = document.getElementById('yearList');
-        listDom.scrollTop = listDom.scrollHeight - 100;
-        _this3.addYear();
-      });
-    },
-    showOne: function showOne(type) {
-      switch (type) {
-      case 'year':
-        this.showInfo.hour = false;
-        this.showInfo.day = false;
-        this.showInfo.year = true;
-        this.showInfo.month = false;
-        break;
-      case 'month':
-        this.showInfo.hour = false;
-        this.showInfo.day = false;
-        this.showInfo.year = false;
-        this.showInfo.month = true;
-        break;
-      case 'day':
-        this.showInfo.hour = false;
-        this.showInfo.day = true;
-        this.showInfo.year = false;
-        this.showInfo.month = false;
-        break;
-      case 'hour':
-        this.showInfo.hour = true;
-        this.showInfo.day = false;
-        this.showInfo.year = false;
-        this.showInfo.month = false;
-        break;
-      default:
-        this.showInfo.day = true;
-        this.showInfo.year = false;
-        this.showInfo.month = false;
-        this.showInfo.hour = false;
-      }
-    },
-    showMonth: function showMonth() {
-      this.showOne('month');
-    },
-    addYear: function addYear() {
-      var _this4 = this;
-
-      var listDom = document.getElementById('yearList');
-      // eslint-disable-next-line
-      listDom.addEventListener('scroll', function (e) {
-        if (listDom.scrollTop < listDom.scrollHeight - 100) {
-          var len = _this4.library.year.length;
-          var lastYear = _this4.library.year[len - 1];
-          _this4.library.year.push(lastYear + 1);
-        }
-      }, false);
-    },
-    setYear: function setYear(year) {
-      this.checked.currentMoment = (0, _moment2.default)(year + '-' + this.checked.month + '-' + this.checked.day);
-      this.showDay(this.checked.currentMoment);
-    },
-    setMonth: function setMonth(month) {
-      var mo = this.library.month.indexOf(month) + 1;
-      if (mo < 10) {
-        mo = '0' + '' + mo;
-      }
-      this.checked.currentMoment = (0, _moment2.default)(this.checked.year + '-' + mo + '-' + this.checked.day);
-      this.showDay(this.checked.currentMoment);
-    },
-    showCheck: function showCheck() {
-      if (this.date.time === '') {
-        this.showDay();
-      } else {
-        if (this.option.type === 'day' || this.option.type === 'min') {
-          this.checked.oldtime = this.date.time;
-          this.showDay(this.date.time);
-        } else {
-          this.selectedDays = JSON.parse(this.date.time);
-          if (this.selectedDays.length) {
-            this.checked.oldtime = this.selectedDays[0];
-            this.showDay(this.selectedDays[0]);
-          } else {
-            this.showDay();
-          }
-        }
-      }
-      this.showInfo.check = true;
-    },
-    setTime: function setTime(type, obj, list) {
-      var _iteratorNormalCompletion2 = true;
-      var _didIteratorError2 = false;
-      var _iteratorError2 = undefined;
-
-      try {
-        for (var _iterator2 = list[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
-          var item = _step2.value;
-
-          item.checked = false;
-          if (item.value === obj.value) {
-            item.checked = true;
-            this.checked[type] = item.value;
-          }
-        }
-      } catch (err) {
-        _didIteratorError2 = true;
-        _iteratorError2 = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion2 && _iterator2.return) {
-            _iterator2.return();
-          }
-        } finally {
-          if (_didIteratorError2) {
-            // eslint-disable-next-line
-            throw _iteratorError2;
-          }
-        }
-      }
-    },
-    picked: function picked() {
-      if (this.option.type === 'day' || this.option.type === 'min') {
-        var ctime = this.checked.year + '-' + this.checked.month + '-' + this.checked.day + ' ' + this.checked.hour + ':' + this.checked.min;
-        this.checked.currentMoment = (0, _moment2.default)(ctime, 'YYYY-MM-DD HH:mm');
-        this.date.time = (0, _moment2.default)(this.checked.currentMoment).format(this.option.format);
-      } else {
-        this.date.time = JSON.stringify(this.selectedDays);
-      }
-      this.showInfo.check = false;
-      this.$emit('change', this.date.time);
-    },
-    dismiss: function dismiss(evt) {
-      if (evt.target.className === 'datepicker-overlay') {
-        if (this.option.dismissible === undefined || this.option.dismissible) {
-          this.showInfo.check = false;
-          this.$emit('cancel');
-        }
-      }
-    },
-    shiftActTime: function shiftActTime() {
-      // shift activated time items to visible position.
-      this.$nextTick(function () {
-        if (!document.querySelector('.hour-item.active')) {
-          return false;
-        }
-        document.querySelector('.hour-box').scrollTop = (document.querySelector('.hour-item.active').offsetTop || 0) - 250;
-        document.querySelector('.min-box').scrollTop = (document.querySelector('.min-item.active').offsetTop || 0) - 250;
-      });
-    },
-  },
-};
-</script>
-
-
-<style scoped>
-.datepicker-overlay {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    z-index: 998;
-    top: 0;
-    left: 0;
-    overflow: hidden;
-    -webkit-animation: fadein 0.5s;
-    /* Safari, Chrome and Opera > 12.1 */
-    -moz-animation: fadein 0.5s;
-    /* Firefox < 16 */
-    -ms-animation: fadein 0.5s;
-    /* Internet Explorer */
-    -o-animation: fadein 0.5s;
-    /* Opera < 12.1 */
-    animation: fadein 0.5s;
-}
-@keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-/* Firefox < 16 */
-@-moz-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-/* Safari, Chrome and Opera > 12.1 */
-@-webkit-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-/* Internet Explorer */
-@-ms-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-/* Opera < 12.1 */
-@-o-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-.cov-date-body {
-    display: inline-block;
-    background: #3f51b5;
-    overflow: hidden;
-    position: relative;
-    font-size: 16px;
-    font-family: "Roboto";
-    font-weight: 400;
-    position: fixed;
-    display: block;
-    width: 400px;
-    max-width: 100%;
-    z-index: 999;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-}
-.cov-picker-box {
-    background: #fff;
-    width: 100%;
-    display: inline-block;
-    padding: 25px;
-    box-sizing: border-box !important;
-    -moz-box-sizing: border-box !important;
-    -webkit-box-sizing: border-box !important;
-    -ms-box-sizing: border-box !important;
-    width: 400px;
-    max-width: 100%;
-    height: 280px;
-    text-align: start !important;
-}
-.cov-picker-box td {
-    height: 34px;
-    width: 34px;
-    padding: 0;
-    line-height: 34px;
-    color: #000;
-    background: #fff;
-    text-align: center;
-    cursor: pointer;
-}
-.cov-picker-box td:hover {
-    background: #e6e6e6;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-}
-.day {
-    width: 14.2857143%;
-    display: inline-block;
-    text-align: center;
-    cursor: pointer;
-    height: 34px;
-    padding: 0;
-    line-height: 34px;
-    color: #000;
-    background: #fff;
-    vertical-align: middle;
-}
-.week ul {
-    margin: 0 0 8px;
-    padding: 0;
-    list-style: none;
-}
-.week ul li {
-    width: 14.2%;
-    display: inline-block;
-    text-align: center;
-    background: transparent;
-    color: #000;
-    font-weight: bold;
-}
-.passive-day {
-    color: #bbb;
-}
-.checked {
-    background: #f50057;
-    color: #fff !important;
-    border-radius: 3px;
-}
-.unavailable {
-    color: #ccc;
-    cursor: not-allowed;
-}
-.cov-date-monthly {
-    height: 150px;
-}
-.cov-date-monthly > div {
-    display: inline-block;
-    padding: 0;
-    margin: 0;
-    vertical-align: middle;
-    color: #fff;
-    height: 150px;
-    float: left;
-    text-align: center;
-    cursor: pointer;
-}
-.cov-date-previous,
-.cov-date-next {
-    position: relative;
-    width: 20% !important;
-    text-indent: -300px;
-    overflow: hidden;
-    color: #fff;
-}
-.cov-date-caption {
-    width: 60%;
-    padding: 50px 0 !important;
-    box-sizing: border-box;
-    font-size: 24px;
-}
-.cov-date-caption span:hover {
-    color: rgba(255, 255, 255, 0.7);
-}
-.cov-date-previous:hover,
-.cov-date-next:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-.day:hover {
-    background: #eaeaea;
-}
-.unavailable:hover {
-    background: none;
-}
-.checked:hover {
-    background: #ff4f8e;
-}
-.cov-date-next::before,
-.cov-date-previous::before {
-    width: 20px;
-    height: 2px;
-    text-align: center;
-    position: absolute;
-    background: #fff;
-    top: 50%;
-    margin-top: -7px;
-    margin-left: -7px;
-    left: 50%;
-    line-height: 0;
-    content: "";
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-.cov-date-next::after,
-.cov-date-previous::after {
-    width: 20px;
-    height: 2px;
-    text-align: center;
-    position: absolute;
-    background: #fff;
-    margin-top: 6px;
-    margin-left: -7px;
-    top: 50%;
-    left: 50%;
-    line-height: 0;
-    content: "";
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-.cov-date-previous::after {
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-.cov-date-previous::before {
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    transform: rotate(-45deg);
-}
-.date-item {
-    text-align: center;
-    font-size: 20px;
-    padding: 10px 0;
-    cursor: pointer;
-}
-.date-item:hover {
-    background: #e0e0e0;
-}
-.date-list {
-    overflow: auto;
-    vertical-align: top;
-    padding: 0;
-}
-.cov-vue-date {
-    display: inline-block;
-    color: #5d5d5d;
-}
-.button-box {
-    background: #fff;
-    vertical-align: top;
-    height: 50px;
-    line-height: 50px;
-    text-align: right;
-    padding-right: 20px;
-}
-.button-box span {
-    cursor: pointer;
-    padding: 10px 20px;
-}
-.watch-box {
-    height: 100%;
-    overflow: hidden;
-}
-.hour-box,
-.min-box {
-    display: inline-block;
-    width: 50%;
-    text-align: center;
-    height: 100%;
-    overflow: auto;
-    float: left;
-}
-.hour-box ul,
-.min-box ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-.hour-item,
-.min-item {
-    padding: 10px;
-    font-size: 36px;
-    cursor: pointer;
-}
-.hour-item:hover,
-.min-item:hover {
-    background: #e3e3e3;
-}
-.hour-box .active,
-.min-box .active {
-    background: #f50057;
-    color: #fff !important;
-}
-::-webkit-scrollbar {
-    width: 2px;
-}
-::-webkit-scrollbar-track {
-    background: #e3e3e3;
-}
-::-webkit-scrollbar-thumb {
-    background: #c1c1c1;
-    border-radius: 2px;
-}
-.btn-remove {
-    float: right;
-    top: -33px;
-    right: 1px;
-    position: relative;
-    cursor: pointer;
-    padding: 9px;
-}
-
-.cov-datepicker[disabled] {
-    cursor: not-allowed;
-    background-color: #eee !important;
-    opacity: 1;
-}
-</style>