jobsys-mpower/components/form/MpDate.jsx

Enhanced component based on Taro & NutUI

import { computed, defineComponent, ref, watch } from "vue"
import PickerWrapper, { pickerSlots } from "./PickerWrapper.jsx"
import { DatePicker } from "vant"
import { padZero } from "vant/es/utils"
import { defaultFieldProps } from "../utils"

/**
 * MpDate 日期选择
 * @version 1.0.0
 */
export default defineComponent({
	name: "MpDate",
	props: {
		...defaultFieldProps,

		modelValue: { type: Date, default: () => null },

		/**
		 * 标题
		 */
		title: { type: String, default: "选择日期" },
	},
	emits: ["update:modelValue"],
	setup(props, { emit, slots, expose }) {
		const columnsType = props.defaultProps?.columnsType || ["year", "month", "day"]
		const prepareDate = (date) => {
			const value = []

			if (!date) {
				return value
			}

			columnsType.forEach((column) => {
				if (column === "year") {
					value.push(date.getFullYear())
				} else if (column === "month") {
					value.push(date.getMonth() + 1)
				} else if (column === "day") {
					value.push(date.getDate())
				}
			})

			return value
		}

		let defaultValue = prepareDate(props.modelValue)

		if (!defaultValue.length) {
			const now = new Date()
			defaultValue = [now.getFullYear(), now.getMonth() + 1, now.getDate()]
		}

		const componentValue = ref(defaultValue)

		watch(
			() => props.modelValue,
			() => {
				componentValue.value = prepareDate(props.modelValue)
			},
		)

		const pickerRef = ref(null)

		const displayText = computed(() => {
			if (props.modelValue) {
				let text = ""
				columnsType.forEach((column) => {
					if (column === "year") {
						text += `${props.modelValue.getFullYear()}/`
					} else if (column === "month") {
						text += `${padZero(props.modelValue.getMonth() + 1, 2)}/`
					} else if (column === "day") {
						text += `${padZero(props.modelValue.getDate(), 2)}`
					}
				})

				return text
			}

			return ""
		})

		expose({ displayText })

		const onConfirm = ({ selectedValues }) => {
			pickerRef.value.close()

			const now = new Date()
			let date = {}
			columnsType.forEach((column, index) => {
				if (column === "year") {
					date.year = selectedValues[index]
				} else if (column === "month") {
					date.month = selectedValues[index] - 1
				} else if (column === "day") {
					date.date = selectedValues[index]
				}
			})

			emit("update:modelValue", new Date(date.year || now.getFullYear(), date.month || now.getMonth(), date.date || now.getDate()))
		}

		return () => (
			<PickerWrapper ref={pickerRef} closeable={false} disabled={props.disabled || props.readonly}>
				{{
					...pickerSlots(slots, props),
					default: () => (
						<DatePicker
							v-model={componentValue.value}
							onConfirm={onConfirm}
							onCancel={() => pickerRef.value.close()}
							title={props.title}
							{...props.defaultProps}
						/>
					),
				}}
			</PickerWrapper>
		)
	},
})