Element - The world's most popular Vue UI framework

 代码：

<el-form-item label="时间" prop="pushDate">
    <el-date-picker
      v-model="form.pushDate"
      type="date"
       placeholder="选择日期"
       :disabled="disabledDateEdit"
       :picker-options="pickerOptions"
       @input="inputDate"
    />
</el-form-item>
<el-form-item label="" prop="pushDateTime">
    <el-time-picker
        value-format="HH:mm:ss"
        format="HH:mm:ss"
        v-model="form.pushDateTime"
        placeholder="选择时间"
        :disabled="disabledTimeEdit"
        @input="inputTime"
    />
</el-form-item>

import { unixTimeToDateTime ,unixTimeToDate } from "@/utils/date";

pickerOptions: {
    disabledDate(date) {
    //这里设置今天以前的不可选
        return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
    }
},

// 改变日期
inputDate(e){
    this.form.pushDate = unixTimeToDate(Date.parse(e)).substring(0,10)
    this.$forceUpdate()
},
// 改变时间
inputTime(e){
    this.form.pushDateTime = e
    this.$forceUpdate()
},

点此查看全部文字教程、视频教程、源代码

1. 前言

日期选择器用来选择一个或者多个日期，例如选择某个人的生日，再例如选择订单的创建日期，应用还是非常普遍的。

本篇就来介绍下Element提供的日期选择器的常见用法。

2. 基本用法

编写html代码如下：

	选择任意日期：
    <el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange"> 
    </el-date-picker>

如上代码会显示一个日期选择器，且选中日期的值绑定了value变量，且当选中日期发生变化时，会触发dateChange方法。

对应效果如下：

3. 日期格式化

有时候我们需要，按照我们设定的格式，来处理绑定的日期值，可以通过value-format属性来指定格式，常用的格式化字符串包括：

• yyyy 年
• MM 月
• WW 周
• dd 日
• HH 时 (24小时制)
• hh 时 (12小时制)
• mm 分钟
• ss 秒

所以，如果按照MySQL数据库对日期字符串格式化要求，我们编写代码如下：

	日期格式化:{{value}}
    <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
    </el-date-picker>

选中某个日期后，对应效果如下，可见value已经被格式化：

4. 选择其他日期单位

除了选中某一天，有时候我们还会面临，选择某一周、某个月份、某个年份的需求，此时可以通过type属性来设置。

例如：

	选择其他日期单位
    <el-date-picker v-model="valueWeek" type="week" format="yyyy 第WW周" placeholder="选择周">
    </el-date-picker>
    <el-date-picker v-model="valueMonth" type="month" placeholder="选择月">
    </el-date-picker>
    <el-date-picker v-model="valueYear" type="year" placeholder="选择年">
    </el-date-picker>

效果：

5. 选择多个日期

el-date-picker还支持选中多个日期，通过将type属性值设置为dates即可。

	选择多个日期
    <el-date-picker type="dates" v-model="valueDates" placeholder="选择一个或多个日期">
    </el-date-picker>

效果：

6. 带快捷选项

有时候，我们希望可以直接选择昨天、上周、上月，这些经常使用的日期不需要我们去查找，就能快速选中，此时可以借助picker-options属性来实现。

代码：

	带快捷选项
    <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="选择日期">
    </el-date-picker>

	  optionsFast: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

通过上述代码，点击text对应按钮，即可将我们代码编写的值选中，效果如下：

7. 禁用部分日期

通过picker-options还可以禁用部分日期，代码：

 	禁用部分日期
    <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsDisable" placeholder="选择日期">
    </el-date-picker>

 	  optionsDisable: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }

效果如下：

8. 小结

el-date-picker日期选择器提供的功能很全面，实现起来也挺简单，还是比较好用的。

效果如下：

 <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>

element 的时间范围筛选器组件样式更改

/* 日历样式 */
.el-picker-panel {
  background: #1b3e6f !important;
  color: #ffffff;
  border: 1px solid #93bee7 !important;
}
.el-picker-panel .el-date-range-picker__time-header {
  border-bottom: 1px solid #93bee7 !important;
}
.el-picker-panel__icon-btn {
  width: 8px;
  height: 10px;
  color: #5a81fd !important;
}
.el-picker-panel .el-input__inner {
  background-color: #19466f;
  border: #75ebf2;
  color: #e8fdff;
}
.el-picker-panel .el-date-range-picker__content.is-left,
.el-picker-panel .el-date-range-picker__content.is-right {
  border-right: 1px solid #93bee7 !important;
  background: url(./images/矩形.png) center center;
  background-size: 100% 100%;
}
.el-picker-panel .el-date-range-picker__header {
  color: #75ebf2;
}
.el-picker-panel .el-date-table th {
  color: #c3e3ec;
}
.el-picker-panel .el-date-table td.available {
  width: 14px;
  height: 14px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #6ce6cb;
}
.el-picker-panel .el-date-table td.available:hover {
  color: #ffffff;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #4c77b3 !important;
}
.el-time-panel {
  background-color: #1b3e6f !important;
  border: 1px solid #93bee7 !important;
}
.el-time-spinner__item {
  color: #c3e3ec !important;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: #4c77b3 !important;
}
.el-time-panel__btn {
  color: #adcfff !important;
}
.el-picker-panel__footer {
  background-color: #1b3e6f !important;
}
.el-picker-panel .el-button {
  width: 36px;
  height: 18px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #1475e3;
}
.el-icon-d-arrow-left {
  color: #1475e3 !important;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #1475e3 !important;
  margin-left: -20px !important;
}
.el-button + .el-button {
  width: 92px;
  height: 40px;
  background: url(./images/圆角矩形.png) center center !important;
  background-size: 115% 130% !important;
  border: 1px solid #1475e3 !important;
  border-radius: 4px !important;
}
.el-button {
  width: 92px;
  height: 40px;
  border: 1px solid #1475e3;
  border-radius: 4px;
}
.el-button--text {
  display: none;
  width: 92px;
  height: 40px;
  border: 1px solid #1475e3;
  border-radius: 4px;
}
.el-button.is-disabled.is-plain,
.el-button.is-disabled.is-plain:focus,
.el-button.is-disabled.is-plain:hover {
  width: 92px;
  height: 40px;
  background: url(./images/圆角矩形.png) center center !important;
  background-size: 115% 130% !important;
  border: 1px solid #1475e3 !important;
  border-radius: 4px !important;
}
.el-button--text,
.el-button--text.is-disabled,
.el-button--text.is-disabled:focus,
.el-button--text.is-disabled:hover,
.el-button--text:active {
  display: none !important;
}
.el-date-table th {
  border-bottom: 1px solid #293f6f !important;
}
/* 时间筛选 */
.el-time-panel__content::after,
.el-time-panel__content::before {
  border-bottom: 1px solid #293f6f !important;
  border-top: 1px solid #293f6f !important;
}
.el-time-panel {
  background-color: #040d27 !important;
}
.el-time-panel__btn.confirm {
  background-color: #040d27 !important;
  color: #1475e3 !important;
}
.el-time-panel__btn.cancel {
  background-color: #040d27 !important;
  color: #6397d1 !important;
}
.el-time-panel__footer {
  border-top: none !important;
}
.el-time-panel {
  border: none;
  border-top: 2px solid #293f6f !important;
}