016_DateTimePicker日期时间选择器

1. DateTimePicker日期时间选择器

1.1. 在同一个选择器里选择日期和时间。

1.2. DateTimePicker由DatePicker和TimePicker派生, Picker Options或者其他选项可以参照DatePicker和TimePicker。

1.3. 日期时间选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	date(DateTimePicker) / array(DateTimeRangePicker)	无	无
readonly	完全只读	boolean	无	false
disabled	禁用	boolean	无	false
editable	文本框可输入	boolean	无	true
clearable	是否显示清除按钮	boolean	无	true
size	输入框尺寸	string	large / small / mini	无
placeholder	非范围选择时的占位内容	string	无	无
start-placeholder	范围选择时开始日期的占位内容	string	无	无
end-placeholder	范围选择时开始日期的占位内容	string	无	无
time-arrow-control	是否使用箭头进行时间选择	boolean	无	false
type	显示类型	string	year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd HH:mm:ss
align	对齐方式	string	left / center / right	left
popper-class	DateTimePicker下拉框的类名	string	无	无
picker-options	当前时间日期选择器特有的选项参考下表	object	无	{}
range-separator	选择范围时的分隔符	string	无	'-'
default-value	可选, 选择器打开时默认显示的时间	Date	可被new Date()解析	无
default-time	选中日期后的默认具体时刻	非范围选择时: string / 范围选择时: string[]	非范围选择时: 形如12:00:00的字符串; 范围选择时: 数组, 长度为2, 每项值为字符串, 形如12:00:00, 第一项指定开始日期的时刻, 第二项指定结束日期的时刻。不指定会使用时刻00:00:00	无
value-format	可选, 绑定值的格式。不指定则绑定值为Date对象	string	见日期格式	无
name	原生属性	string	无	无
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	无	false
prefix-icon	自定义头部图标的类名	string	无	el-icon-date
clear-icon	自定义清空图标的类名	string	无	el-icon-circle-close

1.4. Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项, 需要传入{ text, onClick }对象用法参考demo或下表	Object[]	无	无
disabledDate	设置禁用状态, 参数为当前日期, 要求返回Boolean	Function	无	无
cellClassName	设置日期的className	Function(Date)	无	无
firstDayOfWeek	周起始日	Number	1到7	7

1.5. Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	无	无
onClick	选中后的回调函数, 参数是vm, 可通过触发'pick'事件设置选择器的值。例如: vm.$emit('pick', new Date())	function	无	无

1.6. 事件

事件名称	说明	回调参数
change	用户确认选定的值时触发	组件绑定值。格式与绑定值一致, 可受value-format控制
blur	当input失去焦点时触发	组件实例
focus	当input获得焦点时触发	组件实例

1.7. 方法

事件名称	说明
focus	使input获得焦点

1.8. Slots

Name	说明
range-separator	自定义分隔符

2. DateTimePicker日期时间选择器例子

2.1. 使用脚手架新建一个名为element-ui-datetimepicker的前端项目, 同时安装Element插件。

 2.2. 编写App.vue

<template>
  <div id="app">
    <h1>日期和时间点</h1>
    <h4>通过设置type属性为datetime, 即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与Date Picker相同。</h4>
    <div style="display: inline-block;">
      <span>默认: </span>
      <el-date-picker v-model="val11" type="datetime" placeholder="选择日期时间"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>带快捷选项: </span>
      <el-date-picker v-model="val12" type="datetime" placeholder="选择日期时间" align="right" :picker-options="po1"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>设置默认时间: </span>
      <el-date-picker v-model="val13" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>
    </div>

    <h1>日期和时间范围</h1>
    <h4>设置type为datetimerange即可选择日期和时间范围。</h4>
    <div style="display: inline-block;">
      <span>默认: </span>
      <el-date-picker v-model="val21" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>带快捷选项: </span>
      <el-date-picker v-model="val22" type="datetimerange" :picker-options="po2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
    </div>

    <h1>默认的起始与结束时刻</h1>
    <h4>使用datetimerange进行范围选择时, 在日期选择面板中选定起始与结束的日期, 默认会使用该日期的00:00:00作为起始与结束的时刻; 通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组, 数组每项值为字符串, 形如12:00:00, 其中第一项控制起始日期的具体时刻, 第二项控制结束日期的具体时刻。</h4>
    <div style="display: inline-block;">
      <span>起始日期时刻为12:00:00</span>
      <el-date-picker v-model="val31" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']"></el-date-picker>
    </div>
    <div style="display: inline-block; margin-left: 20px;">
      <span>起始日期时刻为12:00:00, 结束日期时刻为08:00:00</span>
      <el-date-picker v-model="val32" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00', '08:00:00']"></el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val11: '',
      val12: '',
      val13: '',
      po1: {
        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)
          }
        }]
      },
      val21: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      val22: '',
      po2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            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])
          }
        }]
      },
      val31: '',
      val32: ''
    }
  }
}
</script>

2.3. 运行项目