دیت پیکر چند منظوره ری اکت

توضیحات

اگر از نسخه های قبلی به نسخه ۲.۶.۰ بروزرسانی کرده باشید، در هنگام استفاده از انتخابگر زمان داخلی حتما متوجه اخطار نمایش داده شده در کنسول شده اید.

TimePicker داخلی از نسخه 3.0.0 به بالا حذف می شود، به دلیل اینکه تام پیکر مورد استفاده همه نیست و با حذف آن حدود ۲۰ درصد از حجم فایل اصلی کمتر میشود.

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

چند مثال از نحوه استفاده از تایم پیکر در این قسمت آورده شده، پس من به جای نوشتن دوباره آن ها در اینجا، دو مثال از اضافه کردن تایم پیکر در حالت های چند تایی و دامنه را اضافه میکنم.

پراپ ها

پراپ	حالت	پیش فرض	توضیحات
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"	اگر تقویم در حالت چند گانه یا دامنه باشه و همچنین موقعیت انتخابگر زمانم راست یا چپ باشه، یک منو کشویی با فرمت پیش فرض (YYYY/MM/DD) به انتخابگر زمان اضافه می شه. بنابراین اگر خواستید، می تونید فرمت منو رو با این پراپ تغییر بدید.
hStep	Number	1
mStep	Number	1
sStep	Number	1

مرحله پیش‌فرض برای ساعت، دقیقه و ثانیه در انتخابگر زمان 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/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 position="bottom" hStep={2} mStep={3} sStep={4}/>,
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

استفاده از انتخابگر زمان در حالت چندگانه

اگر میخواید از تایم پیکر در حالت چند تایی و دامنه استفاده کنید، بهتره که همزمان از پنل تاریخ ها هم استفاده بشه. چون با کلیک کردن روی هر تاریخ در پنل تاریخ ها اون تاریخ فوکوس میشه و کاربر اینجوری میتونه با سوییج کردن روی هر تاریخ به صورت متوالی، زمان اون تاریخ انتخاب شده رو تغییر بده.

برای مشخص شدن اینکه کدام تاریخ فوکوس شده ، می تونید از پراپرتی markFocused در پنل تاریخ ها استفاده کنید.

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";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
.
.
.
const [values, setValues] = useState(
  [1, 2, 3].map((number) =>
    new DateObject({ calendar: "persian", locale: "fa"}).set({
      day: number,
      hour: number,
      minute: number,
      second: number,
    })
  )
);
.
.
.
<DatePicker
  value={values}
  onChange={setValues}
  format="YYYY/MM/DD HH:mm:ss"
  multiple
  plugins={[
    <TimePicker position="bottom" />,
    <DatePanel markFocused />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

Position Right

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

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

استفاده از انتخابگر زمان در حالت دامنه

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";
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"
  range
  plugins={[
    <TimePicker position="bottom" />,
    <DatePanel markFocused />
  ]}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

استایل دادن به انتخابگر زمان

اگه ترجیح می دید که از انتخابگر زمان در سمت راست یا چپ تقویم استفاده کنید، می تونید از پراپرتی style برای تغییر عرضش استفاده کنید.