在vue里面，我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了，现在需要用到一个可以同时选择年月日时分秒的插件，饿了么的文档里面就有现成可以使用的~~
在同一个选择器里选择日期和时间
DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
文档：https://element.eleme.cn/#/zh-CN/component/datetime-picker
代码语言：javascript复制<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>
