Usage

Get startedPropsCustomizationUtilitiesTypescriptExamples

Select single day


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
    />
  )
}
export default DatePicker


null

Single day with initial date


const DatePicker = () => {
  const [date, setDate] = useState({ year: 2019, month: 3, day: 20 })
  return (
    <DtPicker
      onChange={setDate}
      initValue={date}
    />
  )
}
export default DatePicker


{
  "year": 2019,
  "month": 3,
  "day": 20
}

Update initial date


const DatePicker = () => {
  const [date, setDate] = useState(null)
  const updateInitValue = () => {
    setDate({
      year: 2020,
      month: 12,
      day: 25
    })
  }
  return (
    <button onClick={updateInitValue} >
      Update init value
    </button>
    <DtPicker
      onChange={setDate}
      initValue={date}
    />
  )
}
export default DatePicker


{
  "year": 2010,
  "month": 3,
  "day": 22
}

Select single Jalali day


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      local="fa"
      showWeekend
    />
  )
}
export default DatePicker


null

Select a list of days between two days


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      type='range'
    />
  )
}
export default DatePicker


null

Range of days with initial date


const DatePicker = () => {
  const defaultValue = {
    from: { year: 2012, month: 5, day: 2 },
    to: { year: 2012, month: 5, day: 23 }
  }
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      initValue={defaultValue}
      type='range'
    />
  )
}
export default DatePicker


null

Select multi days


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      type='multi'
    />
  )
}
export default DatePicker


null

Multi days with initial date


const DatePicker = () => {
  const defaultValue = {[
    {
      year: 2012,
      month: 5,
      day: 29,
      hour: 18,
      minute: 11
    },
    {
      year: 2012,
      month: 5,
      day: 2,
      hour: 18,
      minute: 11
    },
    {
      year: 2012,
      month: 6,
      day: 3,
      hour: 18,
      minute: 11
    }
  ]}
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      initValue={defaultValue}
      type='multi'
    />
  )
}
export default DatePicker


null

Single day with time


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      withTime
      showTimeInput //just show time in input
    />
  )
}
export default DatePicker


null

ShowWeekend,year list style, clearBtn and todayBtn options


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      showWeekend
      clearBtn
      todayBtn
      yearListStyle='list'
    />
  )
}
export default DatePicker


null

Open, close and change callback api (Note: to use onCalenderChange you should pass initValue or you can use useEffect to watch your date changing)


const DatePicker = () => {
  const [date, setDate] = useState(null)
  const handleCalendarChange = (newDate: any) => {
    console.log(newDate)
    console.log('Calendar changed')
  }
  const handleCalendarClose = () => {
    console.log('Calendar closed')
  }
  const handleCalendarOpen = () => {
    console.log('Calendar opened')
  }
  return (
    <DtPicker
      initValue={date}
      onChange={setDate}
      onCalenderChange={handleCalendarChange}
      onCalenderShow={handleCalendarOpen}
      onCalenderHide={handleCalendarClose}
    />
  )
}
export default DatePicker
open: 0change: 0close: 0
null

Set minimum and maximum date


const DatePicker = () => {
const maxDate = {
    year: 2016,
    month: 6,
    day: 23
  }
  const minDate = {
    year: 2012,
    month: 5,
    day: 2
  }
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      minDate={minDate}
      maxDate={maxDate}
    />
  )
}
export default DatePicker


null

Set a list of disabled dates


const DatePicker = () => {
  const [date, setDate] = useState(null)
  const disabledDates = [
    {
      year: 2015,
      month: 6,
      day: 23
    },
    {
      year: 2015,
      month: 6,
      day: 12
    },
    {
      year: 2015,
      month: 6,
      day: 10
    }
  ]
  return (
    <DtPicker
      onChange={setDate}
      disabledDates={disabledDatesList}
      minDate={minDate}
      maxDate={maxDate}
    />
  )
}
export default DatePicker


null

AutoClose : false


import DtPicker from 'react-calendar-datetime-picker'
const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      autoClose={false}
    />
  )
}
export default DatePicker


null

Without input


import  { DtCalendar } from 'react-calendar-datetime-picker'
const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtCalendar
      onChange={setDate}
    />
  )
}
export default DatePicker
2022
May
  • Su
  • Mo
  • Tu
  • We
  • Th
  • Fr
  • Sa
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 1
  • 2
  • 3
  • 4
null

Custom calendar: icons - input placeholder - styles


const DatePicker = () => {
  const [date, setDate] = useState(null)
  return (
    <DtPicker
      onChange={setDate}
      NextBtnIcon={arrowRight}
      PreviousBtnIcon={arrowLeft}
      placeholder='select date'
      fromLabel='From date'
      toLabel='To date'
      type='range'
      inputClass='custom-input'
      daysClass='custom-days'
      headerClass='custom-header'
    />
  )
}
export default DatePicker

Style


.custom-input {
  text-align: right;
  color: #009a17;
  height: 46px !important;
  line-height: 46px !important;
  &::placeholder {
    color: #009a17;
  }
}
.custom-days {
  background-color: #c8daff;
  .is-week-days {
    color: #d20000;
  }
  .is-disabled {
    color: #444;
  }
}
.custom-header {
  background-color: #538bff;
}


null