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

وقتی دارید کامپوننت سفارشی خودتون رو رندر می کنید، به جای وارد کردن خصوصیاتی مانند id, name, required, placeholder و غیره در دیت پیکر، اونا رو مستقیماً در کامپوننت خودتون وارد کنید.

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

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

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import InputIcon from "react-multi-date-picker/components/input_icon"

export default function Example() {
  return (
    <DatePicker 
      render={<InputIcon/>}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import Icon from "react-multi-date-picker/components/icon"

export default function Example() {
  return (
    <DatePicker 
      render={<Icon/>}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import Button from "react-multi-date-picker/components/button"

export default function Example() {
  return (
    <DatePicker 
      render={<Button/>}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      value="2020/10/19"
      render={(value, openCalendar) => {
        return (
          <button onClick={openCalendar}>
            {value}
          </button>
        )
      }}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import React from "react"

export default function Example() {
  return (
    <DatePicker
      value="2020/10/19"
      render={<CustomComponent />}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

class CustomComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.openCalendar}>
        {this.props.value}
      </button >
    )
  }
}

اگر میخواهید تغییراتی رو که در ورودی دیت پیکر انجام میدید رو به صورت همزمان در تقویم هم مشاهده کنید از گزینه onChange استفاده کنید.

نکته: در نسخه های قبل از ۴ باید بجای onChange از پراپ onValueChange استفاده کنید.

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      render={<CustomInput />}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

function CustomInput({ onFocus, value, onChange }) {
  return (
    <input
      onFocus={onFocus}
      value={value}
      onChange={onChange}
    />
  )
}

multiple_range_v3

نکته: در نسخه های قبل از ۴ باید بجای onFocus از پراپ openCalendar استفاده کنید.

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      multiple
      render={<CustomMultipleInput />}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

function CustomMultipleInput({onFocus, value}) {
  return (
    <input
      onFocus={onFocus}
      value={value}
      readOnly
    />
  )
}

import DatePicker from "react-multi-date-picker"
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"

export default function Example() {
  return (
    <DatePicker
      range
      eachDaysInRange
      render={<CustomRangeInput />}
      calendar={persian}
      locale={persian_fa}
      calendarPosition="bottom-left"
    />
  )
}

function CustomRangeInput({ onFocus, value, separator }) {
  let values = value.split(separator);
  let from = values[0] || "";
  let to = values[1] || "";
  
  value = from && to ? "از " + from + "، تا " + to" : from
  
  return (
    <input
      onFocus={onFocus}
      value={value}
      readOnly
    />
  )
}