Feature request - richer onChange/more onClick handlers

[HemalR]

UX scenario - user selects the hour, the minute and am/pm (last one obv optional depending on 12/24 hours) - it is intuitive and would save a click if there was a prop we could pass, e.g. closeOnSelect, that would automatically close the selection panel on the final click (final click being the minute selector or the am/pm selector...).

Right now, the user has to select the time and then click outside the panel to close it - not a huge deal, but this would make it that much more intuitive and friendly.

Cheers for the best React Timepicker component I've found!

Ps - If there is a way to do the above that I haven't realised, then I'm open to suggestions!

[Vicentecarrillo]

I agree this would be better UX

[Vicentecarrillo]

was able to implement using the open prop

import React from 'react';
import moment from 'moment';
import TimePicker from 'rc-time-picker';

const format = 'HH:mm';
const defaultValue = moment()
  .hour(0)
  .minute(0);

class Time extends React.Component {
  state = { close: undefined, value: defaultValue.format(format) };

  onChange = value => {
    const formattedValue = value.format(format);
    if (this.state.value.split(':').pop() !== formattedValue.split(':').pop()) {
      this.setState({ value: formattedValue, close: true }, () =>
        this.setState({ close: undefined }),
      );
    }
  };

  render() {
    const control = this.state.close ? { open: false } : {};
    return (
      <TimePicker
        showSecond={false}
        defaultValue={defaultValue}
        className="time-picker"
        onChange={this.onChange}
        format={format}
        allowEmpty={false}
        inputReadOnly
        {...control}
      />
    );
  }
}