@digitransit-component/digitransit-component-datetimepicker

Datetimepicker

This component renders an input to choose a date and time. Renders separate input fields for date and time selection. Values for timestamp and arriveBy correspond to Digitransit query params time and arriveBy. This component will display a native date input on mobile and a custom one for desktop. Mobile detection is done by parsing user agent.

Parameters

• props Object

  • props.realtime boolean Determine if selected time should be updated in realtime when 'now' is selected. (optional, default false)
  • props.initialArriveBy boolean Initial value for arriveBy. Determines if picker is in arrival mode (true) or departure mode (false). Correct value is kept in component state even if this is not updated. Changing this will also trigger change in the component.
  • props.initialTimestamp Number Initial value for selected time. Unix timestamp in seconds. Updating this will change timepicker value but the correct value is kept in component state even if this is not updated.
  • props.onDepartureClick function Called with (time) when "departure" button is clicked. time is current input value in seconds
  • props.onArrivalClick function Called with (time) when "arrival" button is clicked. time is current input value in seconds
  • props.onTimeChange function Called with (time, arriveBy) when time input changes. time is number timestamp in seconds, arriveBy is boolean
  • props.onDateChange function Called with (time, arriveBy) when date input changes. time is number timestamp in seconds, arriveBy is boolean
  • props.onNowClick function Called when "depart now" button is clicked. time is current input value in seconds
  • props.embedWhenClosed node JSX element to render in the corner when input is closed
  • props.embedWhenOpen node JSX element to render when input is open
  • props.lang string Language selection. Default 'en' (optional, default 'en')
  • props.serviceTimeRange number Determine number of days shown in timepicker. Optional. default is 30. (optional, default 30)
  • props.onOpen function Determine what to do when timepicker is open. Optional. no default implementation.
  • props.onClose function Determine what to do when timepicker is closed. Optional. no default implementation.
  • props.openPicker function Determine if timepicker should be open in intial render. Optional. Default is undefined.
  • props.color (optional, default '#007ac9')
  • props.timeZone (optional, default 'Europe/Helsinki')

Examples

<Datetimepicker
  realtime={true}
  initialTimestamp={1590133823}
  initialArriveBy={false}
  onTimeChange={(time, arriveBy) => changeUrl(time, arriveBy)}
  onDateChange={(time, arriveBy) => changeUrl(time, arriveBy)}
  onNowClick={(time) => changeUrl(undefined, undefined)}
  onDepartureClick={(time) => changeUrl(time, 'true')}
  onArrivalClick={(time) => changeUrl(time, undefined)}
  embedWhenClosed={<button />}
  lang={'en'}
  serviceTimeRange={15}
/>

---

This module is part of the Digitransit-ui project. It is maintained in the HSLdevcom/digitransit-ui repository, where you can create PRs and issues.

Installation

Install this module individually:

$ npm install @digitransit-component/digitransit-component-datetimepicker