<DatePicker 
  type="input"
/>

<DatePicker 
  type="button"
/>

<DatePicker 
  type="input-icon" 
/>

<DatePicker 
  type="icon" 
/>

<DatePicker
  value="2020/10/19"
  type="custom"
  render={(stringDate, openCalendar) => {
    return (
      <button onClick={openCalendar}>
        {stringDate}
      </button>
    )
  }}
/>

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 />}
/>

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 React from "react"

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

<DatePicker
  type="custom"
  render={<CustomInput />}
/>

At version 1.8.1 and in multiple and range mode, an array of stringDates are sent instead of stringDate.

So to get the input value in versions >= 1.8.1, you can follow the below examples.

import React from "react"

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

<DatePicker
  multiple
  type="custom"
  render={<CustomMultipleInput />}
/>

import React from "react"

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

<DatePicker
  range
  eachDaysInRange
  type="custom"
  render={<CustomRangeInput />}
/>