diff --git a/uni_modules/uni-datetime-picker/changelog.md b/uni_modules/uni-datetime-picker/changelog.md index 1e82f46..64c2f04 100644 --- a/uni_modules/uni-datetime-picker/changelog.md +++ b/uni_modules/uni-datetime-picker/changelog.md @@ -1,20 +1,22 @@ +## 2.2.25（2023-10-18） +- 修复 PC端初次修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737) ## 2.2.24（2023-06-02） - 修复 部分情况修改时间，开始、结束时间显示异常的Bug [详情](https://ask.dcloud.net.cn/question/171146) -- 优化 当前月可以选择上月、下月的日期 +- 优化 当前月可以选择上月、下月的日期的Bug ## 2.2.23（2023-05-02） -- 修复 部分情况修改时间，开始时间未更新 [详情](https://github.com/dcloudio/uni-ui/issues/737) -- 修复 部分平台及设备第一次点击无法显示弹框 -- 修复 ios 日期格式未补零显示及使用异常 [详情](https://ask.dcloud.net.cn/question/162979) +- 修复 部分情况修改时间，开始时间未更新的Bug [详情](https://github.com/dcloudio/uni-ui/issues/737) +- 修复 部分平台及设备第一次点击无法显示弹框的Bug +- 修复 ios 日期格式未补零显示及使用异常的Bug [详情](https://ask.dcloud.net.cn/question/162979) ## 2.2.22（2023-03-30） -- 修复 日历 picker 修改年月后，自动选中当月1日 [详情](https://ask.dcloud.net.cn/question/165937) -- 修复 小程序端 低版本 ios NaN [详情](https://ask.dcloud.net.cn/question/162979) +- 修复 日历 picker 修改年月后，自动选中当月1日的Bug [详情](https://ask.dcloud.net.cn/question/165937) +- 修复 小程序端 低版本 ios NaN的Bug [详情](https://ask.dcloud.net.cn/question/162979) ## 2.2.21（2023-02-20） - 修复 firefox 浏览器显示区域点击无法拉起日历弹框的Bug [详情](https://ask.dcloud.net.cn/question/163362) ## 2.2.20（2023-02-17） - 优化 值为空依然选中当天问题 - 优化 提供 default-value 属性支持配置选择器打开时默认显示的时间 - 优化 非范围选择未选择日期时间，点击确认按钮选中当前日期时间 -- 优化 字节小程序日期时间范围选择，底部日期换行问题 +- 优化 字节小程序日期时间范围选择，底部日期换行的Bug ## 2.2.19（2023-02-09） - 修复 2.2.18 引起范围选择配置 end 选择无效的Bug [详情](https://github.com/dcloudio/uni-ui/issues/686) ## 2.2.18（2023-02-08） diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue index 29b1b03..3418f49 100644 --- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue @@ -586,7 +586,6 @@ this.tempSingleDate = this.calendar.fullDate const beforeDate = new Date(this.cale.multipleStatus.before).getTime() const afterDate = new Date(this.cale.multipleStatus.after).getTime() - // 如果先选择结束日期，后选择开始日期，需要交换 if (beforeDate > afterDate && afterDate) { this.tempRange.before = this.cale.multipleStatus.after this.tempRange.after = this.cale.multipleStatus.before diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue index 8769e83..2c25f1f 100644 --- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue @@ -2,22 +2,24 @@ - + {{ displayValue || singlePlaceholderText }} - - {{ displayRangeValue.startDate || startPlaceholderText }} + + + {{ displayRangeValue.startDate || startPlaceholderText }} + - {{rangeSeparator}} + {{rangeSeparator}} - {{ displayRangeValue.endDate || endPlaceholderText }} + + {{ displayRangeValue.endDate || endPlaceholderText }} + @@ -38,16 +40,16 @@ :placeholder="selectDateText" /> - + :start="timepickerStartTime" :end="timepickerEndTime" :hideSecond="hideSecond" + style="width: 100%;"> + + :default-value="defaultValue" style="padding: 0 8px;" /> {{okText}} @@ -58,18 +60,18 @@ - - - - - - + + + + + + - + + :end-date="calendarRange.endDate" :range="true" :pleStatus="endMultipleStatus" + @change="leftChange" @firstEnterCale="updateRightCale" style="padding: 0 8px;" /> @@ -133,9 +134,19 @@ **/ import Calendar from './calendar.vue' import TimePicker from './time-picker.vue' - import { initVueI18n } from '@dcloudio/uni-i18n' + import { + initVueI18n + } from '@dcloudio/uni-i18n' import i18nMessages from './i18n/index.js' - import { getDateTime, getDate, getTime, getDefaultSecond, dateCompare, checkDate, fixIosDateFormat } from './util' + import { + getDateTime, + getDate, + getTime, + getDefaultSecond, + dateCompare, + checkDate, + fixIosDateFormat + } from './util' export default { name: 'UniDatetimePicker', @@ -188,7 +199,7 @@ isEmitValue: false, isPhone: false, isFirstShow: true, - i18nT: () => {} + i18nT: () => {} } }, props: { @@ -221,7 +232,7 @@ default: '' }, startPlaceholder: { - type: String, + type: String, default: '' }, endPlaceholder: { @@ -248,16 +259,16 @@ type: [Boolean], default: false }, - defaultValue: { - type: [String, Object, Array], - default: '' - } + defaultValue: { + type: [String, Object, Array], + default: '' + } }, watch: { type: { immediate: true, handler(newVal) { - this.hasTime = newVal.indexOf('time') !== -1 + this.hasTime = newVal.indexOf('time') !== -1 this.isRange = newVal.indexOf('range') !== -1 } }, @@ -348,9 +359,9 @@ selectDateText() { return this.i18nT("uni-datetime-picker.selectDate") }, - selectDateTimeText() { - return this.i18nT("uni-datetime-picker.selectDateTime") - }, + selectDateTimeText() { + return this.i18nT("uni-datetime-picker.selectDateTime") + }, selectTimeText() { return this.i18nT("uni-datetime-picker.selectTime") }, @@ -373,18 +384,19 @@ return this.i18nT("uni-datetime-picker.clear") }, showClearIcon() { - return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this.displayRangeValue.endDate)) + return this.clearIcon && !this.disabled && (this.displayValue || (this.displayRangeValue.startDate && this + .displayRangeValue.endDate)) } }, created() { this.initI18nT() - this.platform() + this.platform() }, methods: { - initI18nT() { - const vueI18n = initVueI18n(i18nMessages) - this.i18nT = vueI18n.t - }, + initI18nT() { + const vueI18n = initVueI18n(i18nMessages) + this.i18nT = vueI18n.t + }, initPicker(newVal) { if ((!newVal && !this.defaultValue) || Array.isArray(newVal) && !newVal.length) { this.$nextTick(() => { @@ -394,26 +406,26 @@ } if (!Array.isArray(newVal) && !this.isRange) { - if(newVal){ - this.displayValue = this.inputDate = this.calendarDate = getDate(newVal) - if (this.hasTime) { - this.pickerTime = getTime(newVal, this.hideSecond) - this.displayValue = `${this.displayValue} ${this.pickerTime}` - } - }else if(this.defaultValue){ - this.inputDate = this.calendarDate = getDate(this.defaultValue) - if(this.hasTime){ - this.pickerTime = getTime(this.defaultValue, this.hideSecond) - } - } + if (newVal) { + this.displayValue = this.inputDate = this.calendarDate = getDate(newVal) + if (this.hasTime) { + this.pickerTime = getTime(newVal, this.hideSecond) + this.displayValue = `${this.displayValue} ${this.pickerTime}` + } + } else if (this.defaultValue) { + this.inputDate = this.calendarDate = getDate(this.defaultValue) + if (this.hasTime) { + this.pickerTime = getTime(this.defaultValue, this.hideSecond) + } + } } else { const [before, after] = newVal if (!before && !after) return - const beforeDate = getDate(before) - const beforeTime = getTime(before, this.hideSecond) + const beforeDate = getDate(before) + const beforeTime = getTime(before, this.hideSecond) - const afterDate = getDate(after) - const afterTime = getTime(after, this.hideSecond) + const afterDate = getDate(after) + const afterTime = getTime(after, this.hideSecond) const startDate = beforeDate const endDate = afterDate this.displayRangeValue.startDate = this.tempRange.startDate = startDate @@ -450,11 +462,13 @@ right.setDate(this.$refs.right.nowDate.fullDate) }, platform() { - if(typeof navigator !== "undefined"){ - this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1 - return - } - const { windowWidth } = uni.getSystemInfoSync() + if (typeof navigator !== "undefined") { + this.isPhone = navigator.userAgent.toLowerCase().indexOf('mobile') !== -1 + return + } + const { + windowWidth + } = uni.getSystemInfoSync() this.isPhone = windowWidth <= 500 this.windowWidth = windowWidth }, @@ -465,8 +479,8 @@ this.platform() if (this.isPhone) { setTimeout(() => { - this.$refs.mobile.open() - }, 0); + this.$refs.mobile.open() + }, 0); return } this.pickerPositionStyle = { @@ -492,7 +506,9 @@ } } else { this.$refs.right.changeMonth('next') - this.$refs.right.cale.lastHover = false + if (this.isPhone) { + this.$refs.right.cale.lastHover = false; + } } } @@ -544,52 +560,52 @@ this.confirmSingleChange() }, confirmSingleChange() { - if(!checkDate(this.inputDate)){ + if (!checkDate(this.inputDate)) { const now = new Date() - this.calendarDate = this.inputDate = getDate(now) + this.calendarDate = this.inputDate = getDate(now) this.pickerTime = getTime(now, this.hideSecond) - } - - let startLaterInputDate = false - let startDate, startTime - if(this.start) { - let startString = this.start - if(typeof this.start === 'number'){ - startString = getDateTime(this.start, this.hideSecond) - } - [startDate, startTime] = startString.split(' ') - if(this.start && !dateCompare(startDate, this.inputDate)) { - startLaterInputDate = true - this.inputDate = startDate - } - } - - let endEarlierInputDate = false - let endDate, endTime - if(this.end) { - let endString = this.end - if(typeof this.end === 'number'){ - endString = getDateTime(this.end, this.hideSecond) - } - [endDate, endTime] = endString.split(' ') - if(this.end && !dateCompare(this.inputDate, endDate)) { - endEarlierInputDate = true - this.inputDate = endDate - } - } + } + + let startLaterInputDate = false + let startDate, startTime + if (this.start) { + let startString = this.start + if (typeof this.start === 'number') { + startString = getDateTime(this.start, this.hideSecond) + } + [startDate, startTime] = startString.split(' ') + if (this.start && !dateCompare(startDate, this.inputDate)) { + startLaterInputDate = true + this.inputDate = startDate + } + } + + let endEarlierInputDate = false + let endDate, endTime + if (this.end) { + let endString = this.end + if (typeof this.end === 'number') { + endString = getDateTime(this.end, this.hideSecond) + } + [endDate, endTime] = endString.split(' ') + if (this.end && !dateCompare(this.inputDate, endDate)) { + endEarlierInputDate = true + this.inputDate = endDate + } + } if (this.hasTime) { - if(startLaterInputDate){ - this.pickerTime = startTime || getDefaultSecond(this.hideSecond) - } - if(endEarlierInputDate){ - this.pickerTime = endTime || getDefaultSecond(this.hideSecond) - } - if(!this.pickerTime){ - this.pickerTime = getTime(Date.now(), this.hideSecond) - } + if (startLaterInputDate) { + this.pickerTime = startTime || getDefaultSecond(this.hideSecond) + } + if (endEarlierInputDate) { + this.pickerTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.pickerTime) { + this.pickerTime = getTime(Date.now(), this.hideSecond) + } this.displayValue = `${this.inputDate} ${this.pickerTime}` } else { - this.displayValue = this.inputDate + this.displayValue = this.inputDate } this.setEmit(this.displayValue) this.pickerVisible = false @@ -624,11 +640,14 @@ }, mobileChange(e) { if (this.isRange) { - const {before, after} = e.range + const { + before, + after + } = e.range - if(!before || !after){ - return - } + if (!before || !after) { + return + } this.handleStartAndEnd(before, after, true) if (this.hasTime) { @@ -661,79 +680,79 @@ this.pickerVisible = false return } - if(!checkDate(this.tempRange.startDate)){ - this.tempRange.startDate = getDate(Date.now()) - } - if(!checkDate(this.tempRange.endDate)){ - this.tempRange.endDate = getDate(Date.now()) - } + if (!checkDate(this.tempRange.startDate)) { + this.tempRange.startDate = getDate(Date.now()) + } + if (!checkDate(this.tempRange.endDate)) { + this.tempRange.endDate = getDate(Date.now()) + } let start, end - let startDateLaterRangeStartDate = false - let startDateLaterRangeEndDate = false - let startDate, startTime - if(this.start) { - let startString = this.start - if(typeof this.start === 'number'){ - startString = getDateTime(this.start, this.hideSecond) - } - [startDate,startTime] = startString.split(' ') - if(this.start && !dateCompare(this.start, this.tempRange.startDate)) { - startDateLaterRangeStartDate = true - this.tempRange.startDate = startDate - } - if(this.start && !dateCompare(this.start, this.tempRange.endDate)) { - startDateLaterRangeEndDate = true - this.tempRange.endDate = startDate - } - } - let endDateEarlierRangeStartDate = false - let endDateEarlierRangeEndDate = false - let endDate, endTime - if(this.end) { - let endString = this.end - if(typeof this.end === 'number'){ - endString = getDateTime(this.end, this.hideSecond) - } - [endDate,endTime] = endString.split(' ') - - if(this.end && !dateCompare(this.tempRange.startDate, this.end)) { - endDateEarlierRangeStartDate = true - this.tempRange.startDate = endDate - } - if(this.end && !dateCompare(this.tempRange.endDate, this.end)) { - endDateEarlierRangeEndDate = true - this.tempRange.endDate = endDate - } - } + let startDateLaterRangeStartDate = false + let startDateLaterRangeEndDate = false + let startDate, startTime + if (this.start) { + let startString = this.start + if (typeof this.start === 'number') { + startString = getDateTime(this.start, this.hideSecond) + } + [startDate, startTime] = startString.split(' ') + if (this.start && !dateCompare(this.start, this.tempRange.startDate)) { + startDateLaterRangeStartDate = true + this.tempRange.startDate = startDate + } + if (this.start && !dateCompare(this.start, this.tempRange.endDate)) { + startDateLaterRangeEndDate = true + this.tempRange.endDate = startDate + } + } + let endDateEarlierRangeStartDate = false + let endDateEarlierRangeEndDate = false + let endDate, endTime + if (this.end) { + let endString = this.end + if (typeof this.end === 'number') { + endString = getDateTime(this.end, this.hideSecond) + } + [endDate, endTime] = endString.split(' ') + + if (this.end && !dateCompare(this.tempRange.startDate, this.end)) { + endDateEarlierRangeStartDate = true + this.tempRange.startDate = endDate + } + if (this.end && !dateCompare(this.tempRange.endDate, this.end)) { + endDateEarlierRangeEndDate = true + this.tempRange.endDate = endDate + } + } if (!this.hasTime) { - start = this.displayRangeValue.startDate = this.tempRange.startDate + start = this.displayRangeValue.startDate = this.tempRange.startDate end = this.displayRangeValue.endDate = this.tempRange.endDate } else { - if(startDateLaterRangeStartDate){ - this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond) - }else if(endDateEarlierRangeStartDate){ - this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond) - } - if(!this.tempRange.startTime){ - this.tempRange.startTime = getTime(Date.now(), this.hideSecond) - } - - if(startDateLaterRangeEndDate){ - this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond) - }else if(endDateEarlierRangeEndDate){ - this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond) - } - if(!this.tempRange.endTime){ - this.tempRange.endTime = getTime(Date.now(), this.hideSecond) - } + if (startDateLaterRangeStartDate) { + this.tempRange.startTime = startTime || getDefaultSecond(this.hideSecond) + } else if (endDateEarlierRangeStartDate) { + this.tempRange.startTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.tempRange.startTime) { + this.tempRange.startTime = getTime(Date.now(), this.hideSecond) + } + + if (startDateLaterRangeEndDate) { + this.tempRange.endTime = startTime || getDefaultSecond(this.hideSecond) + } else if (endDateEarlierRangeEndDate) { + this.tempRange.endTime = endTime || getDefaultSecond(this.hideSecond) + } + if (!this.tempRange.endTime) { + this.tempRange.endTime = getTime(Date.now(), this.hideSecond) + } start = this.displayRangeValue.startDate = `${this.tempRange.startDate} ${this.tempRange.startTime}` end = this.displayRangeValue.endDate = `${this.tempRange.endDate} ${this.tempRange.endTime}` } - if(!dateCompare(start,end)){ - [start, end] = [end, start] - } + if (!dateCompare(start, end)) { + [start, end] = [end, start] + } this.displayRangeValue.startDate = start this.displayRangeValue.endDate = end const displayRange = [start, end] @@ -744,10 +763,10 @@ if (!(before && after)) return const type = temp ? 'tempRange' : 'range' - const isStartEarlierEnd = dateCompare(before, after) - this[type].startDate = isStartEarlierEnd ? before : after - this[type].endDate = isStartEarlierEnd ? after : before - }, + const isStartEarlierEnd = dateCompare(before, after) + this[type].startDate = isStartEarlierEnd ? before : after + this[type].endDate = isStartEarlierEnd ? after : before + }, /** * 比较时间大小 */ @@ -818,6 +837,7 @@ width: 100%; flex: 1; } + .uni-date-x { display: flex; flex-direction: row; @@ -829,16 +849,17 @@ font-size: 14px; flex: 1; - .icon-calendar{ - padding-left: 3px; - } - .range-separator{ - height: 35px; - /* #ifndef MP */ - padding: 0 2px; - /* #endif */ + .icon-calendar { + padding-left: 3px; + } + + .range-separator { + height: 35px; + /* #ifndef MP */ + padding: 0 2px; + /* #endif */ line-height: 35px; - } + } } .uni-date-x--border { @@ -865,13 +886,13 @@ .uni-date__x-input { width: auto; height: 35px; - /* #ifndef MP */ - padding-left: 5px; - /* #endif */ + /* #ifndef MP */ + padding-left: 5px; + /* #endif */ position: relative; flex: 1; line-height: 35px; - font-size: 14px; + font-size: 12px; overflow: hidden; } @@ -1029,4 +1050,4 @@ margin-left: -6px; border-bottom-color: #fff; } - + \ No newline at end of file diff --git a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js index fc98623..ab40b23 100644 --- a/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js +++ b/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util.js @@ -96,36 +96,11 @@ class Calendar { getPreMonthDays(amount, dateObj) { const result = [] for (let i = amount - 1; i >= 0; i--) { - const month = dateObj.month > 1 ? dateObj.month -1 : 12 - const year = month === 12 ? dateObj.year - 1 : dateObj.year - const date = new Date(year,month,-i).getDate() - const fullDate = `${year}-${addZero(month)}-${addZero(date)}` - let multiples = this.multipleStatus.data - let multiplesStatus = -1 - if (this.range && multiples) { - multiplesStatus = multiples.findIndex((item) => { - return this.dateEqual(item, fullDate) - }) - } - const checked = multiplesStatus !== -1 - // 获取打点信息 - const extraInfo = this.selected && this.selected.find((item) => { - if (this.dateEqual(fullDate, item.date)) { - return item - } - }) + const month = dateObj.month - 1 result.push({ - fullDate, - year, + date: new Date(dateObj.year, month, -i).getDate(), month, - date, - multiple: this.range ? checked : false, - beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after), - afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after), - disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)), - isToday: fullDate === this.date.fullDate, - userChecked: false, - extraInfo + disable: true }) } return result @@ -140,7 +115,7 @@ class Calendar { const currentDate = `${dateObj.year}-${dateObj.month}-${addZero(i)}` const isToday = fullDate === currentDate // 获取打点信息 - const extraInfo = this.selected && this.selected.find((item) => { + const info = this.selected && this.selected.find((item) => { if (this.dateEqual(currentDate, item.date)) { return item } @@ -169,15 +144,15 @@ class Calendar { result.push({ fullDate: currentDate, year: dateObj.year, - month: dateObj.month, date: i, multiple: this.range ? checked : false, beforeMultiple: this.isLogicBefore(currentDate, this.multipleStatus.before, this.multipleStatus.after), afterMultiple: this.isLogicAfter(currentDate, this.multipleStatus.before, this.multipleStatus.after), + month: dateObj.month, disable: (this.startDate && !dateCompare(this.startDate, currentDate)) || (this.endDate && !dateCompare(currentDate,this.endDate)), isToday, userChecked: false, - extraInfo + extraInfo: info }) } return result @@ -189,35 +164,10 @@ class Calendar { const result = [] const month = dateObj.month + 1 for (let i = 1; i <= amount; i++) { - const month = dateObj.month === 12 ? 1 : dateObj.month*1 + 1 - const year = month === 1 ? dateObj.year + 1 : dateObj.year - const fullDate = `${year}-${addZero(month)}-${addZero(i)}` - let multiples = this.multipleStatus.data - let multiplesStatus = -1 - if (this.range && multiples) { - multiplesStatus = multiples.findIndex((item) => { - return this.dateEqual(item, fullDate) - }) - } - const checked = multiplesStatus !== -1 - // 获取打点信息 - const extraInfo = this.selected && this.selected.find((item) => { - if (this.dateEqual(fullDate, item.date)) { - return item - } - }) result.push({ - fullDate, - year, date: i, month, - multiple: this.range ? checked : false, - beforeMultiple: this.isLogicBefore(fullDate, this.multipleStatus.before, this.multipleStatus.after), - afterMultiple: this.isLogicAfter(fullDate, this.multipleStatus.before, this.multipleStatus.after), - disable: (this.startDate && !dateCompare(this.startDate, fullDate)) || (this.endDate && !dateCompare(fullDate,this.endDate)), - isToday: fullDate === this.date.fullDate, - userChecked: false, - extraInfo + disable: true }) } return result diff --git a/uni_modules/uni-datetime-picker/package.json b/uni_modules/uni-datetime-picker/package.json index cabb668..254d7e3 100644 --- a/uni_modules/uni-datetime-picker/package.json +++ b/uni_modules/uni-datetime-picker/package.json @@ -1,7 +1,7 @@ { "id": "uni-datetime-picker", "displayName": "uni-datetime-picker 日期选择器", - "version": "2.2.24", + "version": "2.2.25", "description": "uni-datetime-picker 日期时间选择器，支持日历，支持范围选择", "keywords": [ "uni-datetime-picker",