@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.
  • 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'
  • props.color
  • props.timeZone
  • props.fontWeights

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'}
/>

---

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

Or install the digitransit-component module that includes it as a class:

$ npm install @digitransit-component/digitransit-component