npm

npm i react-multi-date-picker

yarn

yarn add react-multi-date-picker

ایمپورت کردن پکیج در پروژه

دیت پیکر

import DatePicker from "react-multi-date-picker"

تقویم

import { Calendar } from "react-multi-date-picker"

توضیحات مهم

• من این کامپوننت رو به نحوی نوشتم که شما بتونید ازش با یا بدون استیت استفاده کنید.

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

  نمونه کد دیت پیکر بدون تعریف کردن استیت:

  <DatePicker />

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

  const [value, setValue] = useState(initialValue)
  .
  .
  .
  <DatePicker 
    value={value}
    onChange={handleChange}
  />
  
  function handleChange(value){
    //تغییرات روی تاریخ رو اینجا اعمال کنید
    setValue(value)
  }
  
  

• مقدار اولیه تاریخ میتونه از جنس Date ،DateObject ،Number و یا String باشه ولی به محض انتخاب تاریخ جدید توسط کاربر، Type آن به DateObject تغییر میکنه.

  بنابراین اگر در هنگام سابمیت فرم خود میخواید تاریخ انتخاب شده ی کاربر رو به Date جاوااسکریپت تبدیل کنید، میتونید خیلی راحت از متد ()toDate استفاده کنید.

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

  let [value, setValue] = useState(new Date())
  .
  .
  .
  <DatePicker 
    value={value}
    onChange={setValue}
  />
  .
  .
  .
  <button onClick={handleSubmit}>submit</button>
  .
  .
  .
  function handleSubmit(){
    if (value instanceof DateObject) value = value.toDate()
    
    submitDate(value)
  }
  
  

• اگر مقداری که به دیتپیکر یا تقویم وارد میکنید از جنس استرینگ است و فرمت آن استرینگ با فرمت پیشفرض (YYYY/MM/DD hh:mm:ss a) متفاوت میباشد، باید فرمت آن استرینگ با فرمتی که به دیت پیکر وارد کرده اید همخوانی داشته باشد . در غیر این صورت آن تاریخ اشتباه پارس میشود.

  برای مثال اگر ۰۵/۱۸/۲۰۲۰ ۰۲:۲۰:۳۶ را به عنوان مقدار در نظر گرفته ید، باید فرمتی که به دیتپیکر یا تقویم وارد میکنید هم به این صورت باشد : MM/DD/YYYY HH:mm:ss

  <DatePicker
    value="۰۵/۱۸/۲۰۲۰ ۰۲:۲۰:۳۶"
    format="MM/DD/YYYY HH:mm:ss"
    calendar="persian"
    locale="fa"
  />

دیت پیکر

import React, { useState } from "react"
import DatePicker from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <DatePicker 
      value={value}
      onChange={setValue}
    />
  )
}

تقویم

import React, { useState } from "react"
import { Calendar } from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new Date())

  return (
    <Calendar 
      value={value}
      onChange={setValue}
    />
  )
}

دیت آبجکت

import React from "react"
import DatePicker, { DateObject } from "react-multi-date-picker"

export default function Example() {
  const [value, setValue] = useState(new DateObject())
  
  return (
    <DatePicker 
      value={value} 
      onChange={setValue} 
    />
  )
}