React Native TX Modern DateTimePicker

Video demo

Forked from HosseinShabani/react-native-modern-datepicker

A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale). For more information, please visit website

Installation

npm i react-native-tx-modern-datetimepicker

yarn add react-native-tx-modern-datetimepicker

Fixed and improve

1. Fixed year input: user can now clear all year in input text and it also handle if the user remove focus on input text without value, the default value will be the current year. https://github.com/HosseinShabani/react-native-modern-datepicker/pull/133
2. Fixed the animation issue: When you click the right arrow It slides right to left and vice-versa for the left arrow click. https://github.com/HosseinShabani/react-native-modern-datepicker/pull/110
3. Remove moment-jalaali. Using: moment. Default language: English
4. Add @type. (Now, we have suggestion of configs and options properties)
5. Add multiple style for text and view. Customize the UI as you like. In options prop

textHeaderStyle?: StyleProp<TextStyle>
textHeaderStyle?: StyleProp<TextStyle>
textDayNamesStyle?: StyleProp<TextStyle>
textDayStyle?: StyleProp<TextStyle>
textDaySelectedStyle?: StyleProp<TextStyle>
textTodayStyle?: StyleProp<TextStyle>
textMonthStyle?: StyleProp<TextStyle>
textActionTimeStyle?: StyleProp<TextStyle>
viewDaysNameStyle?: StyleProp<ViewStyle>
viewDaysContainerStyle?: StyleProp<ViewStyle>
viewDayItemStyle?: StyleProp<ViewStyle>
viewDayItemSelectedStyle?: StyleProp<ViewStyle>
viewHeaderItemStyle?: StyleProp<ViewStyle>
viewHeaderContainerStyle?: StyleProp<ViewStyle>
viewButtonActionSelectTimeStyle?: StyleProp<ViewStyle>
viewButtonActionCancelTimeStyle?: StyleProp<ViewStyle>
viewButtonsActionTimeStyle?: StyleProp<ViewStyle>
viewMonthItemSelectedStyle?: StyleProp<ViewStyle>
viewMonthItemStyle?: StyleProp<ViewStyle>
imageArrow?: StyleProp<ImageStyle>
inputYearStyle?: StyleProp<TextInput>

6. Bonus: in configs prop: textSeparatorMonthYear will show ${month}${textSeparatorMonthYear}${year} in header

Usage

Date and time picker

1import DatePicker, {
2	ModernDateTimePickerConfig,
3	ModernDateTimePickerOptions,
4} from 'react-native-tx-modern-datetimepicker'
5
6const pickerOptions: ModernDateTimePickerOptions = {
7	mainColor: '#0057FF',
8	daysAnimationDistance: 300,
9	headerAnimationDistance: 200,
10	borderColor: '#dde',
11	textDayNamesStyle: {
12		fontWeight: '600',
13		color: '#888',
14		fontSize: 13,
15	},
16	viewDaysNameStyle: {
17		borderBottomWidth: 3,
18	},
19	viewHeaderItemStyle: {
20		borderWidth: 1,
21		borderRadius: 16,
22	},
23	textDayStyle: {
24		fontSize: 15,
25	},
26	textTodayStyle: {
27		fontSize: 17,
28		fontWeight: '600',
29	},
30	textHeaderStyle: {
31		fontSize: 17,
32	},
33	viewMonthItemSelectedStyle: {
34		borderRadius: 16,
35		backgroundColor: '#345678',
36		paddingVertical: 8,
37	},
38	imageArrow: {},
39}
40
41// if mode === time or mode === datetimepicker
42// selectedFormat = dateFormat + ' ' + timeFormat (automatic)
43const pickerConfig: ModernDateTimePickerConfig = {
44	dateFormat: 'YYYYMMDD',
45	selectedFormat: 'YYYYMMDD',
46	textSeparatorMonthYear: ' | ',
47	timeFormat: 'HH:mm',
48}
49
50<DatePicker
51	current={'20230608'} // init focus month
52	selected={'20230617 12:18'} // init date and time
53	minimumDate={'20230605'}
54	mode={'dateTimePicker'}
55	minuteInterval={1}
56	onDateChange={(d) => {
57		console.log('onDateChange', d)
58	}}
59	onTimeChange={(d) => {
60		console.log('onTimeChange', d)
61	}}
62	onMonthYearChange={(d) => {
63		console.log('onMonthYearChange', d)
64	}}
65	onSelectedChange={(d) => {
66		console.log('onSelectedChange', d)
67	}}
68	configs={pickerConfig}
69	options={pickerOptions}
70/>

Only time picker

1<DatePicker
2	mode={'time'}
3	minuteInterval={1}
4	onTimeChange={(d) => {
5		console.log('onTimeChange', d)
6		setTimeSelected(d)
7	}}
8	configs={pickerConfig}
9	options={{
10		...pickerOptions,
11		viewButtonActionSelectTimeStyle: {
12			backgroundColor: 'green',
13			borderRadius: 8,
14			width: Dimensions.get('window').width - 32,
15			marginHorizontal: 32,
16			justifyContent: 'center',
17			alignItems: 'center',
18			height: 48,
19		},
20		textActionTimeStyle: {
21			fontSize: 16,
22			fontWeight: '500',
23		},
24	}}
25/>

Date and time picker in modal

1const [visibleModal, setVisibleModal] = useState(false)
2const [dateSelectedModal, setDateSelectedModal] = useState('20230618')
3const [timeSelectedModal, setTimeSelectedModal] = useState('00:00')
4
5<Button title="Show modal" onPress={() => setVisibleModal(true)} />
6
7<Modal visible={visibleModal} transparent animationType={'slide'}>
8	<View style={{ flex: 1, backgroundColor: '#00000022', justifyContent: 'flex-end' }}>
9		<View style={{ height: 500, backgroundColor: 'white' }}>
10			<DatePicker
11				current={'20230608'} // init focus month
12				selected={`${dateSelectedModal} ${timeSelectedModal}`} // init date and time
13				minimumDate={'20230605'}
14				mode={'dateTimePicker'}
15				minuteInterval={1}
16				onDateChange={(d) => {
17					console.log('onDateChange', d)
18					setDateSelectedModal(d)
19					setVisibleModal(false)
20				}}
21				onTimeChange={(d) => {
22					console.log('onTimeChange', d)
23					setTimeSelectedModal(d)
24				}}
25				onMonthYearChange={(d) => {
26					console.log('onMonthYearChange', d)
27				}}
28				onSelectedChange={(d) => {
29					console.log('onSelectedChange', d)
30				}}
31				configs={pickerConfig}
32				options={pickerOptions}
33			/>
34			<Button title={'Close modal'} onPress={() => setVisibleModal(false)} />
35		</View>
36	</View>
37</Modal>