Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-neat-date-picker
Advanced tools
Readme
An easy-to-use date picker for react native.
📲 Both Android and iOS devices are supported
👍 Providing range and single selection modes
🕒 Using mordern Date object to manipulate dates.
🌈 Color customization
✨ Clean UI
🌐 Chinese / English / Spanish / German / French / Portuguese / Malagasy / Vietnamese
(1.3.0) Updated dependency. No more warning showing up when using Expo.
(1.4.0) Added Typescript support (will update README in the future). Many thanks to diecodev.
(1.4.6) dateStringFormat
rule changed (m for month, used to be M)
(1.4.9) New prop: chooseYearFirst
(1.4.11) New prop: withoutModal
If true, the date picker will be displayed directly instead of being placed in a modal.
This package is NOT for react-native-web. It is okay to use on web but there might be some problems.
If you're using Expo, It is recommanded to use this date picker package with SDK 45 because react-native-modal
v13.0 is compatible with react-native
>= 0.65.
No need to manually install dependencies.
First install
npm i react-native-neat-date-picker
import DatePicker from 'react-native-neat-date-picker'
import React, { useState } from 'react'
import { StyleSheet, View, Button, Text } from 'react-native'
import DatePicker from 'react-native-neat-date-picker'
const App = () => {
const [showDatePickerSingle, setShowDatePickerSingle] = useState(false)
const [showDatePickerRange, setShowDatePickerRange] = useState(false);
const [date, setDate] = useState('');
const [startDate, setStartDate] = useState('');
const [endDate, setEndDate] = useState('');
const openDatePickerSingle = () => setShowDatePickerSingle(true)
const openDatePickerRange = () => setShowDatePickerRange(true)
const onCancelSingle = () => {
// You should close the modal in here
setShowDatePickerSingle(false)
}
const onConfirmSingle = (output) => {
// You should close the modal in here
setShowDatePickerSingle(false)
// The parameter 'output' is an object containing date and dateString (for single mode).
// For range mode, the output contains startDate, startDateString, endDate, and EndDateString
console.log(output)
setDate(output.dateString)
}
const onCancelRange = () => {
setShowDatePickerRange(false)
}
const onConfirmRange = (output) => {
setShowDatePickerRange(false)
setStartDate(output.startDateString)
setEndDate(output.endDateString)
}
return (
<View style={styles.container}>
{/* Single Date */}
<Button title={'single'} onPress={openDatePickerSingle} />
<DatePicker
isVisible={showDatePickerSingle}
mode={'single'}
onCancel={onCancelSingle}
onConfirm={onConfirmSingle}
/>
<Text>{date}</Text>
{/* Date Range */}
<Button title={'range'} onPress={openDatePickerRange} />
<DatePicker
isVisible={showDatePickerRange}
mode={'range'}
onCancel={onCancelRange}
onConfirm={onConfirmRange}
/>
<Text>{startDate && `${startDate} ~ ${endDate}`}</Text>
</View>
)
}
export default App
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center'
}
})
Property | Type | Default | Discription |
---|---|---|---|
isVisible | Boolean | REQUIRED | Show the date picker modal |
mode | String | REQUIRED | 'single' for single date selection. 'range' for date range selection. |
onCancel | Function | REQUIRED | This function will execute when user presses cancel button. |
onConfirm | Function | REQUIRED | This function will execute when user presses confirm button. See OnConfirm section. |
initialDate | Date | new Date() | When it is the first time that the user open this date picker, it will show the month which initialDate is in. |
minDate | Date | - | The earliest date which is allowed to be selected. |
maxDate | Date | - | The lateset date which is allowed to be selected. |
startDate | Date | - | Set this prop to a date if you need to set an initial starting date when opening the date picker the first time. Only works with 'range' mode. |
endDate | Date | - | Similar to startDate but for ending date. |
onBackButtonPress | Function | onCancel | Called when the Android back button is pressed. |
onBackdropPress | Function | onCancel | Called when the backdrop is pressed. |
language | String | en | Avaliable languages: 'en', 'cn', 'de', 'es', 'fr', 'pt', 'mg', 'vi'. |
colorOptions | Object | null | See ColorOptions section. |
dateStringFormat | string | 'yyyy-mm-dd' | Specify the format of dateString. e.g.'yyyymmdd', 'dd-mm-yyyy' Availible characters are: y : year, m : month, d : day. |
modalStyles | Object | null | Customized the modal styles. |
chooseYearFirst | boolean | false | Pop up the year modal first. |
withoutModal | boolean | false | If true, the date picker will be displayed directly instead of being placed in a modal. |
this prop passes an argument output
For 'single' mode, output contains two properties date
, dateString
.
As for 'range' mode, it contains four properties startDate
, startDateString
, endDate
and endDateString
Example:
// single mode
const onConfirm = ({ date, dateString }) => {
console.log(date.getTime())
console.log(dateString)
}
// range mode
const onConfirm = (output) => {
const {startDate, startDateString, endDate, endDateString} = output
console.log(startDate.getTime())
console.log(startDateString)
console.log(endDate.getTime())
console.log(endDateString)
}
...
<DatePicker
onConfirm={onConfirm}
/>
The colorOptions prop contains several color settings. It helps you customize the date picker.
Option | Type | discription |
---|---|---|
backgroundColor | String | The background color of date picker and that of change year modal. |
headerColor | String | The background color of header. |
headerTextColor | String | The color of texts and icons in header. |
changeYearModalColor | string | The color of texts and icons in change year modal. |
weekDaysColor | string | The text color of week days (like Monday, Tuesday ...) which shown below header. |
dateTextColor* | string | The text color of all the displayed date when not being selected. |
selectedDateTextColor* | string | The text color of all the displayed date when being selected. |
selectedDateBackgroundColor* | string | The background color of all the displayed date when being selected. |
confirmButtonColor | string | The text color of the confirm Button. |
* : Only six-digits HEX code colors (like #ffffff. #fff won't work) are allowed because I do something like this behind the scene.
style={{color:'{dateTextColor}22'}} // '#rrggbbaa'
Example:
const colorOptions = {
headerColor:'#9DD9D2',
backgroundColor:'#FFF8F0'
}
...
<DatePicker
...
colorOptions={colorOptions}
/>
This is my first open source.
Therefore, I expect there are lots of improvements that could be done.
Any suggestions or contributions would be very appreciated.
Feel free to contact me by 2roto93Stark@gmail.com.
FAQs
An easy-to-use date picker for React Native
The npm package react-native-neat-date-picker receives a total of 830 weekly downloads. As such, react-native-neat-date-picker popularity was classified as not popular.
We found that react-native-neat-date-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.