Element DateTimePicker日期时间选择器的使用示例
程序员文章站
2022-09-21 21:33:11
组件—日期时间选择器日期和时间点
默认<...
组件—日期时间选择器
日期和时间点
<template>
<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>
</template>
<script>
export default {
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>
日期和时间范围
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
type="datetimerange"
:picker-options="pickeroptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickeroptions: {
shortcuts: [{
text: '最近一周',
onclick(picker) {
const end = new date();
const start = new date();
start.settime(start.gettime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onclick(picker) {
const end = new date();
const start = new date();
start.settime(start.gettime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onclick(picker) {
const end = new date();
const start = new date();
start.settime(start.gettime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
value1: [new date(2000, 10, 10, 10, 10), new date(2000, 10, 11, 10, 10)],
value2: ''
};
}
};
</script>
默认的起始与结束时刻
<template>
<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>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: ''
};
}
};
</script>
attributes
picker options
shortcuts
events
methods
slots
使用element ui的日期选择器时，默认显示当天日期
需求：输入框中要把当天日期显示在输入框中，并且传给后台的日期格式是2019-06-12。（如交易数据）
传给后台的时间格式为'2019-06-12'这样的格式，，这个很好实现，el-date-picker上添加value-format="yyyy-mm-dd"即可；
本来以为element ui中default-value设置之后，可以直接在输入框中显示，测试之后无用。最后通过下面的方法实现效果
<el-form-item label="交易数据">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="searchformfield.date"
style="width: 100%;"
value-format="yyyy-mm-dd"
></el-date-picker>
</el-form-item>
methods: {
getnowtime() {
var now = new date();
var year = now.getfullyear(); //得到年份
var month = now.getmonth(); //得到月份
var date = now.getdate(); //得到日期
month = month + 1;
month = month.tostring().padstart(2, "0");
date = date.tostring().padstart(2, "0");
var defaultdate = `${year}-${month}-${date}`;
this.$set(this.searchformfield, "date", defaultdate);
},
}
到此这篇关于element datetimepicker日期时间选择器的使用示例的文章就介绍到这了,更多相关element datetimepicker日期时间选择器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
推荐阅读
-
angular项目中bootstrap-datetimepicker时间插件的使用示例
-
PHP日期和时间函数的使用示例详解
-
详解element-ui日期时间选择器的日期格式化问题
-
Element DateTimePicker日期时间选择器的使用示例
-
element-ui 时间日期选择器格式化后台需要的格式
-
可修改文字颜色和限制最大日期的时间选择器使用示例
-
Android DateTimePicker(一个简单、漂亮的日期时间选择器)
-
angular项目中bootstrap-datetimepicker时间插件的使用示例
-
vue element-ui date-picker 日期选择器控件 设置时间范围 限制可选的开始时间和结束时间
-
Element UI 去除 日期时间选择器里的此刻按钮