مانند انتخابگر زمان، انتخابگر زمان آنالوگ را هم میتوان در حالت های تکی، چند تایی و دامنه استفاده کرد.

در اینجا مثالی از نحوه استفاده از این افزونه در کنار انتخابگر تکی آورده شده است.

import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<DatePicker
  value={value} 
  onChange={setValue}
  format="MM/DD/YYYY HH:mm:ss"
  plugins={[<TimePicker position="left"/>]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

مرحله پیش‌فرض برای ساعت، دقیقه و ثانیه در انتخابگر زمان 1 است. با این حال، اگر می‌خواهید مقدار پیش‌فرض را تغییر دهید، می‌توانید آن را با استفاده از ویژگی‌های hStep، mStep و sStep تنظیم کنید. این ویژگی ها را می توان تغییر داد تا نیازهای خاص شما را برآورده کند. لطفاً مطمئن شوید که مقادیر hStep، mStep و sStep از نوع داده عددی هستند.

import React from "react";
import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  format="YYYY/MM/DD HH:mm:ss"
  plugins={[
    <TimePicker hStep={2} mStep={3} sStep={4}/>,
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

برای کمتر شدن حجم این پلاگین، هر رنگ را در یک فایل سی اس اس جداگانه قراردادم.

بنابراین برای تغییر رنگ ساعت انالوگ در رنگ های قرمز، سبز، بنفش و ... باید مانند مثال زیر، در کنار فایل رنگ های سی اس اس اصلی، فایل سی اس اس ساعت آنالوگ را هم ایمپورت کنید.

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";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<Calendar 
  value={value} 
  onChange={setValue}
  className="bg-dark red"
  plugins={[<TimePicker position="left"/>]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker
  format="MM/DD/YYYY HH:mm"
  plugins={[
    <TimePicker hideSeconds position="left"/>
  ]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import React, { useState } from "react";
import { Calendar } from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [value, setValue] = useState(new Date());
.
.
.
<Calendar 
  value={value} 
  onChange={setValue}
  plugins={[<TimePicker position="bottom"/>]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import DatePicker from "react-multi-date-picker";
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
<DatePicker 
  disableDayPicker 
  format="HH:mm:ss"
  plugins={[<TimePicker />]} 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>