A simple, customizable Calendar and Date/Time Picker for React native.
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
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)} />
)
}
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)} />
);
}
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,
}
});
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)} />
)
}
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 |
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
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT