0
点赞
收藏
分享

微信扫一扫

element ui dataPicker 日期范围选择控件实现限制选择时间范围为1天

需求:需要实现一个日期选择功能,能够输入开始日期 结束日期,展示格式为yyyy-MM-dd,整个数值返回为一个数值(例如:[2020-01-02,2020-01-03])

细节要求:

1、当前时间之前日期不可选择

2、如果选择了当前时间,则另一个时间,只能是在选择日期的前后一天内选择

3、清除日期后,仍可以进行选择

实现功能代码如下:

//el-tooltip黑色提示框
 <el-tooltip class="item" effect="dark" placement="bottom">
 //日期选择控件
  <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期"
    end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
  </el-date-picker>
  //黑色提示框的提示信息
  <template slot="content">发布时间必须是未来时间,时间区间不能超过24小时</template>
</el-tooltip>

对应页面中的script中写入的内容如下:

data() {
//定义一个最大值和最小值变量,因为只是为了转化使用,所以可以不用放到return中
 let _minTime = null
 let _maxTime = null
 return {
 //定义pickerOptions对象,这个对象中可以设置  onPick  disabledDate
   pickerOptions: {
     onPick(time) {
     //此处的time为选择日期时的结果,time为一个对象,有两个值,一个是maxDate,一个是minDate,详细见下图,
     //以下判断是只选择了一个值的时候,也就是默认的开始值。
       if (!time.maxDate&&time.minDate) {
       //时间跨度为1天,1天转化成毫秒就是   24 * 3600 * 1000
         let timeRange = 1 * 24 * 60 * 60 * 1000
         //最小值为选择的日期-跨度值
         _minTime = time.minDate.getTime() - timeRange
         //最大值为选择的日期+跨度值
         _maxTime = time.minDate.getTime() + timeRange
       } else if(!time.maxDate&&!time.minDate){
       //如果两个值都已经选择了,也就是已经选择完成,则将最大值和最小值设置为null
         _minTime = _maxTime = null
       }
     },
     disabledDate(time) {
     //当已经选择了两个日期时
       if (_minTime && _maxTime) {
       //如果已经选择了两个日期,则小于最小值和大于最大值的都要禁用
         return time.getTime() < _minTime || time.getTime() > _maxTime
       } else {
       //如果没有选择两个值,即选择了一个或者什么都没有选择的初始状态,禁用的日期是当前日期之前的日期
         return time.getTime() < (Date.now() -1 * 24 * 60 * 60 * 1000 )
       }
     }
   }
  }
        


举报

相关推荐

0 条评论