Date Range Input

Related component

Basic usage

Install date-fns

npm install date-fns --save
or
yarn add date-fns

import { DateRangeInput } from '@doopage/react-ui-kit'
import { addDays } from "date-fns";
// import css
import '@doopage/react-ui-kit/dist/doopage-ui-kit.css'

const Example = () => {
    return (
      <DateRangeInput
        label={'select date range'}
        onChange={(values) => console.log(values)}
        minDate={addDays(new Date(), -30)}
        maxDate={addDays(new Date(), 30)}
      />
    );
}

export default Example;

Playground

Basic

Select Date Range

<DateRangeInput
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

<DateRangeInput
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

Advanced

One month

Select Date Range

<DateRangeInput
  months={1}
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

<DateRangeInput
  months={1}
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

Hide defined range

Select Date Range

<DateRangeInput
  months={1}
  minDate={addDays(new Date(), -30)}
  maxDate={addDays(new Date(), 30)}
  hideDefinedRange
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

<DateRangeInput
  months={1}
  minDate={addDays(new Date(), -30)}
  maxDate={addDays(new Date(), 30)}
  hideDefinedRange
  label={'Select Date Range'}
  onChange={values => console.log(values)}
/>

Control

Select Date Range

() => {
  const [range, setRange] = useState([1606755600000, 1609347600000])
  console.log('select range ', range)
  return (
    <DateRangeInput
      fullWidth
      value={range}
      months={1}
      dateFormat="dd/MM/yyyy"
      minDate={addDays(new Date(), -30)}
      maxDate={addDays(new Date(), 30)}
      hideDefinedRange
      label={'Select Date Range'}
      onChange={setRange}
    />
  )
}

() => {
  const [range, setRange] = useState([1606755600000, 1609347600000])
  console.log('select range ', range)
  return (
    <DateRangeInput
      fullWidth
      value={range}
      months={1}
      dateFormat="dd/MM/yyyy"
      minDate={addDays(new Date(), -30)}
      maxDate={addDays(new Date(), 30)}
      hideDefinedRange
      label={'Select Date Range'}
      onChange={setRange}
    />
  )
}

Properties

Prop name	Type	Default	Required	Description
value	`[number, number] \| undefined`	—	false
onChange	`((arr: [number, number]) => void) \| undefined`	—	false
inputProps	`InputProps \| undefined`	—	false
loading	`boolean \| undefined`	—	false
helperText	`string \| undefined`	—	false
error	`string \| undefined`	—	false
label	`string \| undefined`	—	false
placeholder	`string \| undefined`	—	false
native	`boolean \| undefined`	—	false
popupProps	`PopupProps \| undefined`	—	false
dateFormat	`string \| undefined`	—	false
hideDefinedRange	`boolean \| undefined`	—	false
fullWidth	`boolean \| undefined`	—	false
disabled	`boolean \| undefined`	—	false
className	`string \| undefined`	—	false	default:
lang	`"tr" \| "cn" \| "jp" \| "fr" \| "it" \| "de" \| "ko" \| "es" \| "ru" \| undefined`	—	false	Calendar languages. (‘cn’ - Chinese, ‘jp’ - Japanese, ‘fr’ - French, ‘it’ - Italian, ‘de’ - German, ‘ko’ - Korean, ‘es’ - Spanish, ‘ru’ - Russian, ‘tr’ - Turkish) default: none
color	`string \| undefined`	—	false
key	`string \| undefined`	—	false
autoFocus	`boolean \| undefined`	—	false
renderStaticRangeLabel	`((range: DefinedRange) => Element) \| undefined`	—	false
staticRanges	`StaticRange[] \| undefined`	—	false
inputRanges	`InputRange[] \| undefined`	—	false
locale	`Locale \| undefined`	—	false	default: enUs from locale. Complete list here https://github.com/Adphorus/react-date-range/blob/next/src/locale/index.js
linkedCalendars	`boolean \| undefined`	—	false	default: false
calendars	`number \| undefined`	—	false	default: 2
ranges	`Range[] \| undefined`	—	false	default: none
scroll	`ScrollOptions \| undefined`	—	false	default: { enabled: false }
showSelectionPreview	`boolean \| undefined`	—	false	default: false
twoStepChange	`boolean \| undefined`	—	false	default: false
showMonthArrow	`boolean \| undefined`	—	false	default: true
rangedCalendars	`boolean \| undefined`	—	false	default: false
specialDays	`DateContainerType[] \| undefined`	—	false	default: none
months	`number \| undefined`	—	false	default: 1
weekStartsOn	`number \| undefined`	—	false	default:
showMonthAndYearPickers	`boolean \| undefined`	—	false	default: true
rangeColors	`string[] \| undefined`	—	false	default: []
shownDate	`Date \| undefined`	—	false	default:
disabledDates	`Date[] \| undefined`	—	false	default:
disabledDay	`((date: Date) => boolean) \| undefined`	—	false	default:
startDatePlaceholder	`string \| undefined`	—	false	default: Early
endDatePlaceholder	`string \| undefined`	—	false	default: Continuous
dateDisplayFormat	`string \| undefined`	—	false	default: MMM d, yyyy
dayDisplayFormat	`string \| undefined`	—	false	default: d
weekdayDisplayFormat	`string \| undefined`	—	false	default: E
monthDisplayFormat	`string \| undefined`	—	false	default: MMM yyyy
direction	`string \| undefined`	—	false	default: vertical
moveRangeOnFirstSelection	`boolean \| undefined`	—	false	default: false
editableDateInputs	`boolean \| undefined`	—	false	default: false
focusedRange	`[number, number] \| undefined`	—	false	default:
initialFocusedRange	`[number, number] \| undefined`	—	false	default: [0, 0]
onRangeFocusChange	`((focusedRange: [number, number]) => void) \| undefined`	—	false	default:
preview	`Preview \| undefined`	—	false	default:
showPreview	`boolean \| undefined`	—	false	default: true
onPreviewChange	`((preview: Preview) => void) \| undefined`	—	false	default:
startDate	`Date \| undefined`	—	false	default: today
endDate	`Date \| undefined`	—	false	default: today
showDateDisplay	`boolean \| undefined`	—	false
format	`string \| undefined`	—	false	default: DD/MM/YYY
firstDayOfWeek	`number \| undefined`	—	false
theme	`CalendarTheme \| undefined`	—	false
onInit	`((range: Range) => void) \| undefined`	—	false	default: none
minDate	`string \| Date \| DateFunc \| undefined`	—	false	default: none
maxDate	`string \| Date \| DateFunc \| undefined`	—	false	default: none
classNames	`Partial<ClassNames> \| undefined`	—	false	Custom class names for elements
navigatorRenderer	`((currentFocusedDate: Date, changeShownDate: (shownDate: Date) => void, props: CommonCalendarProps) => Element) \| undefined`	—	false	default: none
onShownDateChange	`((visibleMonth: Date) => void) \| undefined`	—	false	default: none
dragSelectionEnabled	`boolean \| undefined`	—	false	default: true
fixedHeight	`boolean \| undefined`	—	false	default: false

Menu

Playground

Basic

Advanced

One month

Hide defined range

Control

Properties