<DatePicker 
  type="input"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker 
  type="button"
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker 
  type="input-icon" 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker 
  type="icon" 
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

<DatePicker
  value="2020/10/19"
  type="custom"
  render={(stringDate, openCalendar) => {
    return (
      <button onClick={openCalendar}>
        {stringDate}
      </button>
    )
  }}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import React from "react"
.
.
.
class CustomComponent extends React.Component {
  render() {
    return (
      <button onClick={this.props.openCalendar}>
        {this.props.stringDate}
      </button >
    )
  }
}
.
.
.
<DatePicker
  value="2020/10/19"
  type="custom"
  render={<CustomComponent />}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

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

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

import React from "react"

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

<DatePicker
  type="custom"
  render={<CustomInput />}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

در نسخه 1.8.1 و در حالت چندتایی و دامنه، به جای stringDate ، آرایه ای از stringDate ها ارسال میشود.

بنابراین برای بدست آوردن مقدار ورودی در نسخه های >= 1.8.1 ، می توانید مثال های زیر را دنبال کنید.

import React from "react"

function CustomMultipleInput({openCalendar, stringDates}) {
  return (
    <input
      onFocus={openCalendar}
      value={stringDates.join(", ")}
      readOnly
    />
  )
}

<DatePicker
  multiple
  type="custom"
  render={<CustomMultipleInput />}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>

import React from "react"

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

<DatePicker
  range
  eachDaysInRange
  type="custom"
  render={<CustomRangeInput />}
  calendar={persian}
  locale={persian_fa}
  calendarPosition="bottom-right"
/>