Iview日期和时间范围选择器组件的封装

成品示意图：

一. 在iView组件库中选择：DatePicker 日期选择器，这是一个封装好的时间选择器，里面还有很多不同的类型，这次我们主要使用的是，用具体到时分秒的日期选择器type=“datetime”
二. 在components文件下
子组件，timeRange/main.vue，放时间选择器子组件的文件。
父组件，tastLog/dispatch/index.vue，将时间选择器的标签插入

三. main.vue子组件：

1. template
   type=‘datetime’:选择的类型，可以具体到时分秒
   :options=“startOptions” 设置可以限制选择时间的范围
   v-model=‘startvalue’ 双向绑定显示的数据

<template>
    <div class="date-range">
        <DatePicker type="datetime"  :options="startOptions" placeholder="开始时间" v-model='startvalue'></DatePicker>//开始时间
        <span>-</span>
        <DatePicker type="datetime" :options="endOptions" placeholder="结束时间" v-model='endvalue'></DatePicker>//结束时间
    </div>
</template>

<script>
import format from '@/plugins/format.js'//格式化时间YYYY-MM-DD hh:mm:ss文件
export default {
  name: 'dateRange'//组件的名称
  data () {
    return {
      startLimit: '',//初始化，开始时间的限制，不能选择结束时间之后的时间
      endLimit: '',//初始化，结束时间的限制，不能选择开始时间之前的时间
      startvalue: '',//初始化，v-model='startvalue'
      endvalue: ''//初始化，v-model='startvalue'
    }
  },
  computed: {
  //注意，在下面的比较中，必须将时间格式转换为YYYY-MM-DD hh:mm:ss
    startOptions: function () {//开始时间的限制，不能选择结束时间之后的时间
      let limitTime = this.endLimit//获取结束时间
      return {
        disabledDate (time) {
          if (limitTime) {//return回来的日期为不可选，可参考iView组件库DatePicker不可选示例。在 endvalue (v) {}中获取了endLimit的实时数据。其中>endLimit的日期隐藏，不可选。
            return time > new Date(limitTime)
          } else {
            return time > Date.now()
          }
        }
      }
    },
    endOptions: function () {
      let limitTime = this.startLimit
      return {
        disabledDate (time) {
          return (
            time < new Date(limitTime) ||
            time > Date.now()
          )
        }
      }
    }
  },
  watch: {
    startvalue (v) {
      this.startLimit = format(v, 'YYYY-MM-DD hh:mm:ss')//将v赋值给 this.startLimit，并且格式化，因为原始的组件的格式为Mon Dec 24 2018 00:00:00 GMT+0800 (中国标准时间)，无法对其进行比较。格式化后为2018-12-24 00:00:00
      this.$emit('on-from-date-range', {//父子间引入子组件时，子组件触发的函数
        key: 'startTime',
        value: v
      })
    },
    endvalue (v) {
      this.endLimit = format(v, 'YYYY-MM-DD hh:mm:ss')
      this.$emit('on-from-date-range', {
        key: 'endTime',
        value: v
      })
    }
  },
  methods: {
    resetData () {//重置按钮，清空选择的时间
      this.startvalue = ''
      this.endvalue = ''
    }
  }
}
</script>

四. dispatch父组件：
3. template
@on-from-date-range=“dateChange” 在子组件中定义了$emit，格式化时间

<FormItem label="调度时间" class='time-item'>//标题
  <date-range ref="dateRange" @on-from-date-range="dateChange"></date-range>
</FormItem>
<Button type="info" class="search-btn" @click="search">搜索</Button>
<Button type="default" @click="resetForm" v-show="formBtns.reset" >重置</Button>

4. scriptde的methods

    resetForm () {//重置按钮触发的函数
      this.forms.startTime = ''
      this.forms.endTime = ''
      this.$refs.dateRange.resetData()//通过父组件触发子组件的函数，来重置时间。父组件获取ref为dateRange的节点，触发其子组件resetData函数
      this.$refs.thisSearchForm.$emit('resetCommonForm')
    }
    dateChange (v) {
      this.forms[v.key] = format(v.value, 'YYYY-MM-DD hh:mm:ss')//格式化时间，时间转化
    },

总结：就是父子组件时间双向绑定，通过父组件触发子组件的函数，来重置时间，无法在子组件中触发重置函数。