diff --git a/CHANGELOG.md b/CHANGELOG.md index 0694bd88add527f3acdfd6f22571003f18dd403c..57718b765644060cb73b6793226c7aff99698255 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Added +- 新增日历模式时间范围选择器 - 新增打开模态路由视图功能 - 支持界面行为组可见逻辑与启用逻辑 - 添加tokenHeader、tokenPrefix和customParams环境参数 diff --git a/src/common/date-range-picker/date-range-picker.scss b/src/common/date-range-picker/date-range-picker.scss new file mode 100644 index 0000000000000000000000000000000000000000..ea585d1690ca0d192b71bbdbf2ba66b69e7e80be --- /dev/null +++ b/src/common/date-range-picker/date-range-picker.scss @@ -0,0 +1,199 @@ +@include b('calendar-date-range-picker') { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + @include e('header') { + padding: 0 16px; + color: getCssVar(color, white); + background-color: getCssVar(color, primary); + } + @include e('actions') { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: space-between; + width: 100%; + height: 36px; + color: getCssVar(color, white); + + @include m('close') { + font-size: getCssVar(font-size, header-5); + } + @include m('save') { + color: getCssVar(color, fill, 4); + @include when('select') { + color: getCssVar(color, white); + } + } + } + @include e('select') { + margin: getCssVar(spacing, base) 0 getCssVar(spacing, base); + text-align: left; + @include m('placeholder') { + font-size: getCssVar(font-size, small); + } + @include m('range') { + display: flex; + gap: getCssVar(spacing, tight); + align-items: center; + justify-content: space-between; + margin: getCssVar(spacing, base) 0; + font-size: getCssVar(font-size, header-4); + } + @include m('range-date') { + display: flex; + gap: getCssVar(spacing, tight); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + align-items: center; + } + @include m('icons'){ + display: flex; + + gap: getCssVar(spacing, base); + } + } + @include e('content') { + flex: 1; + } +} +@include b('calendar-date-range-picker-calendar') { + @include e('today') { + padding: 4px; + color: getCssVar(color, primary); + border: 1px solid getCssVar(color, primary); + border-radius: 50%; + @include m('bottom-info') { + position: absolute; + right: 0; + bottom: 0; + left: 0; + font-size: var(--van-calendar-info-font-size); + line-height: var(--van-calendar-info-line-height); + } + } +} + +@include b('calendar-date-range-picker-calendar-input') { + display: flex; + gap: getCssVar(spacing, base); + justify-content: center; + width: 100vw; + + @include e('start') { + position: relative; + display: flex; + flex-direction: column; + align-items: start; + justify-content: left; + max-width: 40%; + padding: getCssVar(spacing, base); + margin-top: getCssVar(spacing, base); + text-align: left; + background-color: getCssVar(color, fill, 3); + + @include m('label') { + position: absolute; + top: 50%; + z-index: 1; + font-size: getCssVar(font-size, header, 4); + color: getCssVar(color, tertiary); + transition: all linear 0.1s; + transform: translateY(-50%); + } + @include m('input') { + margin-top: getCssVar(spacing, base); + background-color: getCssVar(color, fill, 3); + opacity: 0; + } + @include when('show-input') { + .#{bem('calendar-date-range-picker-calendar-input','start')} { + @include m('label') { + position: absolute; + top: 0%; + margin-top: getCssVar(spacing, base); + font-size: getCssVar(font-size, small); + color: getCssVar(color, primary); + transform: unset; + } + @include m('input') { + opacity: 1; + } + } + } + @include when('focus') { + border-bottom: 1px solid getCssVar(color, primary); + } + @include when('error') { + border-bottom: 1px solid getCssVar(color, danger); + .#{bem('calendar-date-range-picker-calendar-input','start')} { + @include m('label') { + color: getCssVar(color, danger); + } + } + } + } + @include e('end') { + position: relative; + display: flex; + flex-direction: column; + align-items: start; + justify-content: left; + max-width: 40%; + padding: getCssVar(spacing, base); + margin-top: getCssVar(spacing, base); + text-align: left; + background-color: getCssVar(color, fill, 3); + + @include m('label') { + position: absolute; + top: 50%; + z-index: 1; + font-size: getCssVar(font-size, header, 4); + color: getCssVar(color, tertiary); + transition: all linear 0.1s; + transform: translateY(-50%); + } + @include m('input') { + margin-top: getCssVar(spacing, base); + background-color: getCssVar(color, fill, 3); + opacity: 0; + } + @include when('show-input') { + .#{bem('calendar-date-range-picker-calendar-input','end')} { + @include m('label') { + position: absolute; + top: 0%; + margin-top: getCssVar(spacing, base); + font-size: getCssVar(font-size, small); + color: getCssVar(color, primary); + transform: unset; + } + @include m('input') { + opacity: 1; + } + } + } + @include when('focus') { + border-bottom: 1px solid getCssVar(color, primary); + } + @include when('error') { + border-bottom: 1px solid getCssVar(color, danger); + .#{bem('calendar-date-range-picker-calendar-input','end')} { + @include m('label') { + color: getCssVar(color, danger); + } + } + } + } + + @include e('error') { + position: absolute; + top: calc(100% + getCssVar(spacing,tight)); + font-size: getCssVar(font-size, small); + color: getCssVar(color, danger); + white-space: pre-line; + } +} diff --git a/src/common/date-range-picker/date-range-picker.tsx b/src/common/date-range-picker/date-range-picker.tsx new file mode 100644 index 0000000000000000000000000000000000000000..88042610df76c63bf2ea74a26a6dd68c69bfa669 --- /dev/null +++ b/src/common/date-range-picker/date-range-picker.tsx @@ -0,0 +1,583 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +/* eslint-disable no-param-reassign */ +import { + computed, + defineComponent, + nextTick, + onMounted, + Ref, + ref, + watch, +} from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import dayjs from 'dayjs'; +import './date-range-picker.scss'; +import { debounce } from '@ibiz-template/core'; +import { + validateDate, + validateRange, + validateResults, +} from './date-range-picker.util'; + +export const IBizDateRangeCalendar = defineComponent({ + name: 'IBizDateRangeCalendar', + props: { + // 回显值 + value: { + type: Array, + default: null, + }, + // 格式化串，会将格式化之后的值返回回去 + format: { + type: String, + default: 'YYYY-MM-DD', + }, + // 时间选择范围，默认前后10年 + range: { + type: Number, + default: 10, + }, + }, + emits: ['cancel', 'save'], + setup(props, { emit }) { + const ns = useNamespace('calendar-date-range-picker'); + // 最大可选时间-当前时间往后10年 + const maxDate = new Date(`${new Date().getFullYear() + props.range}`); + // 最小可选时间-当前时间往前10年 + const minDate = new Date(`${new Date().getFullYear() - props.range}`); + + // 选中值 + const select: Ref = ref([]); + + // 允许保存 + const allowSave = ref(false); + + // 日历实例 + const calendarRef = ref(); + + // 是否编辑态-可手动输入 + const isEditable = ref(false); + + // 编辑态开始时间input框绑定变量 + const startDate = ref({ + editorRef: null, // 开始时间的input框Ref + date: '', // input框输入的值 + showErrorInfo: false, // 显示错误信息 + isFocus: false, // 输入框是否聚焦 + errorMsg: '', // 错误信息 + isRangeError: false, // 是否超出范围限制 + }); + + // 编辑态结束时间input框绑定变量 + const endDate = ref({ + editorRef: null, // 结束时间的input框Ref + date: '', // input框输入的值 + showErrorInfo: false, // 显示错误信息 + isFocus: false, // 输入框是否聚焦 + errorMsg: '', // 错误信息 + isRangeError: false, // 是否超出范围限制 + }); + + // 年月日国际化 + const tYear = ibiz.i18n.t('component.dateRangePicker.year'); + const tMonth = ibiz.i18n.t('component.dateRangePicker.month'); + const tDay = ibiz.i18n.t('component.dateRangePicker.day'); + + // 取消，不返回数据 + const onCancel = () => { + emit('cancel'); + }; + + // 保存，抛出当前选择值 + const onSave = () => { + if (!allowSave.value) { + return; + } + emit('save', select.value); + }; + + // 日历完整选择数据后抛出事件 + const onConfirm = (value: Date | Date[]) => { + allowSave.value = true; + if (Array.isArray(value)) { + select.value = value.map((_item: Date) => { + return dayjs(_item).format(props.format); + }); + // 抛出去的值可以根据format进行格式化，但手动输入的时候只能走YYYY/M/D 格式， IOS里 new Date()不识别以 '-'连接的方式 + startDate.value.date = dayjs(select.value[0]).format('YYYY/M/D'); + endDate.value.date = dayjs(select.value[1]).format('YYYY/M/D'); + } + }; + + /** + * 日历点击选中一个日期时触发 + * + * @param {(Date | Date[])} value + */ + const onSelect = (_value: Date | Date[]) => { + allowSave.value = false; + // 清空select.value + select.value = []; + }; + + watch( + () => props.value, + () => { + if ( + !props.value || + !Array.isArray(props.value) || + props.value.length === 0 || + props.value[0] === '' || + props.value[1] === '' + ) { + allowSave.value = false; + select.value = []; + startDate.value.date = ''; + endDate.value.date = ''; + } else { + select.value = props.value; + startDate.value.date = dayjs(select.value[0]).format('YYYY/M/D'); + endDate.value.date = dayjs(select.value[1]).format('YYYY/M/D'); + allowSave.value = true; + } + }, + { + immediate: true, + deep: true, + }, + ); + + /** + * 计算默认选中 + * + * @return {*} + */ + const calcDefaultSelect = computed(() => { + if ( + !select.value || + !Array.isArray(select.value) || + select.value.length === 0 || + select.value[0] === '' || + select.value[1] === '' + ) { + return null; + } + return select.value.map((_item: string) => { + return new Date(dayjs(_item).format('YYYY/M/D')); + }); + }); + + /** + * 格式化开始时间 + * + * @return {*} + */ + const formatStartDate = () => { + if (!select.value[0]) { + return ibiz.i18n.t('component.dateRangePicker.startDate'); + } + return dayjs(select.value[0]).format(props.format); + }; + + /** + * 格式化结束时间 + * + * @return {*} + */ + const formatEndDate = () => { + if (!select.value[1]) { + return ibiz.i18n.t('component.dateRangePicker.endDate'); + } + return dayjs(select.value[1]).format(props.format); + }; + + /** + * 切换编辑态 + * + */ + const switchEdit = () => { + isEditable.value = !isEditable.value; + if (isEditable.value) { + if ( + select.value && + Array.isArray(select.value) && + select.value.length > 0 && + !!select.value[0] && + !!select.value[1] + ) { + startDate.value.date = dayjs(select.value[0]).format('YYYY/M/D'); + endDate.value.date = dayjs(select.value[1]).format('YYYY/M/D'); + } else { + startDate.value.date = ''; + endDate.value.date = ''; + } + } else if ( + !select.value || + !Array.isArray(select.value) || + select.value.length === 0 || + !select.value[0] || + !select.value[1] + ) { + nextTick(() => { + if (calendarRef.value) { + calendarRef.value.scrollToDate(new Date()); + } + }); + } + }; + + /** + * 绘制错误提示信息 + * + */ + const renderErrorInfo = (tag: 'START' | 'END') => { + return ( +
+ {tag === 'START' ? startDate.value.errorMsg : endDate.value.errorMsg} +
+ ); + }; + + /** + * 绘制开始时间和结束时间 范围异常时的提示 + * 返回false,表示范围异常，否则表示无异常或不满足范围异常检测条件 + * + */ + const calcRangeError = () => { + if (startDate.value.date && endDate.value.date) { + const start = validateDate(String(startDate.value.date)); + const end = validateDate(String(endDate.value.date)); + if (start && end) { + const startdate = new Date(startDate.value.date).getTime(); + const enddate = new Date(endDate.value.date).getTime(); + if (startdate > enddate) { + return false; + } + } + } + return true; + }; + + /** + * 输入框防抖 + * 对输入值进行校验，不合规的显示警告，合规的保存 + * + */ + const debounceInstance = debounce((...args: unknown[]) => { + // tag：START | END; START表示是开始时间 ，END 表示是结束时间 + // value：输入值 + const [tag, value] = args; + const result = validateDate(String(value)); + const date = tag === 'START' ? startDate.value : endDate.value; + if (value) { + if (!result) { + // 输入不合法 + date.showErrorInfo = true; + date.errorMsg = `${ibiz.i18n.t( + 'component.dateRangePicker.formatIsInvalid', + )}。\n ${ibiz.i18n.t( + 'component.dateRangePicker.use', + )} yyyy/m/d \n ${ibiz.i18n.t( + 'component.dateRangePicker.example', + )}: ${dayjs(new Date()).format('YYYY/MM/DD')}`; + } else if (!validateRange(String(value), props.range)) { + // 判断该输入是否超过规定年限 + // 超出年限 + date.errorMsg = `${ibiz.i18n.t( + 'component.dateRangePicker.overLimit', + )}: ${dayjs(String(value)).format( + `YYYY${tYear}MM${tMonth}DD${tDay}`, + )}`; + date.showErrorInfo = true; + } else { + date.showErrorInfo = false; + // 判断是否范围异常,即开始时间大于结束时间 + const rangeResult = calcRangeError(); + if (!rangeResult) { + startDate.value.isRangeError = true; + startDate.value.errorMsg = ibiz.i18n.t( + 'component.dateRangePicker.scopeIsInvalid', + ); + endDate.value.isRangeError = true; + } else { + // 输入合法，校验开始和结束两个值是否都正常，都正常的话保存起来 + const validateResult = validateResults( + [startDate.value.date, endDate.value.date], + props.range, + ); + if (validateResult) { + // 校验通过，保存数据 + select.value = [startDate.value.date, endDate.value.date].map( + (_item: string) => { + return dayjs(_item).format(props.format); + }, + ); + } + } + } + } else { + date.showErrorInfo = false; + } + }, 500); + + /** + * 输入框输入 + * + * @param {string} tag + * @param {string} value + */ + const onInput = (tag: 'START' | 'END', value: string) => { + if (tag === 'START') { + startDate.value.showErrorInfo = false; + } else { + endDate.value.showErrorInfo = false; + } + startDate.value.isRangeError = false; + endDate.value.isRangeError = false; + debounceInstance(tag, value); + }; + + // 聚焦 + const onfocus = (tag: 'START' | 'END') => { + if (tag === 'START') { + startDate.value.isFocus = true; + } else { + endDate.value.isFocus = true; + } + }; + + // 失焦 + const onBlur = (tag: 'START' | 'END') => { + if (tag === 'START') { + startDate.value.isFocus = false; + } else { + endDate.value.isFocus = false; + } + }; + + // 点击输入框容器-显示输入框 + const onClick = (tag: 'START' | 'END') => { + if (tag === 'START') { + if (startDate.value.editorRef) { + (startDate.value.editorRef as any).focus(); + } + } else if (endDate.value.editorRef) { + (endDate.value.editorRef as any).focus(); + } + }; + + /** + * 绘制可手动输入日期的input + * + * @return {*} + */ + const renderCalendarInput = () => { + return ( +
+
onClick('START')} + > +
+ {ibiz.i18n.t('component.dateRangePicker.startDate')} +
+ { + startDate.value.editorRef = el; + }} + class={ns.bem('calendar-input', 'start', 'input')} + v-model={startDate.value.date} + placeholder='yyyy/m/d' + onInput={() => onInput('START', startDate.value.date)} + onFocus={() => onfocus('START')} + onBlur={() => onBlur('START')} + > + {(startDate.value.showErrorInfo || startDate.value.isRangeError) && + renderErrorInfo('START')} +
+
onClick('END')} + > +
+ {ibiz.i18n.t('component.dateRangePicker.endDate')} +
+ { + endDate.value.editorRef = el; + }} + class={ns.bem('calendar-input', 'end', 'input')} + v-model={endDate.value.date} + placeholder='yyyy/m/d' + onInput={() => onInput('END', endDate.value.date)} + onFocus={() => onfocus('END')} + onBlur={() => onBlur('END')} + > + {endDate.value.showErrorInfo && renderErrorInfo('END')} +
+
+ ); + }; + + /** + * 格式化日历时间，标记出今天 + * + * @param {IData} day + * @return {*} + */ + const formatter = (day: IData) => { + const year = day.date.getFullYear(); + const month = day.date.getMonth() + 1; + const date = day.date.getDate(); + + const curDate = new Date(); + const curYear = curDate.getFullYear(); + const curMonth = curDate.getMonth() + 1; + const curday = curDate.getDate(); + + if (year === curYear && month === curMonth && date === curday) { + day.text = ( +
+ {curday} +
+ {ibiz.i18n.t('component.dateRangePicker.today')} +
+
+ ); + } + + return day; + }; + + onMounted(() => { + nextTick(() => { + if (calendarRef.value) { + if (!select.value[0]) { + calendarRef.value.scrollToDate(new Date()); + } else { + // 跳转到开始时间 + calendarRef.value.scrollToDate?.( + new Date(dayjs(select.value[0]).format('YYYY/M/D')), + ); + } + } + }); + }); + + // 清除 + const onClear = () => { + select.value = ['', '']; + startDate.value.date = ''; + endDate.value.date = ''; + }; + + return { + ns, + calendarRef, + maxDate, + minDate, + allowSave, + isEditable, + formatter, + onCancel, + calcDefaultSelect, + onSave, + onSelect, + onConfirm, + formatStartDate, + formatEndDate, + switchEdit, + onClear, + renderCalendarInput, + }; + }, + render() { + return ( +
+
+
+
+ +
+
+ + {ibiz.i18n.t('component.dateRangePicker.save')} + +
+
+
+ + {ibiz.i18n.t('component.dateRangePicker.headerPlaceholder')} + +
+
+ {this.formatStartDate()} + ~ + {this.formatEndDate()} +
+
+ + + + + {!this.isEditable ? ( + + ) : ( + + )} + +
+
+
+
+ {!this.isEditable ? ( + + ) : ( + this.renderCalendarInput() + )} +
+ ); + }, +}); diff --git a/src/common/date-range-picker/date-range-picker.util.ts b/src/common/date-range-picker/date-range-picker.util.ts new file mode 100644 index 0000000000000000000000000000000000000000..56db4bcb3d4b051b7abbb3c082c9299375b024b1 --- /dev/null +++ b/src/common/date-range-picker/date-range-picker.util.ts @@ -0,0 +1,74 @@ +/** + * 计算日期合理性 + * 输入要符合yyyy/m/d的规则，同时还要符合正常的月份以及天数 * + * + * @export + */ +export function validateDate(dateStr: string): boolean { + const dateRegex = /^\d{4}\/\d{1,2}\/\d{1,2}$/; + if (!dateRegex.test(dateStr)) { + return false; + } + + const [year, month, day] = dateStr.split('/').map(Number); + + if (month < 1 || month > 12) { + return false; + } + + const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0; + + let daysInMonth; + if (month === 2) { + daysInMonth = isLeapYear ? 29 : 28; + } else if ([4, 6, 9, 11].includes(month)) { + daysInMonth = 30; + } else { + daysInMonth = 31; + } + + return day >= 1 && day <= daysInMonth; +} + +/** + * 年份范围限制 + * + * @export + * @param {number} [range=10] + */ +export function validateRange(dateStr: string, range: number = 10): boolean { + // 年份范围限制 + const date = new Date(dateStr); + const year = date.getFullYear(); + + const currentDate = new Date(); + const currentYear = currentDate.getFullYear(); + const minYear = currentYear - range; + const maxYear = currentYear + range; + if (year < minYear || year > maxYear) { + return false; + } + return true; +} + +/** + * 校验数据是否符合预期 + * + * @export + */ +export function validateResults(items: string[], range: number = 10): boolean { + const result = items.every((item: string) => { + if (!item) { + return false; + } + // 校验日期是否合理 + const isReasonable = validateDate(item); + // 校验日期是否指定超出范围 + const isOverLimit = validateRange(item, range); + if (!isReasonable || !isOverLimit) { + return false; + } + return true; + }); + return result; +} diff --git a/src/common/index.ts b/src/common/index.ts index ec289dc3e244d7982607f0fb25d641a61754e412..30c1abcd70bba1f7bd560d26173866cc045658dc 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -22,6 +22,7 @@ import { IBizButtonList } from './button-list/button-list'; import { IBizEmojiSelect } from './emoji-select/emoji-select'; import { IBizMdCtrlSetting } from './md-ctrl-setting/md-ctrl-setting'; import { IBizPreviewImage } from './preview-image/preview-image'; +import { IBizDateRangeCalendar } from './date-range-picker/date-range-picker'; export * from './col/col'; export * from './row/row'; @@ -29,6 +30,7 @@ export * from './keep-alive/keep-alive'; export const IBizCommonComponents = { install: (v: App): void => { + v.component(IBizDateRangeCalendar.name!, IBizDateRangeCalendar); v.component(IBizViewShell.name, IBizViewShell); v.component(IBizRow.name, IBizRow); v.component(IBizCol.name, IBizCol); diff --git a/src/editor/date-range/date-range-editor.controller.ts b/src/editor/date-range/date-range-editor.controller.ts index c9bb03f7055687a00b2de67869b0a3e87a73ae7e..0ca93877ef113dc31ed4c9b06f11a1e0e3a957c5 100644 --- a/src/editor/date-range/date-range-editor.controller.ts +++ b/src/editor/date-range/date-range-editor.controller.ts @@ -9,6 +9,31 @@ import { IDateRange } from '@ibiz/model-core'; * @extends {EditorController} */ export class DateRangeEditorController extends EditorController { + /** + * 展现模式 + * + * @type {('DEFAULT' | 'CALENDAR')} + * @memberof DateRangeEditorController + */ + public showmode: 'DEFAULT' | 'CALENDAR' = 'DEFAULT'; + + /** + * 初始化 + * + * @protected + * @return {*} {Promise} + * @memberof DateRangeEditorController + */ + protected async onInit(): Promise { + super.onInit(); + if (!this.placeHolder) { + this.placeHolder = ibiz.i18n.t('editor.dateRangePicker.selectRange'); + } + if (this.editorParams?.SHOWMODE === 'CALENDAR') { + this.showmode = 'CALENDAR'; + } + } + /** * 根据编辑器类型获取格式化 * diff --git a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx index 1311ff027e657aba9901e899aa9c2c200afdb2cd..961059547d61d37892f3298e82d29a01845ad766 100644 --- a/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx +++ b/src/editor/date-range/ibiz-date-range-picker/ibiz-date-range-picker.tsx @@ -10,6 +10,7 @@ import RollDate from 'ibiz-mob-rolldate'; import dayjs from 'dayjs'; import { DateRangeEditorController } from '../date-range-editor.controller'; import { usePopstateListener } from '../../../util'; +import { IBizDateRangeCalendar } from '../../../common/date-range-picker/date-range-picker'; export const IBizDateRangePicker = defineComponent({ name: 'IBizDateRangePicker', @@ -59,6 +60,12 @@ export const IBizDateRangePicker = defineComponent({ // 开始时间 const startDate = ref(''); + // 显示模式 + const showmode = c.showmode; + + // 日历选择模态是否显示 + const show = ref(false); + // 编辑器dom const startEditorRef = ref(); const endEditorRef = ref(); @@ -119,6 +126,14 @@ export const IBizDateRangePicker = defineComponent({ return valueArray.value?.[1] || ''; }); + // 拼接开始和结束值 + const rangeText = computed(() => { + if (valueArray.value[0] === '' && valueArray.value[1] === '') { + return ''; + } + return valueArray.value.join(' ~ '); + }); + // 聚焦 const onFocus = () => { emit('focus'); @@ -216,6 +231,47 @@ export const IBizDateRangePicker = defineComponent({ const expandHidden = (text: string) => { return {text}; }; + + // 取消 + const onClose = () => { + show.value = false; + }; + const onSave = (valueArr: string[]) => { + // 保存 + valueArr.forEach((value: string, index: number) => { + onConfirm(value, index); + }); + show.value = false; + }; + + // 绘制模态打开 + const renderCalendarMode = () => { + return ( + + {{ + default: () => { + return ( + + ); + }, + }} + + ); + }; + + // 打开日历选择 + const openCalendar = () => { + show.value = true; + }; + return { ns, c, @@ -229,12 +285,38 @@ export const IBizDateRangePicker = defineComponent({ endEditorRef, endFormatValue, startFormatValue, + rangeText, + showmode, + openCalendar, + renderCalendarMode, onFocus, onBlur, expandHidden, }; }, render() { + if (this.showmode === 'CALENDAR') { + return ( +
+ + {this.renderCalendarMode()} +
+ ); + } return (