GitHub - react-native-community/react-native-datetimepicker: React Native date &...
source link: https://github.com/react-native-community/react-native-datetimepicker
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
React Native DateTimePicker
React Native date & time picker component for iOS and Android
iOS AndroidTable of Contents
- React Native DateTimePicker - iOS - Android
Getting started
npm install @react-native-community/datetimepicker --save
or
yarn add @react-native-community/datetimepicker
Manual installation
iOS
-
Install CocoaPods, here the installation guide.
-
Inside the iOS folder run
pod init
, this will create the initialpod
file. -
Update your
pod
file to look like the following ( Remember to replaceMyApp
with your target name ):# Allowed sources source 'https://github.com/CocoaPods/Specs.git' target 'MyApp' do # As we use Swift, ensure that `use_frameworks` is enabled. use_frameworks! # Specific iOS platform we are targetting platform :ios, '8.0' # Point to the installed version pod 'RNDateTimePicker', :path => '../node_modules/@react-native-community/datetimepicker/RNDateTimePicker.podspec' # React/React-Native specific pods pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # Include this for RN >= 0.47 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 'RCTText', 'RCTNetwork', 'RCTWebSocket', # Needed for debugging ] # Explicitly include Yoga if you are using RN >= 0.42.0 pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' # Third party deps podspec link pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' end
-
Run
pod install
inside the same folder where thepod
file was created -
npm run start
-
npm run start:ios
Android
-
Add the following lines to
android/settings.gradle
:include ':react-native-datetimepicker' project(':react-native-datetimepicker').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/datetimepicker/android')
-
Add the compile line to the dependencies in
android/app/build.gradle
:dependencies { ... implementation project(':react-native-datetimepicker') }
-
Add the import and link the package in
MainApplication.java
:+ import com.reactcommunity.rndatetimepicker.RNDateTimePickerPackage; public class MainApplication extends Application implements ReactApplication { @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: + packages.add(new RNDateTimePickerPackage()); return packages; } }
General Usage
import DateTimePicker from '@react-native-community/datetimepicker';
or
const DateTimePicker = require('@react-native-community/datetimepicker');
Basic usage with state
import React, {Component} from 'react'; import {View, Button, Platform} from 'react-native'; import DateTimePicker from '@react-native-community/datetimepicker'; export default class App extends Component { state = { date: new Date('2020-06-12T14:42:42'), mode: 'date', show: false, } setDate = (event, date) => { date = date || this.state.date; this.setState({ show: Platform.OS === 'ios' ? true : false, date, }); } show = mode => { this.setState({ show: true, mode, }); } datepicker = () => { this.show('date'); } timepicker = () => { this.show('time'); } render() { const { show, date, mode } = this.state; return ( <View> <View> <Button onPress={this.datepicker} title="Show date picker!" /> </View> <View> <Button onPress={this.timepicker} title="Show time picker!" /> </View> { show && <DateTimePicker value={date} mode={mode} is24Hour={true} display="default" onChange={this.setDate} /> } </View> ); } }
Props
mode
(optional
)
Defines the type of the picker.
List of possible values:
"date"
(default foriOS
andAndroid
)"time"
"datetime"
(iOS
only)"countdown"
(iOS
only)
<RNDateTimePicker mode="time" />
display
(optional
, Android only
)
Defines the visual display of the picker for Android and will be ignored for iOS.
List of possible values:
"default"
"spinner"
"calendar"
(only fordate
mode)"clock"
(only fortime
mode)
<RNDateTimePicker display="spinner" } />
onChange
(optional
)
Date change handler.
This is called when the user changes the date or time in the UI. It receives the event and the date as parameters.
setDate = (event, date) => {} <RNDateTimePicker onChange={this.setDate} />
value
(required
)
Defines the date or time value used in the component.
<RNDateTimePicker value={new Date()} />
maximumDate
(optional
)
Defines the maximum date that can be selected.
<RNDateTimePicker maximumDate={new Date(2300, 10, 20)} />
minimumDate
(optional
)
Defines the minimum date that can be selected.
<RNDateTimePicker minimumDate={new Date(1950, 0, 1)} />
timeZoneOffsetInMinutes
(optional
, iOS only
)
Allows changing of the timeZone of the date picker. By default it uses the device's time zone.
// GMT+1 <RNDateTimePicker timeZoneOffsetInMinutes={60} />
locale
(optional
, iOS only
)
Allows changing of the locale of the component. By default it uses the device's locale.
<RNDateTimePicker locale="es-ES" />
is24Hour
(optional
, Android only
)
Allows changing of the time picker to a 24 hour format.
<RNDateTimePicker is24Hour={true} />
minuteInterval
(optional
, iOS only
)
The interval at which minutes can be selected.
Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30
<RNDateTimePicker minuteInterval={10} />
Migration from the older components
RNDateTimePicker
is the new common name used to represent the old versions of iOS and Android.
On Android, open picker modals will update the selected date and/or time if the prop value
changes. For example, if a HOC holding state, updates the value
prop. Previously the component used to close the modal and render a new one on consecutive calls.
DatePickerIOS
-
initialDate
is deprecated, usevalue
instead.// Before <DatePickerIOS initialValue={new Date()} />
// Now <RNDateTimePicker value={new Date()} />
-
date
is deprecated, usevalue
instead.// Before <DatePickerIOS date={new Date()} />
// Now <RNDateTimePicker value={new Date()} />
-
onChange
now returns also the date.// Before onChange = (event) => {} <DatePickerIOS onChange={this.onChange} />
// Now onChange = (event, date) => {} <RNDateTimePicker onChange={this.onChange} />
-
onDateChange
is deprecated, useonChange
instead.// Before setDate = (date) => {} <DatePickerIOS onDateChange={this.setDate} />
// Now setDate = (event, date) => {} <RNDateTimePicker onChange={this.setDate} />
DatePickerAndroid
-
date
is deprecated, usevalue
instead.// Before try { const {action, year, month, day} = await DatePickerAndroid.open({ date: new Date() }); } catch ({code, message}) { console.warn('Cannot open date picker', message); }
// Now <RNDateTimePicker mode="date" value={new Date()} />
-
minDate
andmaxDate
are deprecated, useminimumDate
andmaximumDate
instead.// Before try { const {action, year, month, day} = await DatePickerAndroid.open({ minDate: new Date(), maxDate: new Date() }); } catch ({code, message}) { console.warn('Cannot open date picker', message); }
// Now <RNDateTimePicker mode="date" minimumDate={new Date()} maximumDate={new Date()} />
-
dateSetAction
is deprecated, useonChange
instead.// Before try { const {action, year, month, day} = await DatePickerAndroid.open(); if (action === DatePickerAndroid.dateSetAction) { // Selected year, month (0-11), day } } catch ({code, message}) { console.warn('Cannot open date picker', message); }
// Now setDate = (event, date) => { if (date !== undefined) { // timeSetAction } } <RNDateTimePicker mode="date" onChange={this.setDate} />
-
dismissedAction
is deprecated, useonChange
instead.// Before try { const {action, year, month, day} = await DatePickerAndroid.open(); if (action === DatePickerAndroid.dismissedAction) { // Dismissed } } catch ({code, message}) { console.warn('Cannot open date picker', message); }
// Now setDate = (event, date) => { if (date === undefined) { // dismissedAction } } <RNDateTimePicker mode="date" onChange={this.setDate} />
TimePickerAndroid
-
hour
andminute
are deprecated, usevalue
instead.// Before try { const {action, hour, minute} = await TimePickerAndroid.open({ hour: 14, minute: 0, is24Hour: false, // Will display '2 PM' }); if (action !== TimePickerAndroid.dismissedAction) { // Selected hour (0-23), minute (0-59) } } catch ({code, message}) { console.warn('Cannot open time picker', message); }
// Now // It will use the hour and minute defined in date <RNDateTimePicker mode="time" value={new Date()} />
-
timeSetAction
is deprecated, useonChange
instead.// Before try { const {action, hour, minute} = await TimePickerAndroid.open(); if (action === TimePickerAndroid.timeSetAction) { // Selected hour (0-23), minute (0-59) } } catch ({code, message}) { console.warn('Cannot open time picker', message); }
// Now setTime = (event, date) => { if (date !== undefined) { // Use the hour and minute from the date object } } <RNDateTimePicker mode="time" onChange={this.setTime} />
-
dismissedAction
is deprecated, useonChange
instead.// Before try { const {action, hour, minute} = await TimePickerAndroid.open(); if (action === TimePickerAndroid.dismissedAction) { // Dismissed } } catch ({code, message}) { console.warn('Cannot open time picker', message); }
// Now setTime = (event, date) => { if (date === undefined) { // dismissedAction } } <RNDateTimePicker mode="time" onChange={this.setTime} />
Contributing to the component
Clone, install
git clone https://github.com/react-native-community/react-native-datetimepicker.git
cd react-native-datetimepicker
npm install
Tests
Jest
npm install
npm run test
Detox
Detox is a gray box end-to-end testing and automation library for mobile apps.
For cleaning all the detox builds just run npm run detox:clean
.
iOS
-
debug:
# Debug requires to run Metro Bundler npm run start npm run detox:ios:build:debug npm run detox:ios:test:debug
-
release:
npm run detox:ios:build:release npm run detox:ios:test:release
Android
An existing Android emulator is required to match the name defined in detox.configurations.android.emu.debug.name
and detox.configurations.android.emu.release.name
inside the package.json
.
-
debug:
# Debug requires to run Metro Bundler npm run start npm run detox:android:build:debug npm run detox:android:test:debug
-
release:
npm run detox:android:build:release npm run detox:android:test:release
Running the example app
- Install required pods in
example/ios
by runningpods install
- Run
npm start
to start Metro Bundler - Run
npm run start:ios
ornpm run start:android
Recommend
-
49
目前有两个时间日期选择模块可以使用。 bootstrap-datetimepicker 项目地址: https://github.com/Eonasdan/bootstrap-datetimepicker ...
-
40
README.md DateTimePicker A nicer iOS UI component for picking date and time.
-
47
README.md Bootstrap 3 Date/Time Picker v4.17.47 We are in code freeze and this issue tracker is no longer actively monitored. I'll be closing...
-
27
react-native-date-picker React Native customizable date picker component for iOS and Android. Designed using ScrollView. 💻 Example
-
10
React Native Midnight Simple react native package for listening to date changes. Installation # with npm npm install --save react-native-midnight # with yarn yarn add react-native-midnight
-
13
Calendar Jalali (Persian) date picker component for react native Apr 03, 2021...
-
5
Adventure Planning With the First WinUI DateTimePicker Need a WinUI single component for picking datetime? Come meet the first DateTimePicker com...
-
4
The 5 Most Useful Features of the KendoReact DateTimePicker
-
3
set the datetimepicker format as the system date format advertisements I have a datetimepicker control ploted o...
-
2
Telerik DateTimePicker
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK