效果展示:

代码如下:

<el-date-picker v-model="listQuery.times" type="daterange" range-separator="-" start-placeholder="开始日期" unlink-panels
end-placeholder="结束日期" value-format="yyyy-MM-dd">
</el-date-picker>

代码解释:

1、type:显示类型。值有year/month/date/dates/week/datetime/datetimerange/daterange/monthrange。type="date"表示选择日,type="week"表示选择周,type="month"表示选择月,type="year"表示选择年,type="dates"表示选择多个日期,type="daterange"表示日期范围,type="monthrange"表示月份范围,

2、value-format:指定绑定值的格式。不指定则绑定值为 Date 对象。

3、unlink-panels:在范围选择器里取消两个日期面板之间的联动

由于日期范围涉及两个值,所以绑定一个数组;

data() {
return {
listQuery: {
date: [],
}
}
},

DatePicker日期选择器的使用的更多相关文章

  1. element-ui DatePicker 日期选择器 让结束日期大于开始日期

    element-ui  DatePicker 日期选择器 <el-date-picker v-model="addForm.startDate" type="dat ...

  2. DatePicker 日期选择器

    用于选择或输入日期 选择日 以「日」为基本单位,基础的日期选择控件 基本单位由type属性指定.快捷选项需配置picker-options对象中的shortcuts,禁用日期通过 disabledDa ...

  3. Android中DatePicker日期选择器的使用和获取选择的年月日

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  4. ElementUI datepicker日期选择器时间选择范围限制

    ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 最近做项目用到了datepicker,需要对日期选择做一些限制, ...

  5. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  6. HTML5调用手机的Datepicker(日期选择器)

    HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...

  7. element-ui DatePicker 日期格式处理

    1.使用DatePicker 日期选择器得到的日期格式是这样的 解决方案,添加 value-format="yyyy-MM-dd" <el-date-picker type= ...

  8. 日期选择器:jquery datepicker的使用

    helloweba.com 作者:月光光 时间:2012-04-08 21:05 标签: jquery  datepicker  jquery ui     在jquery ui中,提供了一个非常实用 ...

  9. Android开发UI之EditText+DatePicker带日期选择器的编辑框

    1. 声明EditText变量,并关联到相应控件上 private EditText sellStartTime; private EditText sellEndTime; sellStartTim ...

随机推荐

  1. 常用的trigger表达式

    1.Name:Incoming traffic on interface {#SNMPVALUE} is greater than 300Mb, now is {ITEM.VALUE} Express ...

  2. 织梦dedecms用户注册时笔名去掉的方法

    修改目的:用户注册时不用输入笔名,实现系统自动同步用户名和用户笔名. 负责织梦dedecms用户注册的php文件是member/reg_new.php ,不难发现,用户注册时的用户名$userid,和 ...

  3. HDU5286 wyh2000 and sequence【分块 均摊复杂度】

    HDU5286 wyh2000 and sequence 题意: 给出长为\(N\)的序列\(A_1,A_2,A_3,\cdots,A_n\),\(q\)次询问,每次询问给出区间\([L,R]\),假 ...

  4. hdu5627 Clarke and MST (并查集)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submission ...

  5. C#之抛异常

    using System; namespace Demo { class Program { static void Main(string[] args) { try { BLLLayer(); } ...

  6. OpenStack Train版-9.安装neutron网络服务(计算节点)

    在计算节点安装neutron网络服务(computel01计算节点192.168.0.20)安装组件 yum install openstack-neutron-linuxbridge ebtable ...

  7. ArcGIS处理栅格数据(二)

    五.栅格数据的配准 1.有参考图层 ① 在ArcMap里面添加需要配准的栅格数据集和参考数据集. ② 在ArcMap里面添加"地理配准"工具条. 添加成功后如下图所示: ③ 将需要 ...

  8. JVM ZeroTLAB 是什么意思呢?

    ZeroTLAB 是 JVM 的一个布尔型 Flag,意思是是否将新创建的 TLAB 内的所有字节归零. 默认:false 举例:-XX:+ZeroTLAB 当分配出来 TLAB 之后,根据 Zero ...

  9. mysql+python+pymysql的一些细节问题

    报错 (1044, "Access denied for user 'erio'@'localhost' to database 'library'") 就是权限问题了,没什么好说 ...

  10. hihocoder 1631

    时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There are many homeless cats in PKU campus. They are all happy ...