Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

timePicker能否增加rangepicker子组件 #8584

Closed
vonxq opened this issue Dec 13, 2017 · 4 comments
Closed

timePicker能否增加rangepicker子组件 #8584

vonxq opened this issue Dec 13, 2017 · 4 comments
Labels

Comments

@vonxq
Copy link

vonxq commented Dec 13, 2017

What problem does this feature solve?

选时间段组件,像TimePicker的rangePicker选month和date一样

antd3.0里RangePicker也支持mode=['time', 'time'],但这个默认弹出显示的还是['date', 'date'],只能选完date后再选时间,最终的返回值里也是包含date信息的moment值
本来自己用 to 也可以做到,但表单中的处理有点复杂,表项的required判断也需要一些逻辑。
Request for time range picker 提供时间段选择器这个issue里@benjycui说的形式不知能否实现呢?能做到这一步也是挺好的

// RangeTimePicker
<RangePicker format="HH:mm:ss" showPanels={['time', 'time']} />

What does the proposed API look like?

const RangePicker = TimePicker.RangePicker
// 使用:
<RangePicker />
@ant-design-bot
Copy link
Contributor

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

@benjycui
Copy link
Contributor

@ant-design-bot
Copy link
Contributor

Hello @vonxq, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

@ButuzGOL
Copy link

ButuzGOL commented Nov 16, 2019

Temporary solution

const { RangePicker } = DatePicker;

    <RangePicker
        defaultValue={[
          moment('1989-09-07 09:00', 'YYYY-MM-DD HH:mm'),
          moment('1989-09-07 22:00', 'YYYY-MM-DD HH:mm'),
        ]}
        placeholder={['Start Time', 'End Time']}
        showTime={{ format: 'HH:mm' }}
        format="HH:mm"
        mode={['time', 'time']}
        dropdownClassName="clean-to-time-range-picker"
      />
    <Global
        styles={{
          '.clean-to-time-range-picker .ant-calendar-time-picker-btn': {
            display: 'none !important',
          },
          '.clean-to-time-range-picker .ant-calendar-time-picker-inner': {
            paddingTop: '0 !important',
          },
        }}
      />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants