目前官方的日期默认是当前日期,打开之后长这样子:现在是三月13日,但是有的需求是当前日期在后面。

就像这样:

代码如下:

default-value是设置当前日期默认值的。"timeDefaultShow"是在data里面的值,而不是方法。
<el-date-picker
v-model="pickerDate"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
:picker-options="pickerBeginDateBefore"
:default-value="timeDefaultShow"
end-placeholder="结束日期"
size="small"
class="margin-right-10">
</el-date-picker>
data() {
return {
pickerBeginDateBefore:{
disabledDate(time) {
return time.getTime() > Date.now();
}
},
timeDefaultShow:'',
}
}

在created或mounted(也就是页面第一次加载时)更新timeDefaultShow:

上个月的当前日期为默认值

that.timeDefaultShow = new Date();
that.timeDefaultShow.setMonth(new Date().getMonth() - 1);

打开就是上面的效果了。

再说当前日期后面的日期不能选择:

(上面代码中有这句话)pickerBeginDateBefore也是一个值。附上官网链接(第一个例子里面有该方法):日期选择器

elementui 日期选择器设置当前默认日期(picker-options),以及当前日期以后的无法选择(default-value)的更多相关文章

  1. element-ui时间选择器--设置禁止选择的时间

    场景需求:开始日期不能小于今天,在今天之前的日期禁止选择,结束日期不能小于开始日期,开始日期之前的日期禁止选择. 效果图: element-ui的时间选择器中,有一个picker-options的属性 ...

  2. 基于bootstrap模态框的日期选择器

    近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...

  3. Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker

    原文:Android零基础入门第57节:日期选择器DatePicker和时间选择器TimePicker 在实际开发中,经常会遇见一些时间选择器.日期选择器.数字选择器等需求,那么从本期开始来学习And ...

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

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

  5. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  6. 日期选择器——java

    转载:http://zgdeng.iteye.com/blog/1405650 代码如下: import java.awt.BasicStroke; import java.awt.BorderLay ...

  7. 转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)

    1.picker写法(支持日期Date.时间Time和城市自定义) wxml文件 <picker bindchange="bindPickerChange" value=&q ...

  8. element-ui日期组件DatePicker设置日期选择范围Picker Options

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

  9. ElementUI 日期选择器 datepicker 选择范围限制

    在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期. 查阅官方文档,我们发现它介绍的并不详细,下面我们就来 ...

随机推荐

  1. linux面试集

    shell:1.$# 和 $*之类的特殊变量 特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数.n是一个数字,表示第几个参数.例如,第一个参数就是$1 $# 传递给脚本或 ...

  2. Linux中的代码编辑器vim

    Vim的三种工作模式 命令行模式 插入模式 底行模式 Vim 的命令行模式 命令行模式是进入vim后的初始模式,在该模式下主要是使用方向键来移动光标的位置,并通过相应的命令来进行文字的编辑. 切换方法 ...

  3. php 操作 mysql 实现批量执行mysql语句 mysql文件

    <?php /** * 批量运行sql文件 * 正则分隔是重点 preg_split("/;[\r\n]+/", filecontent) */ $config = requ ...

  4. DSP资源分享贴

    DSP资源分享 [2017.5.16 更新] 分享资源共同学习.以前的资源很多人都说用不了了,我会陆续补充,逐步完善.这里不单单分享DSP的,设计基础的,还有其他的电子相关的比较好的资源吧主都和您分享 ...

  5. C++基础 new和delete

    1.new delete 的使用 (1)基本数据类型 ); delete p; int *p = (int *)malloc(sizeof(int)); *p = ;free(p); (2)数组 ]; ...

  6. ABAP CDS - SELECT, association

    ABAP CDS - SELECT, association Syntax ... ASSOCIATION [ [min..max] ] TO target [AS _assoc] ON cond_e ...

  7. 文档-linux io模式及select,poll,epoll

    文档-Linux IO模式详解 1. 概念说明 在进行解释之前,首先要说明几个概念:- 用户空间和内核空间- 进程切换- 进程的阻塞- 文件描述符- 缓存 I/O 1.1 用户空间与内核空间 现在操作 ...

  8. 9,K-近邻算法(KNN)

    导引: 如何进行电影分类 众所周知,电影可以按照题材分类,然而题材本身是如何定义的?由谁来判定某部电影属于哪 个题材?也就是说同一题材的电影具有哪些公共特征?这些都是在进行电影分类时必须要考虑的问 题 ...

  9. 11.1,nginx集群概念

    集群介绍 为什么要用集群      

  10. Python的函数一

    一.函数的定义 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率.Python提供了许多内建函数,比如print().可以自己创建函数,这被 ...