在vue里面,我们已经用到过单独的TimePicker 时间选择器和DatePicker 日期选择器了,现在需要用到一个可以同时选择年月日时分秒的插件,饿了么的文档里面就有现成可以使用的~~
在同一个选择器里选择日期和时间
DateTimePicker 由 DatePicker 和 TimePicker 派生,Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。
<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>