123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133 |
- <template>
- <u-datetime-picker
- ref="datetimePickerRef"
- :show="isShow"
- v-model="innerValue"
- :mode="mode"
- @confirm="confirm"
- @cancel="close"
- :formatter="formatter"
- :maxDate="maxDate"
- :minDate="minDate"
- ></u-datetime-picker>
- </template>
- <script>
- /* https://uviewui.com/components/datetimePicker.html */
- export default {
- props: {
- value: {
- type: String | Number,
- default: function() {
- return null
- }
- },
-
- //展示格式
- mode: {
- type: String,
- default: 'datetime'
- },
- format: {
- type: String,
- default: 'YYYY-MM-DD HH:mm'
- },
-
- disStartDate: {
- type: String,
- default: ''
- },
- disEndDate: {
- type: String,
- default: ''
- }
- },
-
- watch: {
- value: {
- handler(newVal) {
- this.innerValue = newVal
- }
- },
- innerValue: {
- handler(newVal) {
- this.$emit('input', newVal)
- }
- },
- },
- computed: {
- maxDate() {
- let res
- if(this.disEndDate) {
- res = this.dayjs(this.disEndDate).valueOf() - 60000
- } else {
- res = this.dayjs().add(20, 'year').valueOf()
- }
- return res
- },
- minDate() {
-
- let res
- if(this.disStartDate) {
- res = this.dayjs(this.disStartDate).valueOf() + 60000
- } else {
- res = this.dayjs().subtract(20, 'year').valueOf()
- }
- return res
- },
- },
- data() {
- return {
- isShow: false,
- innerValue: Number(new Date()),
- }
- },
- onReady() {
- // 微信小程序需要用此写法
- this.$refs.datetimePickerRef.setFormatter(this.formatter)
- },
-
- methods: {
-
- show() {
- this.isShow= true;
- },
-
- close() {
- this.isShow = false
- },
-
- confirm(e) {
-
- let time = this.dayjs(e.value).format(this.format)
- this.$emit('confirm',time)
- this.close()
- },
-
- formatter(type, value) {
- if (type === 'year') {
- return `${value}年`
- }
- if (type === 'month') {
- return `${value}月`
- }
- if (type === 'day') {
- return `${value}日`
- }
- if (type === 'hour') {
- return `${value}时`
- }
- if (type === 'minute') {
- return `${value}分`
- }
- return value
- },
-
- }
- }
- </script>
- <style lang="scss" scoped>
-
- </style>
|