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:''　　
　　}
},