zoukankan      html  css  js  c++  java
  • 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:''  
      }
    },

  • 相关阅读:
    Yii框架2.0 数据库操作初接触
    Yii框架2.0的视图和widgets表单的使用
    Yii框架2.0的安装过程
    监控之snmpd 服务
    在HTML里面HEAD部分的META元素要表达的内容是什么
    被table单元格colspan属性折磨了
    excel模版从xp复制到win7系统后出现错误 运行时错误 '429' ActiveX 部件不能创建对象
    oracle左连接连表查询
    Nginx 关闭防火墙
    左连接不能与or否则in连用
  • 原文地址:https://www.cnblogs.com/wwx875075608/p/9092412.html
Copyright © 2011-2022 走看看