CODEWITHSUNDEEP
javascriptmaterial-uireact-datepicker
Dev
Dev

Reputation: 189

react-datepicker time selection with seconds

I need to choose seconds also from react date picker . I had gone through out the docs found this

In this solution i can select hour,min,AM/PM from this but no option for seconds is there any way to customize to select seconds also from this.help needed,below example (look for input Time)

I have tried by changing date format

dateFormat="MM/dd/yyyy h:mm:ss aa" not working

() => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      timeInputLabel="Time:"
      dateFormat="MM/dd/yyyy h:mm aa"
      showTimeInput
    />
  );
};

I found the way to show seconds but this working fine but inside a model after we select time the whole Dialog is closing .I'm using this inside MaterialUi Dialog

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomTimeInput = ({ value, onChange }) => (
    <input
      type="time"
      step="1"
      value={value}
      onChange={e => onChange(e.target.value)}
      style={{ border: "solid 1px pink" }}
    />
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      showTimeInput
      customTimeInput={<ExampleCustomTimeInput />}
    />
  );
};

Upvotes: 5

Views: 8178

Answers (1)

Ivan Turuk
Ivan Turuk

Reputation: 61

You can use the customTimeInput property and path own onChange function in it:

customTimeInput={
        <CustomTimeInput
          onChangeCustom={this.handleChangeTime}
        />
      }

Here is the component:

const CustomTimeInput = ({ date, onChangeCustom}) => {
  const value = date instanceof Date && !isNaN(date)
  ? // Getting time from Date beacuse `value` comes here without seconds
    date.toLocaleTimeString('it-IT')
  : '';

  return (
    <input
      className="bp3-input bp3-fill"
      type="time"
      step="1"
      value={value}
      onChange={(event) => onChangeCustom(date, event.target.value)}
    />);
};

And callback sample:

handleChangeTime = (date, time) => {
  const [hh, mm, ss] = time.split(':');
  const targetDate = date instanceof Date && !isNaN(date) ? date : new Date();
  targetDate.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0);
  this.handleDateChange(targetDate);
};

Upvotes: 5

Related Questions