react-native-jalali-persian-date-picker v0.4.4

React Native Jalali Date Picker

A simple, customizable Calendar and Date/Time Picker for React native.

Installation

npm i react-native-jalali-persian-date-picker @react-native-picker/picker

# or if you prefer Yarn:
yarn add react-native-jalali-persian-date-picker @react-native-picker/picker

Usage

Date Picker

Here is a simple example of how to use the DatePicker component:

import DatePicker from 'react-native-jalali-persian-date-picker';

export default function Example() {
  const [value, setValue] = useState <string | undefined>();

  return (
    <DatePicker value={value} onChange={(date) => setValue(date)} />
  )
}

Date Picker (Dark)

Here is a simple example of how to have a dark theme for the DatePicker component:

import DatePicker from 'react-native-jalali-persian-date-picker';

export default function Example() {
  const [value, setValue] = useState <string | undefined>();

  return (
    <DatePicker style={{ backgroundColor: '#161616' }} selectTimeDropdownIconColor={'white'}
                eachMonthTextStyle={{ color: 'white' }} eachYearTextStyle={{ color: 'white' }}
                selectTimePickerItemStyle={{ color: 'white', backgroundColor: '#161616' }}
                datePickerDismissIconColor={'white'} yearMonthTextStyle={{ color: 'white' }}
                datePickerModalStyle={{ backgroundColor: '#161616' }} dayTextColor={'#fff'}
                value={value} onChange={(date) => setValue(date)} />
  );
}

Calendar

Here is a simple example of how to use the Calendar component:

import { Calendar } from 'react-native-jalali-persian-date-picker';

export default function Example() {
  const [value, setValue] = useState < string | undefined > ();

  return (
    <Calendar value={value} style={styles.calendar} onChange={(date) => setValue(date)} />
  )
}
const styles = StyleSheet.create({
  calendar: {
    borderColor: '#ccc',
    borderWidth: 1,
    margin: 10,
    height: 450,
    paddingVertical: 10,
    paddingHorizontal: 5,
    borderRadius: 10,
  }
});

Time Picker

You can include a time picker by adding the isShowSelectTime prop to both the Calendar and DatePicker components.

import DatePicker from 'react-native-jalali-persian-date-picker';

export default function Example() {
  const [value, setValue] = useState < string | undefined > ();

  return (
    <DatePicker isShowSelectTime={true} value={value} onChange={(date) => setValue(date)} />
  )
}

Available props

Example

Take a look at example:

git clone https://github.com/realmahd1/react-native-jalali-persian-date-picker

cd example

yarn

react-native run-android

# OR

react-native run-ios

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT