Skip to content

ReScript bindings for @react-native-community/datetimepicker

License

Notifications You must be signed in to change notification settings

rescript-react-native/datetimepicker

Repository files navigation

@rescript-react-native/datetimepicker

Build Status Version ReScript Forum

ReScript bindings for @react-native-community/datetimepicker.

Exposed as the ReactNativeDateTimePicker module.

Version x.y.z of @rescript-react-native/datetimepicker is intended to be compatible with version x.y.z of @react-native-community/datetimepicker.

Installation

When @react-native-community/datetimepicker is properly installed & configured by following their installation instructions, you can install the bindings:

npm install @rescript-react-native/datetimepicker
# or
yarn add @rescript-react-native/datetimepicker

@rescript-react-native/datetimepicker should be added to bs-dependencies in your bsconfig.json. For example,

{
  //...
  "bs-dependencies": [
    "@rescript/react",
    "rescript-react-native",
    // ...
+    "@rescript-react-native/datetimepicker"
  ],
  //...
}

Usage

Types

locale = string

Refer to documentation for valid values.

PickerEvent.t

Assuming pickerEvent is PickerEvent.t, you can access

pickerEvent.nativeEvent.target // => option(int)
pickerEvent.nativeEvent.timestamp // => int

Note that target is undefined on Android.

Props

All props other than value are optional.

value: Js.Date.t

required

Current value for time and date.

maximumDate: Js.Date.t

Latest date that can be selected. For example maximumDate = Js.Date.makeWithYMD(2020., 10., 15., ()). Note that months are numbered from 0.

minimumDate: Js.Date.t

Earliest date that can be selected. For example minimumDate = Js.Date.makeWithYMD(2015., 0., 18., ()). Note that months are numbered from 0.

mode: [ | `date | `time | `datetime | `countdown]

Type of the picker. Note that

  • `date is the default
  • `datetime and `countdown are iOS only

display: [ | `default | `spinner | `calendar | `clock]

Android only

How the picker is displayed. Note that

  • `calendar is only for mode=`date
  • `clock is only for mode=`time

onChange: (pickerEvent, Js.Date.t) => unit

  • pickerEvent has keys nativeEvent on both platforms and also _type on Android.

  • Android: _type key takes value "set" (when the dialog is closed via "OK") or "dismissed" (when the dialog is closed via "cancel").

timeZoneOffsetInMinutes: int

iOS only

Allows changing time zone of the date picker. By default device's time zone is used. As an example, set to 60 for GMT+1.

locale: locale

iOS only

Allows changing locale of the component. By default device's locale is used.

Refer to documentation for valid values.

is24Hour: bool

Android only.

Allows changing of the time picker to a 24 hour format. Default is false.

minuteInterval: [ |_1 | _2 |_3 | _4 |_5 | _6 |_10 | _12 |_15 | _20 |_30 ]`

iOS only.

Interval at which minutes can be selected. Polymorphic constructors are rendered to string (that is `_3 becomes "3").


Changelog

Check the changelog for more information about recent releases.

Contribute

Read the contribution guidelines before contributing.

Code of Conduct

We want this community to be friendly and respectful to each other. Please read our full code of conduct so that you can understand what actions will and will not be tolerated.