Element UI 的时间及日期选择器

TimePicker 时间选择器

用于选择或输入日期。

• 固定时间点
  提供几个固定的时间点供用户选择。
  使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长。

  
  
  
  

• 任意时间点
  可以选择任意时间。
  使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

  
  
  
  

• 固定时间范围
  若先选择开始时间，则结束时间内备选项的状态会随之改变。

  
  
  
  

• 任意时间范围
  可选择任意的时间范围。
  添加is-range属性即可选择时间范围，同样支持arrow-control属性。

  
  
  
  

• Attributes

  
  
  
  
  
  

• Time Select Options

  
  

• Time Picker Options

  
  

• Events

  
  

• Methods

  
  

DatePicker 日期选择器

用于选择或输入日期。

• 选择日
  以「日」为基本单位，基础的日期选择控件。
  基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数。

  
  
  
  

• 其他日期单位
  通过扩展基础的日期选择，可以选择周、月、年或多个日期。

  
  
  
  

• 选择日期范围
  可在一个选择器中便捷地选择一个时间范围。
  在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

  
  
  
  

• 选择月份范围
  可在一个选择器中便捷地选择一个月份范围。
  在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用unlink-panels属性解除联动。

  
  
  
  

• 日期格式
  使用format指定输入框的格式；使用value-format指定绑定值的格式。
  默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2019年1月2日 03:04:05 为例：
  注：请注意大小写。

  
  
  
  
  
  
  
  

• 默认显示日期
  在选择日期范围时，指定起始日期和结束日期的默认时刻。
  选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组，其中的值为形如12:00:00的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。

  
  
  
  

• Attributes

  
  
  
  
  
  

• Picker Options

  
  

• Shortcuts

  
  

• Events

  
  

• Methods

  
  

DateTimePicker 日期时间选择器

在同一个选择器里选择日期和时间。
DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

• 日期和时间点
  通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

  
  
  
  

• 日期和时间范围
  设置type为datetimerange即可选择日期和时间范围。

  
  
  
  

• 默认的起始与结束时刻
  使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

  
  
  
  

• Attributes

  
  
  
  
  
  

• Picker Options

  
  

• Shortcuts

  
  

• Events

  
  

• Methods

  
  

• Slots