element ui 的时间选择控件

昨天为了满足项目需求，挖掘了时间控件的一些技巧。
需满足的功能：1如果用户不选择时间，显示一个默认时间
                         2时间选择器打开，显示的是上个月和这个月的日期
                         3不能选择new Date()之后的时间
                         4传给后台时间数据为 2018-05-25格式

　　<el-date-picker
　　　　v-model="value7"
　　　　type="daterange"
　　　　range-separator="至"
　　　　start-placeholder="开始日期"
　　　　end-placeholder="结束日期"
　　　　unlink-panels
　　　　value-format="yyyy-MM-dd"
　　　　:default-value="timeDefaultShow"
　　　　:picker-options="pickerOptions1">
　　</el-date-picker>

原插件：

原插件 显示的是      本月和下个月的日期，而需求是要显示本月和上个月的日期。

default-value

可选，选择器打开时默认显示的时间

Date

可被new Date()解析

—

   

配置项手册

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

刚进来默认显示 new  Date()之前30天 -----new  Date()
通过改变value7
 this.value7=[ new Date((Date.now()-3600 * 1000 * 24 * 30)).format("yyyy-MM-dd"), new Date().format("yyyy-MM-dd") ] ;
format 方法写在Date构造函数的原型链上。因为我们可以通过这样将 new Date()生成的  Fri May 25 2018 00:00:00 GMT 0800 (中国标准时间)  转换为 2018-05-26
这样才能满足我们的需求，这只是让我们自己放上去的时间满足输出格式需求，
我们还需要利用插件的      value-format="yyyy-MM-dd"    使得我们选择的时间也可以输出相同格式。

value-format

可选，绑定值的格式。不指定则绑定值为 Date 对象

string

见日期格式

—

Date.prototype.format = function(fmt) {
　　var o = {
　　"M+" : this.getMonth()+1, //月份
　　"d+" : this.getDate(), //日
　　"h+" : this.getHours(), //小时
　　"m+" : this.getMinutes(), //分
　　"s+" : this.getSeconds(), //秒
　　"q+" : Math.floor((this.getMonth()+3)/3), //季度
　　"S" : this.getMilliseconds() //毫秒
　　};
　　if(/(y+)/.test(fmt)) {
　　　　fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
　　}
　　for(var k in o) {
　　if(new RegExp("("+ k +")").test(fmt)){
　　　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
　　　　}
　　}
　　return fmt;
}

不能选择new Date()之后的时间  配置项手册 default-value  设置disabledDate

:default-value="timeDefaultShow" 

data () {
　　return {
　　　　msg: 'Welcome to Your Vue.js App',
　　　　domainName: '',
　　　　value7: '',
　　　　time:'',
　　　　domainList: [],
　　　　pickerOptions1: {
　　　　disabledDate(time) {
　　　　　　return time.getTime() > Date.now();
　　　　}
　　},
　　timeDefaultShow:''　　
　　}
},