From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +0800
Subject: [PATCH] fix:是否修改
---
uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue | 360 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 360 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue b/uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue
new file mode 100644
index 0000000..18d8dcc
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-datetime-picker/u-datetime-picker.vue
@@ -0,0 +1,360 @@
+<template>
+ <u-picker
+ ref="picker"
+ :show="show"
+ :closeOnClickOverlay="closeOnClickOverlay"
+ :columns="columns"
+ :title="title"
+ :itemHeight="itemHeight"
+ :showToolbar="showToolbar"
+ :visibleItemCount="visibleItemCount"
+ :defaultIndex="innerDefaultIndex"
+ :cancelText="cancelText"
+ :confirmText="confirmText"
+ :cancelColor="cancelColor"
+ :confirmColor="confirmColor"
+ @close="close"
+ @cancel="cancel"
+ @confirm="confirm"
+ @change="change"
+ >
+ </u-picker>
+</template>
+
+<script>
+ function times(n, iteratee) {
+ let index = -1
+ const result = Array(n < 0 ? 0 : n)
+ while (++index < n) {
+ result[index] = iteratee(index)
+ }
+ return result
+ }
+ import props from './props.js';
+ import dayjs from '../../libs/util/dayjs.js';
+ /**
+ * DatetimePicker ���������������������
+ * @description ������������������������������
+ * @tutorial https://www.uviewui.com/components/datetimePicker.html
+ * @property {Boolean} show ��������������������������������������� ( ������ false )
+ * @property {Boolean} showToolbar ������������������������������ ( ������ true )
+ * @property {String | Number} value ���������
+ * @property {String} title ������������
+ * @property {String} mode ������������ mode=date������������������mode=time������������������mode=year-month������������������mode=datetime��������������������� ( ������ ���datetime )
+ * @property {Number} maxDate ��������������������� ���������������10���
+ * @property {Number} minDate ��������������������� ���������������10���
+ * @property {Number} minHour ���������������������������mode=time������ ( ������ 0 )
+ * @property {Number} maxHour ���������������������������mode=time������ ( ������ 23 )
+ * @property {Number} minMinute ���������������������������mode=time������ ( ������ 0 )
+ * @property {Number} maxMinute ���������������������������mode=time������ ( ������ 59 )
+ * @property {Function} filter ������������������
+ * @property {Function} formatter ���������������������
+ * @property {Boolean} loading ��������������������������� ( ������ false )
+ * @property {String | Number} itemHeight ��������������������������������� ( ������ 44 )
+ * @property {String} cancelText ��������������������� ( ������ '������' )
+ * @property {String} confirmText ��������������������� ( ������ '������' )
+ * @property {String} cancelColor ��������������������� ( ������ '#909193' )
+ * @property {String} confirmColor ��������������������� ( ������ '#3c9cff' )
+ * @property {String | Number} visibleItemCount ������������������������������ ( ������ 5 )
+ * @property {Boolean} closeOnClickOverlay ��������������������������������������� ( ������ false )
+ * @property {Array} defaultIndex ���������������������
+ * @event {Function} close ������������������������
+ * @event {Function} confirm ���������������������������������������������
+ * @event {Function} change ���������������������������
+ * @event {Function} cancel ������������������
+ * @example <u-datetime-picker :show="show" :value="value1" mode="datetime" ></u-datetime-picker>
+ */
+ export default {
+ name: 'datetime-picker',
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ data() {
+ return {
+ columns: [],
+ innerDefaultIndex: [],
+ innerFormatter: (type, value) => value
+ }
+ },
+ watch: {
+ show(newValue, oldValue) {
+ if (newValue) {
+ this.updateColumnValue(this.innerValue)
+ }
+ },
+ propsChange() {
+ this.init()
+ }
+ },
+ computed: {
+ // ������������������������������������������������������������������������������������
+ propsChange() {
+ return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter, ]
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ init() {
+ this.innerValue = this.correctValue(this.value)
+ this.updateColumnValue(this.innerValue)
+ },
+ // ������������������������������������������������props������������������������ref������������
+ setFormatter(e) {
+ this.innerFormatter = e
+ },
+ // ���������������
+ close() {
+ if (this.closeOnClickOverlay) {
+ this.$emit('close')
+ }
+ },
+ // ������������������������������
+ cancel() {
+ this.$emit('cancel')
+ },
+ // ������������������������������
+ confirm() {
+ this.$emit('confirm', {
+ value: this.innerValue,
+ mode: this.mode
+ })
+ this.$emit('input', this.innerValue)
+ },
+ //������������������������,������������������������,������������
+ intercept(e,type){
+ let judge = e.match(/\d+/g)
+ //������������������������
+ if(judge.length>1){
+ uni.$u.error("������������������������������������������������")
+ return 0
+ }else if(type&&judge[0].length==4){//���������������������
+ return judge[0]
+ }else if(judge[0].length>2){
+ uni.$u.error("������������������������������������������������")
+ return 0
+ }else{
+ return judge[0]
+ }
+ },
+ // ������������������������
+ change(e) {
+ const { indexs, values } = e
+ let selectValue = ''
+ if(this.mode === 'time') {
+ // ������value������������������������������������������������������������������
+ selectValue = `${this.intercept(values[0][indexs[0]])}:${this.intercept(values[1][indexs[1]])}`
+ } else {
+ // ������������������������������������'03'���������������3���'2019'���������������2019
+ const year = parseInt(this.intercept(values[0][indexs[0]],'year'))
+ const month = parseInt(this.intercept(values[1][indexs[1]]))
+ let date = parseInt(values[2] ? this.intercept(values[2][indexs[2]]) : 1)
+ let hour = 0, minute = 0
+ // ������������������������
+ const maxDate = dayjs(`${year}-${month}`).daysInMonth()
+ // year-month������������date���������������������������������1������������������������������1���������
+ if (this.mode === 'year-month') {
+ date = 1
+ }
+ // ���������������maxDate���
+ date = Math.min(maxDate, date)
+ if (this.mode === 'datetime') {
+ hour = parseInt(this.intercept(values[3][indexs[3]]))
+ minute = parseInt(this.intercept(values[4][indexs[4]]))
+ }
+ // ������������������
+ selectValue = Number(new Date(year, month - 1, date, hour, minute))
+ }
+ // ������������������������������������������������������
+ selectValue = this.correctValue(selectValue)
+ this.innerValue = selectValue
+ this.updateColumnValue(selectValue)
+ // ������change���������value���������������������������
+ this.$emit('change', {
+ value: selectValue,
+ // #ifndef MP-WEIXIN
+ // ���������������������������this���������������������������������������
+ picker: this.$refs.picker,
+ // #endif
+ mode: this.mode
+ })
+ },
+ // ������������������������������0���������������������
+ updateColumnValue(value) {
+ this.innerValue = value
+ this.updateColumns()
+ this.updateIndexs(value)
+ },
+ // ������������
+ updateIndexs(value) {
+ let values = []
+ const formatter = this.formatter || this.innerFormatter
+ const padZero = uni.$u.padZero
+ if (this.mode === 'time') {
+ // ���time������������������:���������������
+ const timeArr = value.split(':')
+ // ������formatter���������������������������������
+ values = [formatter('hour', timeArr[0]), formatter('minute', timeArr[1])]
+ } else {
+ const date = new Date(value)
+ values = [
+ formatter('year', `${dayjs(value).year()}`),
+ // ���������0
+ formatter('month', padZero(dayjs(value).month() + 1))
+ ]
+ if (this.mode === 'date') {
+ // date���������������������������
+ values.push(formatter('day', padZero(dayjs(value).date())))
+ }
+ if (this.mode === 'datetime') {
+ // ���������push���������������������������������
+ values.push(formatter('day', padZero(dayjs(value).date())), formatter('hour', padZero(dayjs(value).hour())), formatter('minute', padZero(dayjs(value).minute())))
+ }
+ }
+
+ // ������������������������������������������������������������������������������������������
+ const indexs = this.columns.map((column, index) => {
+ // ������������������������������������������������������������-1������
+ return Math.max(0, column.findIndex(item => item === values[index]))
+ })
+ this.innerDefaultIndex = indexs
+ },
+ // ������������������
+ updateColumns() {
+ const formatter = this.formatter || this.innerFormatter
+ // ���������������������������map������������������������������������0������
+ const results = this.getOriginColumns().map((column) => column.values.map((value) => formatter(column.type, value)))
+ this.columns = results
+ },
+ getOriginColumns() {
+ // ������������������
+ const results = this.getRanges().map(({ type, range }) => {
+ let values = times(range[1] - range[0] + 1, (index) => {
+ let value = range[0] + index
+ value = type === 'year' ? `${value}` : uni.$u.padZero(value)
+ return value
+ })
+ // ������������
+ if (this.filter) {
+ values = this.filter(type, values)
+ }
+ return { type, values }
+ })
+ return results
+ },
+ // ���������������������������������������
+ generateArray(start, end) {
+ return Array.from(new Array(end + 1).keys()).slice(start)
+ },
+ // ���������������������
+ correctValue(value) {
+ const isDateMode = this.mode !== 'time'
+ if (isDateMode && !uni.$u.test.date(value)) {
+ // ������������������������������������������������������������������������������������������������������������
+ value = this.minDate
+ } else if (!isDateMode && !value) {
+ // ������������������������������������������������������������������������
+ value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`
+ }
+ // ������������
+ if (!isDateMode) {
+ if (String(value).indexOf(':') === -1) return uni.$u.error('���������������������������12:24���������')
+ let [hour, minute] = value.split(':')
+ // ������������������������������������������������������������
+ hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)))
+ minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)))
+ return `${ hour }:${ minute }`
+ } else {
+ // ������������������������������������������������������������������
+ value = dayjs(value).isBefore(dayjs(this.minDate)) ? this.minDate : value
+ value = dayjs(value).isAfter(dayjs(this.maxDate)) ? this.maxDate : value
+ return value
+ }
+ },
+ // ���������������������������������
+ getRanges() {
+ if (this.mode === 'time') {
+ return [
+ {
+ type: 'hour',
+ range: [this.minHour, this.maxHour],
+ },
+ {
+ type: 'minute',
+ range: [this.minMinute, this.maxMinute],
+ },
+ ];
+ }
+ const { maxYear, maxDate, maxMonth, maxHour, maxMinute, } = this.getBoundary('max', this.innerValue);
+ const { minYear, minDate, minMonth, minHour, minMinute, } = this.getBoundary('min', this.innerValue);
+ const result = [
+ {
+ type: 'year',
+ range: [minYear, maxYear],
+ },
+ {
+ type: 'month',
+ range: [minMonth, maxMonth],
+ },
+ {
+ type: 'day',
+ range: [minDate, maxDate],
+ },
+ {
+ type: 'hour',
+ range: [minHour, maxHour],
+ },
+ {
+ type: 'minute',
+ range: [minMinute, maxMinute],
+ },
+ ];
+ if (this.mode === 'date')
+ result.splice(3, 2);
+ if (this.mode === 'year-month')
+ result.splice(2, 3);
+ return result;
+ },
+ // ������minDate���maxDate���minHour���maxHour������������������������������������������������������
+ getBoundary(type, innerValue) {
+ const value = new Date(innerValue)
+ const boundary = new Date(this[`${type}Date`])
+ const year = dayjs(boundary).year()
+ let month = 1
+ let date = 1
+ let hour = 0
+ let minute = 0
+ if (type === 'max') {
+ month = 12
+ // ���������������
+ date = dayjs(value).daysInMonth()
+ hour = 23
+ minute = 59
+ }
+ // ������������������������������������������������������(������������������)���������������������������������������������������������
+ if (dayjs(value).year() === year) {
+ month = dayjs(boundary).month() + 1
+ if (dayjs(value).month() + 1 === month) {
+ date = dayjs(boundary).date()
+ if (dayjs(value).date() === date) {
+ hour = dayjs(boundary).hour()
+ if (dayjs(value).hour() === hour) {
+ minute = dayjs(boundary).minute()
+ }
+ }
+ }
+ }
+ return {
+ [`${type}Year`]: year,
+ [`${type}Month`]: month,
+ [`${type}Date`]: date,
+ [`${type}Hour`]: hour,
+ [`${type}Minute`]: minute
+ }
+ },
+ },
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import '../../libs/css/components.scss';
+</style>
--
Gitblit v1.8.0