The type prop is deprecated. However, I put its components in a separate file so you can import and use them with render prop if you want.

When you are using a custom component, instead of entering properties such as id, name, required, placeholder, etc. into the date picker, enter them directly into your custom component.

Below are examples of how to import and render the internal components, as well as how to render your custom component.

If you are using versions before 3.0.0, click on the link below to view the documentation.

import DatePicker from "react-multi-date-picker"
import InputIcon from "react-multi-date-picker/components/input_icon"

export default function Example() {
  return (
    <DatePicker 
      render={<InputIcon/>}
    />
  )
}

import DatePicker from "react-multi-date-picker"
import Icon from "react-multi-date-picker/components/icon"

export default function Example() {
  return (
    <DatePicker 
      render={<Icon/>}
    />
  )
}

import DatePicker from "react-multi-date-picker"
import Button from "react-multi-date-picker/components/button"

export default function Example() {
  return (
    <DatePicker 
      render={<Button/>}
    />
  )
}

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

export default function Example() {
  return (
    <DatePicker
      value="2020/10/19"
      render={(value, openCalendar) => {
        return (
          <button onClick={openCalendar}>
            {value}
          </button>
        )
      }}
    />
  )
}

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

export default function Example() {
  return (
    <DatePicker
      value="2020/10/19"
      render={<CustomComponent />}
    />
  )
}

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

Use onChange if you want to see changes in the calendar as the input value changes.

Node: In versions before 4, you should use onValueChange prop instead of onChange.

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

export default function Example() {
  return (
    <DatePicker
      render={<CustomInput />}
    />
  )
}

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

In multiple and range mode, the value is sent with the type of Array (string[])

Node: In versions before 4, you should use openCalendar prop instead of onFocus.

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

export default function Example() {
  return (
    <DatePicker
      multiple
      render={<CustomMultipleInput />}
    />
  )
}

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

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

export default function Example() {
  return (
    <DatePicker
      range
      eachDaysInRange
      render={<CustomRangeInput />}
    />
  )
}

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