The Picker Object

The picker object provides methods to manage the UI and actions to update the state.

It can be used to customize and extend the functionality of any renderer.

Properties

store

The store object contains the state of the picker.

For a full reference, read the API of the Store Object.

Methods

getValue

Arguments	Returns
template: string (optional)	string

Gets the current selected value as a formatted string.

const value = picker.getValue()
console.log(value) // '1 January, 2019 @ 12:00 a.m.'

With the optional template argument, the string can be formatted using the formatting hooks.

const value = picker.getValue('YYYY-MM-DD')
console.log(value) // '2019-01-01'

subscribeToSelection

Arguments	Returns
callback: Function	unsubscribe: Function

Subscribes to updates to the selected value.

The function returned can be called to unsubscribe to the updates.

const callback = ({ value, date }) => {
  console.log(value) // '1 January, 2019 @ 12:00 a.m.'
  console.log(date.getTime()) // 1546318800000
}
const unsubscribe = picker.subscribeToSelection(callback)

Actions

setSelected

Arguments	Returns
{   value: Date | string | number,   isUpdatingView?: boolean, }	nothing

An action that sets the selected state of the store.

Note: isUpdatingView defaults to true. To prevent updating the view, set it to false.

picker.setSelected({
  value: new Date(2020, 0, 1),
})

setHighlighted

Arguments	Returns
{   keyCode: number, }	nothing

An action that sets the highlighted state of the store using a keyboard event's key code.

For instance, the "up" key's key code highlights the date 7 days before the currently highlighted date.

picker.setHighlighted({
  keyCode: 39,
})

setMaximum

Arguments	Returns
{   value: Date, }	nothing

An action that sets the maximum state of the store.

picker.setMaximum({
  value: new Date(2021, 0, 1),
})

setMinimum

Arguments	Returns
{   value: Date, }	nothing

An action that sets the minimum state of the store.

picker.setMinimum({
  value: new Date(2019, 1, 1),
})

setTime

Arguments	Returns
{   hours?: number,   minutes?: number, }	nothing

An action that sets the time of the selected state of the store.

picker.setTime({
  hours: 9,
})

setFirstDayOfWeek

Arguments	Returns
{   value: number, }	nothing

An action that sets the firstDayOfWeek state of the store.

picker.setFirstDayOfWeek({
  value: 5,
})

clear

Arguments	Returns
none	nothing

An action that clears the selected state of the store.

picker.clear()

viewNext

Arguments	Returns
none	nothing

An action that updates the view and highlight state of the store to show the next month.

picker.viewNext()

viewPrevious

Arguments	Returns
none	nothing

An action that updates the view and highlight state of the store to show the previous month.

picker.viewPrevious()

viewToday

Arguments	Returns
none	nothing

An action that updates the view and highlight state of the store to show the month of "today".

picker.viewToday()

cycleHourUp

Arguments	Returns
none	nothing

An action that updates the selected state of the store to cycle up through the hours of 1 - 12.

picker.cycleHourUp()

cycleHourDown

Arguments	Returns
none	nothing

An action that updates the selected state of the store to cycle down through the hours of 1 - 12.

picker.cycleHourDown()

cycleMinuteUp

Arguments	Returns
none	nothing

An action that updates the selected state of the store to cycle up through the minutes of 0 - 59.

picker.cycleMinuteUp()

cycleMinuteDown

Arguments	Returns
none	nothing

An action that updates the selected state of the store to cycle down through the minutes of 0 - 59.

picker.cycleMinuteDown()

cycleMeridiem

Arguments	Returns
none	nothing

An action that updates the selected state of the store to cycle the day time period (meridiem) between AM and PM.

picker.cycleMeridiem()