效果展示:

代码如下:

<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. Native vlan

    1.本征 VLAN即Native Vlan Native Vlan和其他Vlan的另外一个区别在于:非Native Vlan在trunk中传输数据时要被添加Vlan标记的(如dot1q或者isl),但 ...

  2. 深入Jar包:Gradle构建可执行jar包与访问jar包中文件夹与文件

    前言 Java的跨平台功能听起来很诱人可口,号称"Write Once,Run Everywhere",实际上是"Run Once,Debug Everywh" ...

  3. LaTeX 环境安装&编译器配置

    推荐网站:https://www.latexstudio.net/articles/ (基本所有的latex疑惑都可以在这里得到解决) 入门视频:两小时短小精悍,让你轻松入门,https://www. ...

  4. HDU -1151 二分匹配与有向无环图不相交最小路径覆盖数

    题意: 考虑一个小镇,那里的所有街道都是单向的,并且每条街道都从一个路口通往另一个路口.还众所周知,从一个十字路口开始,穿过城镇的街道,您将永远无法到达同一十字路口,即,城镇的街道没有环. 基于这些假 ...

  5. codeforces Looksery Cup 2015 C. The Game Of Parity

    There are n cities in Westeros. The i-th city is inhabited by ai people. Daenerys and Stannis play t ...

  6. Codeforces Global Round 7 D2. Prefix-Suffix Palindrome (Hard version)(Manacher算法+输出回文字符串)

    This is the hard version of the problem. The difference is the constraint on the sum of lengths of s ...

  7. C++ new delete malloc free

    title: C++ new delete malloc free date: 2020-03-10 categories: c++ tags: 语法 C++的new delete malloc fr ...

  8. exgcd&&中国剩余定理专题练习

    hdu1573求中国剩余定理解的个数 #include <iostream> #include <cstdio> using namespace std; int a[100] ...

  9. 使用 js 实现十大排序算法: 基数排序

    使用 js 实现十大排序算法: 基数排序 基数排序 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  10. VSCode & SQL

    VSCode & SQL MySQL MySQL https://marketplace.visualstudio.com/items?itemName=formulahendry.vscod ...