ant-design DatePicker::RangePicker interaction or highlighting for "presets"

7ajki6be  于 2个月前  发布在  其他
关注(0)|答案(1)|浏览(41)

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()]
    }
  }
]
fcy6dtqo

fcy6dtqo1#

有相同的feature需求,在preset情况下,点击预设,希望能还要点一次确定,即needConfirm在点击预设按钮之后能有效,以及能区分是点击的预设进行设置的值。

(请忽略:我的业务需求更复杂,希望点击预设之后的操作,能根据先前点的预设,再选择了时间后,提示超过了先前点的预设。即产生组件内的逻辑关联性。)

相关问题