<ɵInput
ref={inputInstance}
+ {...inputProps.value}
class={`${prefixCls}-date-input`}
v-slots={slots}
value={dateInputValue.value}
- size="sm"
- clearable={props.clearable ?? config.clearable}
- clearIcon={props.clearIcon ?? config.clearIcon}
clearVisible={!!dateInputValue.value}
focused={dateInputFocused.value}
placeholder={dateFormatRef.value}
@@ -112,12 +114,10 @@ export default defineComponent({
/>
{inputEnableStatus.value.enableOverlayTimeInput && (
<ɵInput
+ {...inputProps.value}
class={`${prefixCls}-time-input`}
v-slots={slots}
value={timeInputVaue.value}
- size="sm"
- clearable={props.clearable ?? config.clearable}
- clearIcon={props.clearIcon ?? config.clearIcon}
clearVisible={!!timeInputVaue.value}
placeholder={timeFormatRef.value}
focused={timeInputFocused.value}
@@ -147,33 +147,29 @@ export default defineComponent({
onCellClick: handleDatePanelCellClick,
'onUpdate:activeDate': setActiveDate,
}
+ const _timePanelProps = {
+ ...timePanelProps.value,
+ activeValue: activeDate.value,
+ value: panelValue.value,
+ visible: visiblePanel.value === 'timePanel',
+ onChange: handleTimePanelChange,
+ 'onUpdate:activeValue': setActiveDate,
+ }
const children = [
-
+
{renderInputs(boardPrefixCls)}
<ɵDatePanel v-show={visiblePanel.value === 'datePanel'} v-slots={slots} {...datePanelProps} />
{inputEnableStatus.value.enableOverlayTimeInput && (
- <ɵTimePanel
- v-show={visiblePanel.value === 'timePanel'}
- {...(props.timePanelOptions ?? {})}
- value={panelValue.value}
- visible={visiblePanel.value === 'timePanel'}
- onChange={handleTimePanelChange}
- />
+ <ɵTimePanel v-show={visiblePanel.value === 'timePanel'} {..._timePanelProps} />
)}
,
<ɵFooter v-slots={slots} class={`${prefixCls}-footer`} footer={props.footer} />,
]
- return props.overlayRender ? (
- props.overlayRender(children)
- ) : (
-
- {children}
-
- )
+ return props.overlayRender ? props.overlayRender(children) :
{children}
}
},
})
diff --git a/packages/components/date-picker/src/content/RangeContent.tsx b/packages/components/date-picker/src/content/RangeContent.tsx
index 65594113b..2448ef18d 100644
--- a/packages/components/date-picker/src/content/RangeContent.tsx
+++ b/packages/components/date-picker/src/content/RangeContent.tsx
@@ -5,15 +5,16 @@
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
*/
-import { computed, defineComponent, inject, onMounted, onUpdated, ref } from 'vue'
+import { defineComponent, inject, onMounted, onUpdated, ref } from 'vue'
-import { convertArray } from '@idux/cdk/utils'
import { ɵDatePanel } from '@idux/components/_private/date-panel'
import { ɵFooter } from '@idux/components/_private/footer'
import { ɵInput, type ɵInputInstance } from '@idux/components/_private/input'
import { ɵTimePanel } from '@idux/components/_private/time-panel'
import { useRangeActiveDate } from '../composables/useActiveDate'
+import { useInputProps } from '../composables/useInputProps'
+import { useRangeTimePanelProps } from '../composables/useTimePanelProps'
import { dateRangePickerToken } from '../token'
export default defineComponent({
@@ -21,7 +22,6 @@ export default defineComponent({
const context = inject(dateRangePickerToken)!
const {
props,
- config,
dateConfig,
locale,
slots,
@@ -48,12 +48,12 @@ export default defineComponent({
setOverlayOpened,
} = context
- const timePanelProps = computed(() => convertArray(context.props.timePanelOptions))
const { fromActiveDate, toActiveDate, setFromActiveDate, setToActiveDate } = useRangeActiveDate(
dateConfig,
props,
panelValue,
isSelecting,
+ overlayOpened,
formatRef,
)
@@ -76,8 +76,12 @@ export default defineComponent({
}
}
- const renderBoard = (prefixCls: string, isFrom: boolean) => {
+ const inputProps = useInputProps(context)
+ const timePanelProps = useRangeTimePanelProps(props, timeFormatRef)
+
+ const renderBoard = (isFrom: boolean) => {
const { enableOverlayDateInput, enableOverlayTimeInput } = inputEnableStatus.value
+ const boardPrefixCls = `${mergedPrefixCls.value}-board`
const {
dateInputValue,
@@ -96,15 +100,13 @@ export default defineComponent({
} = isFrom ? fromControl : toControl
const inputs = enableOverlayDateInput && (
-