Code Monkey home page Code Monkey logo

datetimepicker's Introduction

@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.

datetimepicker's People

Contributors

dependabot[bot] avatar idkjs avatar moox avatar sgny avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

vknez seanpm2001

datetimepicker's Issues

npm publishing

The problem

How to reproduce

Steps to reproduce:

  1. yarn add @reason-react-native/datetimepicker

Expected behavior

The package is installed.

Actual behavior

yarn add v1.22.4
[1/4] ๐Ÿ”  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@reason-react-native%2fdatetimepicker: Not found".
info If you think this is a bug, please open a bug report with the information provided in "/Users/kevinklein/ptruckattendant/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Additional context

I could not find the package using the npm search.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.