React Multi Date Picker

Props

Prop	Type	Default	Descriptions
position	String	"right"
disabled	Boolean	false
hideSeconds	Boolean	false
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

Default Analog Time Picker

Like the TimePicker plugin, the AnalogTimePicker can be used in single, multiple, and range modes.

Here is an example of how to use an analog time picker in a single mode.

import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<DatePicker
  value={value} 
  onChange={setValue}
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[<TimePicker />]} 
/>

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/analog_time_picker";
.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[
    <TimePicker hStep={2} mStep={3} sStep={4}/>,
  ]}
/>

Color & Background

To reduce the size of this plugin, I put each color in a separate CSS file.

Therefore, to change the color of the analog clock in red, green, purple, etc., you must import the analog clock CSS file next to the original CSS color files, as in the example below.

import React, { useState } from "react";
import { Calendar } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";

import "react-multi-date-picker/styles/backgrounds/bg-dark.css";
import "react-multi-date-picker/styles/colors/red.css";
import "react-multi-date-picker/styles/colors/analog_time_picker_red.css";
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<Calendar 
  value={value} 
  onChange={setValue}
  className="bg-dark red"
  plugins={[<TimePicker />]} 
/>

Hiding Seconds

import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm"
  plugins={[
    <TimePicker hideSeconds />
  ]} 
/>

Position Bottom

import React, { useState } from "react";
import { Calendar } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<Calendar 
  value={value} 
  onChange={setValue}
  plugins={[<TimePicker position="bottom"/>]} 
/>

Only Analog Time Picker

import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
.
.
.
<DatePicker 
  disableDayPicker 
  format="HH:mm:ss"
  plugins={[<TimePicker />]} 
/>