React Multi Date Picker

Descriptions

If you have upgraded from previous versions to version 2.6.0, you must have noticed the warning displayed on the console when using the internal time picker.

Internal TimePicker is going to be removed from version 3.0.0 and above, because TimePicker is not used by everyone and removing it reduces the size of the main file by about 20%.

Also, with the changes I made in this plugin, you can now use the time picker in multiple and range modes, which the main time picker did not have this feature.

Here are a few examples of how to use the TimePicker plugin, so instead of rewriting them here, I will add two examples of adding time picker in multiple and range modes.

Props

Prop	Type	Default	Descriptions
position	String	"right"
disabled	Boolean	false
hideSeconds	Boolean	false
header	Boolean	true	positions top/bottom: always false, positions right/left: default true
format	String	"YYYY/MM/DD"	If the calendar is in multiple or range mode, and the time picker position is right or left, a select with the default format (YYYY/MM/DD) will be added to the time picker. So, you can change the format of the select with this prop.
hStep	Number	1
mStep	Number	1
sStep	Number	1

Utilizing Step for Arrow Icons

The default step for the hour, minute, and second in the time picker is 1. However, if you wish to change the default value, you can set it using the hStep, mStep, and sStep properties. These properties can be modified to meet your specific requirements. Please ensure that the values for hStep, mStep, and sStep are of the number data type.

import React from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";
.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[
    <TimePicker position="bottom" hStep={2} mStep={3} sStep={4}/>,
  ]}
/>

Using TimePicker in Multiple Mode

To use the TimePicker in multiple and range modes, it is better to use the DatePanel. This is because by clicking on any dates in the DatePanel, that date will be focused, and by clicking on each date, the time of that selected date can be changed sequentially.

To determine which date is focused, you can use the markFocused property in the DatePanel.

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";
import DatePanel from "react-multi-date-picker/plugins/date_panel";
.
.
.
const [values, setValues] = useState(
  [1, 2, 3].map((number) =>
    new DateObject().set({
      day: number,
      hour: number,
      minute: number,
      second: number,
    })
  )
);
.
.
.
<DatePicker
  value={values}
  onChange={setValues}
  format="MM/DD/YYYY HH:mm:ss"
  multiple
  plugins={[
    <TimePicker position="bottom" />,
    <DatePanel markFocused />
  ]}
/>

Position Right

If you do not want to use the date panel, you can use the time picker with the default position, then you can use the internal select to change the focused date.

import React, { useState } from "react";
import DatePicker, { DateObject } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";
.
.
.
const [values, setValues] = useState([
  new DateObject(),
  new DateObject().add(1,"day")
]);
.
.
.
<Calendar
  value={values}
  onChange={setValues}
  multiple
  plugins={[<TimePicker />]}
/>

Using TimePicker in Range Mode

import React from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/time_picker";
import DatePanel from "react-multi-date-picker/plugins/date_panel";
.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm:ss"
  range
  plugins={[
    <TimePicker position="bottom" />,
    <DatePanel markFocused />
  ]}
/>

Styling TimePicker

If you prefer to use the time picker on the right or left side of the calendar, you can use the style property to change its width.

.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm"
  plugins={[
    <TimePicker
      hideSeconds
      style={{ minWidth: "100px" }}
    />
  ]}
/>