TimeRange

Time 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('onRangeChange', e)

(e) => console.log('onRangeChange', e)

defaultStartTime

defaultEndTime

timeFormat

errorMessage

startTimeErrorMessage

endTimeErrorMessage

minTime

maxTime

labelProps


      { labelText: "Time Range",
        helpText: "Specify a start and end time for the shift."
      }


      { labelText: "Time Range",
        helpText: "Specify a start and end time for the shift."
      }

disableRangeValidation

interval

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

export default () => {
  return (
    <TimeRange
      onRangeChange={e => console.log("onRangeChange", e)}
      minTime="05:00"
      maxTime="23:30"
      labelProps={{
        labelText: "Time Range",
        helpText:
          "Specify a start and end time for the shift."
      }}
      disableRangeValidation={false}
      interval={15}
    />
  );
}

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

export default () => {
  return (
    <TimeRange
      onRangeChange={e => console.log("onRangeChange", e)}
      minTime="05:00"
      maxTime="23:30"
      labelProps={{
        labelText: "Time Range",
        helpText:
          "Specify a start and end time for the shift."
      }}
      disableRangeValidation={false}
      interval={15}
    />
  );
}

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.
defaultStartTime	string		The default start time in 24 hour time string e.g: 02: 30.
defaultEndTime	string		The default end time in 24 hour time string e.g: 02: 30.
timeFormat	string	hh:mm aa	The default date format (see date-fns for available date formats)
errorMessage	string		The error message to display for the range.
startTimeErrorMessage	string		The error message to display below the start date.
endTimeErrorMessage	string		The error message to display below the end date.
minTime	string		The earliest time that can be selected in 24 hour time string e.g: 02: 30.
maxTime	string		The latest time that can be selected in 24 hour time string e.g: 02: 30.
labelProps	object	{ labelText: 'Time Range'}	Options for the month range label.
disableRangeValidation	boolean	false	Disables the the end date before start date error message.
interval	number	15	The time difference in minutes between the time options

TimeRange

Props

Related Components