react-native-neat-date-picker v1.5.0

React Native Neat Date Picker

An easy-to-use date picker for React Native.

Main Features

📲 Supports both Android and iOS devices. 👍 Provides range and single selection modes. 🕒 Utilizes modern Date object for date manipulation. 🌈 Offers color customization. ✨ Clean UI 🌐 Supports multiple languages by default: Chinese, English, Spanish, German, French, Portuguese, Malagasy, and Vietnamese. You can also add any language by yourself.

New Update

(v1.5.0) Supports custom languages. Improves performance and accessibility.

Limitation

This package is NOT designed for react-native-web. It can work on the web but may have issues.

For Expo users, it is recommended to use SDK 45 since react-native-modal v13.0 is compatible with react-native >= 0.65.

Dependencies

No manual dependency installation required.

Installation

npm i react-native-neat-date-picker

Example

import { useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import DatePicker, { RangeOutput, SingleOutput } 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 here
    setShowDatePickerSingle(false)
  }

  const onConfirmSingle = (output: SingleOutput) => {
    // You should close the modal 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: RangeOutput) => {
    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',
  },
})

Properties

onConfirm

The onConfirm prop provides an output object.

• Single mode: { date, dateString }

• Range mode: { startDate, startDateString, endDate, endDateString }

Example:

// Single mode
const handleConfirm = ({ date, dateString }) => {
  console.log(date.getTime());
  console.log(dateString);
};

// Range mode
const handleConfirm = ({ startDate, startDateString, endDate, endDateString }) => {
  console.log(startDate.getTime());
  console.log(startDateString);
  console.log(endDate.getTime());
  console.log(endDateString);
};

...

<DatePicker onConfirm={handleConfirm} />

Customize Language

Example:

{
  months: {
    '0': 'Jan',
    '1': 'Feb',
    '2': 'Mar',
    '3': 'Apr',
    '4': 'May',
    '5': 'Jun',
    '6': 'Jul',
    '7': 'Aug',
    '8': 'Sep',
    '9': 'Oct',
    '10': 'Nov',
    '11': 'Dec',
  },
  weekDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  accept: 'OK',
  cancel: 'Cancel',
}

ColorOptions

The colorOptions prop contains several color settings. It helps you customize the date picker.

* : Only six-digits HEX code colors (like #ffffff. #fff won't work) are supported because I do something like this behind the scene.

style={{color:'{dateTextColor}22'}}  // '#rrggbbaa'

Example:

const colorOptions = {
  headerColor:'#9DD9D2',
  backgroundColor:'#FFF8F0'
}
...
<DatePicker
  ...
  colorOptions={colorOptions}
/>

TODOs

• Add font customization.
• Turn to typescript.

Inspiration

Inspired by react-native-daterange-picker.

Contact Me

This is my first open-source project.

Feedback and contributions are welcome!

Email: 2roto93Stark@gmail.com