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>
  1. 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')//格式化时间,时间转化
    },

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值