element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options

element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期,订票时间要限制日期范围

官网提供了picker-options参数可以设置日期选择范围,具体操作看代码// 页面引入组件, 加上picker-options这个参数

v-model="exCheckDate"

type="date"

:picker-options="pickerOptions"

value-format="yyyy-MM-dd"

placeholder="Please select">

// js中定义范围

// picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期,有一个参数是当前选择的日期

data () {

return {

pickerOptions: {}, // 日期设置对象

}

},

created {

// disabledDate 为true表示不可选,false表示可选

this.pickerOptions.disabledDate = disabledDate (time) {

// 设置可选择的日期为今天之后的一个月内

let curDate = (new Date()).getTime()

// 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算

let day = 30 * 24 * 3600 * 1000

let dateRegion = curDate + day

return time.getTime() < Date.now() - 8.64e7 || time.getTime() > dateRegion

// 设置选择的日期小于当前的日期,小于返回true,日期不可选

// return time.getTime() < Date.now() - 8.64e7

},

}

看一下应用的效果, 可选范围一个月,8是当前日期

  

可选范围今天及之后的日期

  

方法补充说明: 上面的写法是之前整理的,写的比较随意,在项目中这样写不太好,下面写一个详细版

// 页面引入组件, 加上picker-options这个参数

v-model="exCheckDate"

type="date"

:picker-options="pickerOptions"

value-format="yyyy-MM-dd"

placeholder="Please select">

// js中定义范围

// picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期

data () {

return {

pickerOptions: {

// disabledDate是一个函数,参数是当前选中的日期值,这个函数需要返回一个Boolean值,

disabledDate: (time) => {

// 如果函数处理比较简单,可以直接在这里写逻辑方法

// return time.getTime() < Date.now() - 8.64e7

// 如果函数里处理的数据比较麻烦,也可以单独放在一个函数里,避免data数据太臃肿

return this.dealDisabledDate(time)

}

}, // 日期设置对象

}

},

created {

},

methods: {

// 单独处理时间的函数

dealDisabledDate (time) {

// time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数

// Date.now()是把今天的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒数,这样比较好比较

// return的值,true是不可以操作选择,false可以操作选择,比如下面这个判断就只能选择今天之后的时间

return time.getTime() < Date.now()

// 这里减8.64e7的作用是,让今天的日期可以选择,如果不减的话,今天的日期就不可以选择,判断中写<= 也是没用的,一天的毫秒数就是8.64e7

// return time.getTime() <= Date.now()

// return time.getTime() < Date.now() - 8.64e7

}

}

                                        

这样写了,看着应该更清晰一些吧

&lbrack;转&rsqb;vue Element UI走马灯组件重写

https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

普通element ui table组件的使用

1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

element ui step组件在另一侧加时间轴显示

这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

Element UI table组件源码分析

本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

封装一个优雅的element ui表格组件

现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

Element UI 中组件this&period;&dollar;message报错

最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

InkWell容器 和 官方自带日期组件 和第三方 日期格式转换组件

带点击事件的容器 InkWell( child: Text('时间'), onTap: _showTimePicker,),   Flutter 日期和时间戳 日期转化成时间戳: var now = ...

Jquery ui datepicker 设置日期范围，如只能隔3天

最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

随机推荐

lnmp安装

一.准备工作 需要的安装包都是从官网下载的,系统centos6.6 nginx-1.10.1.tar.gz php-5.6.24.tar.gz mysql-5.5.32.tar.gz 所有的包都一传入 ...

webapi 中使用 protobuf

相比json来说,好处是速度更快,带宽占用更小.其效果大致等于json+Gzip. 在webapi中使用protobuf的方法为: 引用nuget包 Install-Package protobuf- ...

aspx文件移动到新建的文件夹中设置路径的问题

项目中仅仅把aspx移动到想要的文件夹内是会出错的,不用想也知道是路径问题.这里我就说这个路径该如何去修改. 两个地方需要修改:1.母版路径修改方法:

作者 彭东林pengdonglin137@163.com 平台 TQ2440内核Linux4.9 概述 一直想抽时间学习一下DMA驱动,今天就以S3C2440为例,这款芯片的DMA控制器足够简单,也比 ...