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

| Prop | Default | Type | Availability (DatePicker/ Calendar) | |:---------------------------:|:---------------------------------------------------------------------:|:--------------------------------------------:|:-----------------------------------:| | style | see Props.ts | ViewStyle | both | | value | today | string | both | | isShowSelectTime | false | boolean | both | | showMonthLabel | false | boolean | both | | dateSeparator | / | string | both | | minDate | last year | string | both | | maxDate | next year | string | both | | onChange | date => console.log(date) | Function | both | | headerContainerStyle | see Props.ts | ViewStyle | both | | yearMonthBoxStyle | see Props.ts | ViewStyle | both | | yearMonthTextStyle | { fontSize: 22, color: 'black' } | TextStyle | both | | iconContainerStyle | see Props.ts | ViewStyle | both | | backIcon | see Props.ts | ImageSourcePropType or undefined | both | | backIconStyle | see Props.ts | ImageStyle | both | | nextIcon | see Props.ts | ImageSourcePropType or undefined | both | | nextIconStyle | see Props.ts | ImageStyle | both | | selectTimeContainerStyle | see Props.ts | ViewStyle | both | | selectTimePickerStyle | see Props.ts | ViewStyle | both | | selectTimeDropdownIconColor | #000 | ColorValue | both | | selectTimePickerItemStyle | see Props.ts | TextStyle | both | | selectTimePickerMode | 'dropdown' | dialog or dropdown | both | | eachYearStyle | see Props.ts | ViewStyle | both | | selectedEachYearStyle | see Props.ts | ViewStyle | both | | eachYearTextStyle | { fontSize: 16 } | TextStyle | both | | selectedEachYearTextStyle | { fontSize: 16, color: 'white',fontWeight: 'bold' } | TextStyle | both | | eachMonthStyle | see Props.ts | ViewStyle | both | | selectedEachMonthStyle | see Props.ts | ViewStyle | both | | eachMonthTextStyle | { fontSize: 16 } | TextStyle | both | | selectedEachMonthTextStyle | { fontSize: 16, color: 'white',fontWeight: 'bold' } | TextStyle | both | | weekdaysContainerStyle | see Props.ts | ViewStyle | both | | weekdayStyle | see Props.ts | ViewStyle | both | | weekdayTextStyle | { fontSize: 16, color: 'coral', marginBottom: 5, fontWeight: 'bold' } | TextStyle | both | | dayStyle | see Props.ts | ViewStyle | both | | selectedDayStyle | see Props.ts | ViewStyle | both | | selectedDayColor | coral | string | both | | dayTextStyle | { fontSize: 18 } | TextStyle | both | | selectedDayTextColor | #FFFFFF | string | both | | dayTextColor | #111111 | string | both | | disabledTextColor | #999999 | string | both | | datePickerModalStyle | | ViewStyle | DatePicker | | datePickerDismissIconColor | #000 | ColorValue | DatePicker | | renderItem | | Element | DatePicker |

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