其他分享
首页 > 其他分享> > 016_DateTimePicker日期时间选择器

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. 运行项目

标签:picker,00,string,日期,016,Date,new,DateTimePicker,选择器
来源: https://blog.csdn.net/aihiao/article/details/123053373