Feature require Time Range Picker feature

[imakou]

What problem does this feature solve?

Hi,
First of all, the framework is awesome!

But, I am facing a feature which doesn't implement by ANTD

This issue could relate this:
#8584

But the feature is still not implemented yet in 3.x ANTD.

What does the proposed API look like?

const RangePicker = TimePicker.RangePicker
...
<RangePicker />

Just allows users to pick time range rather than date first then time range.

[benjycui]

Just use RangePicker[mode], see: https://ant.design/components/date-picker-cn/#components-date-picker-demo-mode

[imakou]

@benjycui Hi, thanks for your replying.
But, I cannot quite understand how to use it.
I've changed state as mode:['time','time'] for rangepicker.
It shows some error message

"Warning: Failed prop type: Invalid prop `mode[0]` of value `time` supplied to `RangeCalendar`, expected one of ['date','month','year','decade'].
    in RangeCalendar (created by RangePicker)
    in RangePicker (created by LocaleReceiver)
    in LocaleReceiver (created by PickerWrapper)
    in PickerWrapper (created by ControlledRangePicker)
    in ControlledRangePicker
    in div"

Could you please give me more specific example or demo?

In the demo from your link, I can see that only DatePicker is allowed to set mode:["time"].
On the other hand, RangePicker doesn't be allowed to set mode:["time"].

[imakou]

any update?

Thanks.

[yesmeck]

Related #8858

[imakou]

@yesmeck
Thanks. Will the feature be implemented in the feature?
The time ranger pick is awesome in Ant Design, but it cannot be used independently.
It must be called DatePicker then TimePicker. Hopely, there is an independent time ranger picker.
:)

[sahilchopra]

+1

[rahulborah]

Any updates on TimeRangePicker?

[yoyo837]

In version 3.0, I used two TimePicker combinations to achieve the goal, although this is not a good method, but it is better than nothing.

 <TimePicker
            placeholder="Select"
            hideDisabledOptions
            popupClassName={style.timepickerPopup}
            {...props}
            open={open}
            onOpenChange={this.handleOpenChange}
            value={startValue === undefined ? firstValue : startValue == null ? undefined : startValue}
            defaultOpenValue={min}
            disabledHours={this.disabledStartTimeHours}
            disabledMinutes={this.disabledStartTimeMinutes}
            disabledSeconds={this.disabledStartTimeSeconds}
            onChange={ev => this.onStartChange(formName, ev)}
            addon={() => (
              <Button size="small" type="primary" onClick={this.handleClose}>
                Ok
              </Button>
            )}
          />

[rahulborah]

@yoyo837 Can you provide an example code like in code sandbox?

[yoyo837]

@rahulborah https://codesandbox.io/s/antd-reproduction-template-gl5j0 Just an example, not a complete feature.

[afc163]

Already supported in 4.0: https://ant.design/components/time-picker-cn/#components-time-picker-demo-range-picker

[yoyo837]

@gouflv It is.