效果展示:

代码如下:

<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. pythonchallenge总述

    Pythonchallenge是一个过关式的解谜站点,使用的是经典在线解谜站点Not Pr0n的模式:根据提示找出下一关的网页地址.和Not Pr0n不同的是,在每一关里你都需要编写程序来寻找答案.虽 ...

  2. 90% 的 Java 程序员都说不上来的为何 Java 代码越执行越快(2)- TLAB预热

    经常听到 Java 性能不如 C/C++ 的言论,也经常听说 Java 程序需要预热,那么其中主要原因是啥呢? 面试的时候谈到 JVM,也有很多面试官喜欢问,为啥 Java 程序越执行越快呢? 一般人 ...

  3. nginx反向代理signalr

    asp.net core应用常常要通过nginx来反向代理, 普通的web api配置asp.net core反向代理比较常见, 如果在应用中集成了signalr, 如何使用nginx来反代呢? ng ...

  4. 如何安装Python 3.9.1?

    首先打开浏览器输入网址:https://www.python.org或者通过百度搜索python进入Python官网. 选择Downloads,弹出最新版本下载链接,当前版本为3.9.1,如图所示: ...

  5. Java创建线程四种方式

    1.继承Thread类 public class MyThread extends Thread { public MyThread() { } public void run() { for(int ...

  6. MyBatis逆向工程生成dao层增删改查方法解释使用(转载)

    int countByExample(BUserExample example); //根据条件查询数量 /** * 示例 * public int countByExample() { * BUse ...

  7. Codeforces Round #579 (Div. 3) B Equal Rectangles、C. Common Divisors

    B Equal Rectangles 题意: 给你4*n个数,让你判断能不能用这个4*n个数为边凑成n个矩形,使的每个矩形面积相等 题解: 原本是想着用二分来找出来那个最终的面积,但是仔细想一想,那个 ...

  8. HDU 4336 Card Collector(状压 + 概率DP 期望)题解

    题意:每包干脆面可能开出卡或者什么都没有,一共n种卡,每种卡每包爆率pi,问收齐n种卡的期望 思路:期望求解公式为:$E(x) = \sum_{i=1}^{k}pi * xi + (1 - \sum_ ...

  9. 101道Numpy、Pandas练习题

    无论是数据分析还是机器学习,数据的预处理必不可少. 其中最常用.最基础的Python库非numpy和pandas莫属,很多初学者可能看了很多教程,但是很快就把用法忘光了. 光看不练假把式,今天向大家推 ...

  10. Github access token

    Github access token https://github.com/settings/tokens https://docs.github.com/en/free-pro-team@late ...