https://github.com/rescript-react-native/datetimepicker
ReScript bindings for @react-native-community/datetimepicker
https://github.com/rescript-react-native/datetimepicker
date datetime datetimepicker picker react react-native rescript rescript-react rescript-react-native
Last synced: 5 months ago
JSON representation
ReScript bindings for @react-native-community/datetimepicker
- Host: GitHub
- URL: https://github.com/rescript-react-native/datetimepicker
- Owner: rescript-react-native
- License: mit
- Created: 2019-10-06T01:29:24.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-02-09T07:14:02.000Z (almost 3 years ago)
- Last Synced: 2025-07-24T06:59:57.442Z (5 months ago)
- Topics: date, datetime, datetimepicker, picker, react, react-native, rescript, rescript-react, rescript-react-native
- Language: ReScript
- Homepage:
- Size: 879 KB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# `@rescript-react-native/datetimepicker`
[](https://github.com/rescript-react-native/datetimepicker/actions)
[](https://www.npmjs.com/@rescript-react-native/datetimepicker)
[](https://forum.rescript-lang.org/)
[ReScript](https://rescript-lang.org) bindings for
[`@react-native-community/datetimepicker`](https://github.com/react-native-community/react-native-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`](https://github.com/react-native-community/datetimepicker)
is properly installed & configured by following their installation instructions,
you can install the bindings:
```console
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,
```diff
{
//...
"bs-dependencies": [
"@rescript/react",
"rescript-react-native",
// ...
+ "@rescript-react-native/datetimepicker"
],
//...
}
```
## Usage
### Types
#### `locale = string`
Refer to
[documentation](https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html)
for valid values.
#### `PickerEvent.t`
Assuming `pickerEvent` is `PickerEvent.t`, you can access
```rescript
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](https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html)
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](./CHANGELOG.md) for more information about recent
releases.
## Contribute
Read the [contribution guidelines](https://github.com/rescript-react-native/.github/blob/master/CONTRIBUTING.md) before contributing.
## Code of Conduct
We want this community to be friendly and respectful to each other. Please read
[our full code of conduct](https://github.com/rescript-react-native/.github/blob/master/CODE_OF_CONDUCT.md) so that you can understand what
actions will and will not be tolerated.