element-ui日期选择组件

el-date-picker 组件的引入

---

---

• @change ： 为组件绑定选择日期确定之后的事件
• v-model ： 数据绑定，日期存在这里，例如（2019-01-02~2019-03-15），但是数据绑定仅仅是作为显示作用，真正的数据可以通过change事件来获得
• type： 选择器的样式，daterange 同时出现两个月份
• :start-placeholder： 绑定第一个选择器的默认提示语言 仅仅是没有选择的时候提示，选择了之后就不在显示
• :end-placeholder： 绑定第二个选择器的默认提示语言
• :range-separator="~" : 连接符号
• :picker-options="pickerOptions1" : 限制条件

---

日期组件（默认当天之前可选）.png

---

今天之前不能选择.png

限制条件

• 实现今日之前可选
• 实现选择的快捷建（ 注意如何实现今天的前一天为截止日期）

     pickerOptions1: {

          disabledDate(time) {
     /// 不可选天数的设置
       // return time.getTime() >  new Date(new Date().toLocaleDateString()).getTime();  /// 今天之后不能选择
          // return time.getTime() > Date.now(); /// 今天之前不可选
          return time.getTime()   > new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000;  ///  今天的前一天开始不能选择 （比如今天30号，只能选择到29号，30号后面的都不能选择）

          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date() ; //  结束的日期   new Date(new Date().toLocaleDateString()).getTime()-24*60*60*1000 （一直当今天的前一天）
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date() ;
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end =new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

---

• 提示文字（start-placeholder end-placeholder） 和 选择日期显示的文字 （v-modal="timer"）是不一样的。
• 如果是要刷新之后清除当前的日期，那么 this.timer = null; 即可；亲测有效！