What problem does this feature solve?
I am referring to the snd example in https://ant.design/components/date-picker#components-date-picker-demo-preset-ranges
I want to be able to show my user on initial load that he has selected a certain preset.
I understand that the component basically does just support dates but for my use-case I should be able to display a selection on the preset.
I was trying to understand the codebase, as I understand that the api does not support a "active" selection of some sort for the presets.
If someone can point me to the part in the codebase where i could figure out how to fake some css.
What does the proposed API look like?
Ideally i want to have keys or ids ... but this is probably too much to ask, as the presets are also used with the color picker.
const rangePresets: TimeRangePickerProps['presets'] = [
{
label: 'Last 7 Days',
key: 'last_7d',
value: [dayjs().add(-7, 'd'), dayjs()]
},
{
label: 'Last 14 Days',
key: 'last_14d',
value:[dayjs().add(-14, 'd'), dayjs()]
}
]
const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[], preset: string | null) => {
// do s.th. with the preset
if (dates) {
console.log('From: ', dates[0], ', to: ', dates[1]);
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
} else {
console.log('Clear');
}
};
<RangePicker defaultValue={last_7d} presets={rangePresets} onChange={onRangeChange} />
But maybe there is at least some way to highlight the preset if it matches the current dates applyed.
Then i can make some logic around the value callback functions and set state with the "hovered" preset.
const [preset, setPreset] = useState("last_7d");
const rangePresets: TimeRangePickerProps['presets'] = [
{
label: 'Last 7 Days',
value: () => {
setPreset('last_7d')
return [dayjs().add(-7, 'd'), dayjs()]
}
},
{
label: 'Last 14 Days',
value: () => {
setPreset('last_14d')
return [dayjs().add(-14, 'd'), dayjs()]
}
}
]
1条答案
按热度按时间fcy6dtqo1#
有相同的feature需求,在preset情况下,点击预设,希望能还要点一次确定,即needConfirm在点击预设按钮之后能有效,以及能区分是点击的预设进行设置的值。
(请忽略:我的业务需求更复杂,希望点击预设之后的操作,能根据先前点的预设,再选择了时间后,提示超过了先前点的预设。即产生组件内的逻辑关联性。)