| | |
| | | <!-- 单个 日期时间选择器组件 带日周月快捷选项 |
| | | 前一天是当前时间的前一天的00点到23:59:59 |
| | | 前七天 和 上一个月同样 |
| | | 会将初始默认时间(一周前)和改变的时间通过事件‘submitTime’传递给父组件 |
| | | <!-- 单个 日期时间选择器组件 |
| | | 将初始默认时间(一周前)和改变的时间通过事件‘submitTime’传递给父组件 |
| | | |
| | | 初始渲染时就将时间传递给父组件: |
| | | ** |
| | |
| | | --> |
| | | |
| | | <script> |
| | | import dayjs from 'dayjs' |
| | | import time from '@/utils/time.js' |
| | | export default { |
| | | props: { |
| | | // 父组件传入的时间 |
| | | selectedTime: { |
| | | type: String, |
| | | // type: [String,null], |
| | | default: '' |
| | | }, |
| | | // 是否设置只读属性 |
| | | readOnly: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | isUTC: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | isDisabled: { |
| | | type: Boolean, |
| | | default: false |
| | | } |
| | |
| | | emits: ['submitTime'], |
| | | data() { |
| | | return { |
| | | time: '', |
| | | shortcuts: [] |
| | | time: '' |
| | | } |
| | | }, |
| | | // watch: { |
| | | // selectedTime(newVal) { |
| | | // console.log('time', this.selectedTime) |
| | | // if (newVal != '') { |
| | | // this.time = this.selectedTime |
| | | // } |
| | | // } |
| | | // }, |
| | | mounted() { |
| | | console.log('time', this.selectedTime) |
| | | |
| | | this.time = this.selectedTime |
| | | watch: { |
| | | selectedTime(newVal) { |
| | | if (newVal != '') { |
| | | // this.time = time.utcToStr(this.selectedTime) |
| | | this.time = this.selectedTime |
| | | } |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.time = time.utcToStr(this.selectedTime) |
| | | }, |
| | | |
| | | methods: { |
| | | |
| | | change() { |
| | | if (this.time != null) { |
| | | let t = time.utcTime(this.time) |
| | | this.isUTC ? this.$emit('submitTime', t) : this.$emit('submitTime', this.time) |
| | | } else { |
| | | this.$emit('submitTime', this.time) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <el-date-picker |
| | | v-model="time" |
| | | type="datetime" |
| | | placeholder="选择时间" |
| | | :shortcuts="shortcuts" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | @change="$emit('submitTime', time)" |
| | | /> |
| | | <el-date-picker v-model="time" type="datetime" placeholder="选择时间" @change="change" /> |
| | | </template> |
| | | |
| | | <style scoped></style> |