Date Range

Date ranges allow users to easily enter a range of dates. If the end date is before the start date, by default an error message will be displayed.

onRangeChange

(e) => console.log(e)

(e) => console.log(e)

defaultStartDate

defaultEndDate

dateFormat

errorMessage

startDateErrorMessage

endDateErrorMessage

minDate

maxDate

labelProps

disableRangeValidation

showTimes

minTime

defaultStartTime

defaultEndTime

maxTime

timeFormat

interval

disableFlipping

startDateInputProps

endDateInputProps

import * as React from "react";
import { DateRange } from "@nulogy/components";

export default () => {
  return (
    <DateRange
      onRangeChange={e => console.log(e)}
      disableRangeValidation={false}
      showTimes={false}
      disableFlipping={false}
    />
  );
}

import * as React from "react";
import { DateRange } from "@nulogy/components";

export default () => {
  return (
    <DateRange
      onRangeChange={e => console.log(e)}
      disableRangeValidation={false}
      showTimes={false}
      disableFlipping={false}
    />
  );
}

Variations

Date Range with Times

Props

Name	Type	Default	Description
onRangeChange	function		The function that will be called whenever the dates in the month range change. Returns an object with the start date, end date and current error, if any.
defaultStartDate	string		The default start date.
defaultEndDate	string		The default end date.
dateFormat	string	MMM yyyy	The default date format (see date-fns for available date formats)
errorMessage	string		The error message to display for the range.
startDateErrorMessage	string		The error message to display below the start date.
endDateErrorMessage	string		The error message to display below the end date.
minDate	date		The earliest date that can be selected.
maxDate	date		The latest date that can be selected.
labelProps	object	{ labelText: 'Date Range'}	Options for the month range label. See Label Props for available option keys.
disableRangeValidation	boolean	false	Disables the end date before start date error message.
showTimes	boolean	false	Shows time pickers next to the date inputs so that a times can be selected.
minTime	string		The earliest time that can be selected.
defaultStartTime	string		The default start date.
defaultEndTime	string		The default end date.
maxTime	string		The latest time that can be selected.
timeFormat	string	hh:mm aa	The default date format (see date-fns for available date formats)
interval	number	15	The time difference in minutes between the time options
disableFlipping	boolean	false	If true, always opens the calendar below the input rather than automatically flipping upward if there is not enough space below the input
startDateInputProps	object		Options for the start date input field, see inputProps table.
endDateInputProps	object		Options for the end date input field, see inputProps table.

Date Range

Variations

Date Range with Times

Props

Related Components