Element-datetimepicker

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/vue.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div class="app">
			<!-- 日期和时间点:通过设置type属性为datetime，
			即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。 -->
			<div class="block">
				<span class="demonstration">默认</span>
				<el-date-picker
				  v-model="value1"
				  type="datetime"
				  placeholder="选择日期时间">
				</el-date-picker>
			  </div>
			  <div class="block">
				<span class="demonstration">带快捷选项</span>
				<el-date-picker
				  v-model="value2"
				  type="datetime"
				  placeholder="选择日期时间"
				  align="right"
				  :picker-options="pickerOptions">
				</el-date-picker>
			  </div>
			  <div class="block">
				<span class="demonstration">设置默认时间</span>
				<el-date-picker
				  v-model="value3"
				  type="datetime"
				  placeholder="选择日期时间"
				  default-time="12:00:00">
				</el-date-picker>
			</div>
			
			
			
			<!-- 日期和时间范围:设置type为datetimerange即可选择日期和时间范围 -->
			
			
			
			<!-- 默认的起始与结束时刻:使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，
			默认会使用该日期的00:00:00作为起始与结束的时刻；
			通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。
			default-time接受一个数组，数组每项值为字符串，形如12:00:00，
			其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。 -->
			<div class="block">
				<span class="demonstration">起始日期时刻为 12:00:00</span>
				<el-date-picker
				  v-model="value1"
				  type="datetimerange"
				  start-placeholder="开始日期"
				  end-placeholder="结束日期"
				  :default-time="['12:00:00']">
				</el-date-picker>
			</div>
			<div class="block">
				<span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
				<el-date-picker
				  v-model="value2"
				  type="datetimerange"
				  align="right"
				  start-placeholder="开始日期"
				  end-placeholder="结束日期"
				  :default-time="['12:00:00', '08:00:00']">
				</el-date-picker>
			</div>
		</div>
		<script>
			new Vue({
				el:'.app',
				data() {
				  return {
					pickerOptions: {
					  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);
						}
					  }]
					},
					value1: '',
					value2: '',
					value3: ''
				  };
				}
			})
		</script>
	</body>
</html>
猜你喜欢
