element ui 的时间选择控件

时间:2024-03-08 19:14:37

昨天为了满足项目需求,挖掘了时间控件的一些技巧。
需满足的功能: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:\'\'  
  }
},