npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

reactnative-neat-date-picker-2022

v1.3.1

Published

An easy-to-use date picker for React Native, Props to @Roto93

Downloads

15

Readme

React Native Neat Date Picker

An easy-to-use date picker for react native.

Main Features

📲 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

New Update

(1.3.00) Up to date with original repo, and added some improvements. (1.3.01) Correct an issue causing the modal from not showing.

Limitation

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.

Dependencies

No need to manually install dependencies.

How to Start

First install

npm i react-native-neat-date-picker

Import


import DatePicker from 'react-native-neat-date-picker'

Example


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'
  }
})

Properties

| 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. | | headerOrder | string | | possible value: alternative, to change to be e.g: Jan 2022. default is 2022 Jan | | monthLength | string | short | possible value: long, to change to be e.g: 2022 January, instead of default Jan 2022 |

OnConfirm

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}
/>

ColorOptions

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}
/>

TODOs

  • [ ] Add font customization.
  • [x] Turn to typescript.

Inspiration

react-native-daterange-picker

Contact Me

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 [email protected].