在同一個選擇器里選擇日期和時間

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 日期时间选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。