DateTimePicker 日期时间选择器,默认获取当前日期
在vue里面,我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了,现在需要用到一个可以同时选择年月日时分秒的插件,饿了么的文档里面就有现成可以使用的~~在同一个选择器里选择日期和时间DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePic
·
在vue里面,我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了,现在需要用到一个可以同时选择年月日时分秒的插件,饿了么的文档里面就有现成可以使用的~~
在同一个选择器里选择日期和时间
DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
文档:https://element.eleme.cn/#/zh-CN/component/datetime-picker
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
</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);
},
},
],
},
value: "",
};
},
created() {
this.Date();
},
methods: {
//获取当前年月日
Date() {
const nowDate = new Date();
const date = {
year: nowDate.getFullYear(),
month: nowDate.getMonth() + 1,
date: nowDate.getDate(),
hours: nowDate.getHours(),
minutes: nowDate.getMinutes(),
seconds: nowDate.getSeconds(),
};
const newmonth = date.month > 10 ? date.month : "0" + date.month;
const newday = date.date > 10 ? date.date : "0" + date.date;
const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
this.value =
date.year +
"-" +
newmonth +
"-" +
newday +
" " +
date.hours +
":" +
newminutes +
":" +
newseconds;
},
},
};
</script>
<style scoped>
.tab-container {
margin: 30px;
}
</style>
更多推荐
已为社区贡献26条内容
所有评论(0)