DateTimePicker 日期时间选择器

2018/03/13 06:51
阅读数 80

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

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

日期和时间点

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

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">默认</span>
 4     <el-date-picker
 5       v-model="value1"
 6       type="datetime"
 7       placeholder="选择日期时间">
 8     </el-date-picker>
 9   </div>
10   <div class="block">
11     <span class="demonstration">带快捷选项</span>
12     <el-date-picker
13       v-model="value2"
14       type="datetime"
15       placeholder="选择日期时间"
16       align="right"
17       :picker-options="pickerOptions1">
18     </el-date-picker>
19   </div>
20 </template>
21 
22 <script>
23   export default {
24     data() {
25       return {
26         pickerOptions1: {
27           shortcuts: [{
28             text: '今天',
29             onClick(picker) {
30               picker.$emit('pick', new Date());
31             }
32           }, {
33             text: '昨天',
34             onClick(picker) {
35               const date = new Date();
36               date.setTime(date.getTime() - 3600 * 1000 * 24);
37               picker.$emit('pick', date);
38             }
39           }, {
40             text: '一周前',
41             onClick(picker) {
42               const date = new Date();
43               date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
44               picker.$emit('pick', date);
45             }
46           }]
47         },
48         value1: '',
49         value2: ''
50       };
51     }
52   };
53 </script>
View Code

日期和时间范围

设置typedatetimerange即可选择日期和时间范围

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">默认</span>
 4     <el-date-picker
 5       v-model="value3"
 6       type="datetimerange"
 7       range-separator="至"
 8       start-placeholder="开始日期"
 9       end-placeholder="结束日期">
10     </el-date-picker>
11   </div>
12   <div class="block">
13     <span class="demonstration">带快捷选项</span>
14     <el-date-picker
15       v-model="value4"
16       type="datetimerange"
17       :picker-options="pickerOptions2"
18       range-separator="至"
19       start-placeholder="开始日期"
20       end-placeholder="结束日期"
21       align="right">
22     </el-date-picker>
23   </div>
24 </template>
25 
26 <script>
27   export default {
28     data() {
29       return {
30         pickerOptions2: {
31           shortcuts: [{
32             text: '最近一周',
33             onClick(picker) {
34               const end = new Date();
35               const start = new Date();
36               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
37               picker.$emit('pick', [start, end]);
38             }
39           }, {
40             text: '最近一个月',
41             onClick(picker) {
42               const end = new Date();
43               const start = new Date();
44               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
45               picker.$emit('pick', [start, end]);
46             }
47           }, {
48             text: '最近三个月',
49             onClick(picker) {
50               const end = new Date();
51               const start = new Date();
52               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
53               picker.$emit('pick', [start, end]);
54             }
55           }]
56         },
57         value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
58         value4: ''
59       };
60     }
61   };
62 </script>
View Code

默认的起始与结束时刻

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

 1 <template>
 2   <div class="block">
 3     <span class="demonstration">起始日期时刻为 12:00:00</span>
 4     <el-date-picker
 5       v-model="value5"
 6       type="datetimerange"
 7       start-placeholder="开始日期"
 8       end-placeholder="结束日期"
 9       :default-time="['12:00:00']">
10     </el-date-picker>
11   </div>
12   <div class="block">
13     <span class="demonstration">起始日期时刻为 12:00:00,结束日期时刻为 08:00:00</span>
14     <el-date-picker
15       v-model="value6"
16       type="datetimerange"
17       align="right"
18       start-placeholder="开始日期"
19       end-placeholder="结束日期"
20       :default-time="['12:00:00', '08:00:00']">
21     </el-date-picker>
22   </div>
23 </template>
24 
25 <script>
26   export default {
27     data() {
28       return {
29         value5: '',
30         value6: ''
31       };
32     }
33   };
34 </script>
View Code

 

Attributes

参数 说明 类型 可选值 默认值
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/week/ datetime/datetimerange/daterange date
format 显示在输入框中的格式 string 日期格式 yyyy-MM-dd
align 对齐方式 string left, center, right left
popper-class DateTimePicker 下拉框的类名 string
picker-options 当前时间日期选择器特有的选项参考下表 object {}
range-separator 选择范围时的分隔符 string - '-'
default-value 可选,选择器打开时默认显示的时间 Date 可被new Date()解析
default-time 范围选择时选中日期的默认具体时刻 string[] 数组,长度为 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

Picker Options

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

Shortcuts

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

Events

Event Name Description Parameters
change 用户确认选定的值时触发 组件绑定值。格式与绑定值一致,可受 value-format 控制
blur 当 input 失去焦点时触发 组件实例
focus 当 input 获得焦点时触发 组件实例

Methods

方法名 说明 参数
focus 使 input 获取焦点
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部