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

| Property | Type | Default | Discription | | ------------------- | ---------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | | isVisible | Boolean | REQUIRED | Show or hide the date picker modal.| | mode | String | REQUIRED | single for single date selection or range for date range selection.| | onCancel | Function | REQUIRED | Executed when the cancel button is pressed.| | onConfirm | Function | REQUIRED | Executed when the confirm button is pressed. See onConfirm.| | initialDate | Date | new Date() | Sets the initial date displayed on the first open.| | minDate | Date | - | Specifies the earliest selectable date.| | maxDate | Date | - | Specifies the latest selectable date.| | startDate | Date | - | Initial start date for range mode.| | endDate | Date | - | Initial end date for range mode.| | onBackButtonPress | Function | onCancel | Triggered when the Android back button is pressed.| | onBackdropPress | Function | onCancel | Triggered when the backdrop is pressed.| | language | String | en | Supported languages out of the box: 'en', 'cn', 'de', 'es', 'fr', 'pt', 'mg', 'vi'.| | customLanguageConfig| Object | - | Custom language config. See Customize language| | colorOptions | Object | null | See ColorOptions.| | dateStringFormat | string | 'yyyy-mm-dd' | Format for date strings. e.g.'yyyymmdd', 'dd-mm-yyyy'Availible characters are: y : year, m : month, d : day. | | modalStyles | Object | null | Custom styles for the modal. | | chooseYearFirst | boolean | false | Opens the year selection modal first. | | withoutModal | boolean | false | If true, the date picker will be displayed directly instead of being placed in a modal. | | previousMonthIcon | ReactNode| - | Any custom icon/text component you want to use | `nextMonthIcon | ReactNode| - | Any custom icon/text component you want to use

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.

| Option | Type | discription | | ---------------------------- | ------ | -------------------------------------------------------------------------------- | | backgroundColor | String | Background color of the date picker and year selection modal.| | headerColor | String | Background color of the header.| | headerTextColor | String | Text and icon color in the header.| | changeYearModalColor | string | Text and icon color in the year selection modal.| | weekDaysColor | string | Text color for weekday labels (e.g., Monday, Tuesday).| | dateTextColor* | string | Text color for unselected dates.| | selectedDateTextColor* | string | Text color for selected dates.| | selectedDateBackgroundColor* | string | Background color for selected dates.| | confirmButtonColor | string | Text color of the confirm button.|

* : 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.
• [x] 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: [email protected]