當前位置:
首頁 >
DateTimePicker 日期时间选择器
發布時間:2023/12/13
30
生活家
生活随笔
收集整理的這篇文章主要介紹了
DateTimePicker 日期时间选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在同一個選擇器里選擇日期和時間
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
日期和時間范圍
設置type為datetimerange即可選擇日期和時間范圍
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 獲取焦點 | — |
總結
以上是生活随笔為你收集整理的DateTimePicker 日期时间选择器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 操作系统--存储管理
- 下一篇: 蓝鲸gse启动失败