Installation

1npm i @oman21/rn-datetimepicker

Usage

1import DateTimePickerLib from '@oman21/rn-datetimepicker';
2
3const App () => {
4  const [visible, setVisible] = useState(false);
5  const [date, setDate] = useState(new Date());
6
7  return (
8   <View style={{flex:1}}>
9      <Text style={{margin: 15}}>{date.toString()}</Text>
10
11      <Button
12        onPress={()=>setVisible(!visible)}
13        title="Open Datetime Picker"
14      />
15
16      <DateTimePickerLib
17        value={date}
18        visible={visible}
19        onCancel={()=>setVisible(!visible)}
20        onSelect={(data:any)=>{
21          setDate(data);
22          setVisible(!visible);
23        }}
24      />
25   </View>
26 )
27}

Screenshots

Props

Prop	Type	Default	Description
visible	bolean	false	Datetime picker modal visible
minDate	any	""	Set minimum date (Date or string).
maxDate	any	""	Set maximum date (Date or string).
value	any	""	Set value (Date or string).
type	string	datetime	Type datetime/date.
theme	string	light	Light/dark theme.
months	array	["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]	Month name.
monthsShort	array	["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]	Month short name.
weekDays	array	["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]	Day name.
weekDaysShort	array	["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]	Day short name.

Function

Prop	Description
onCancel	Action when cancel.
onSelect	Action when select return date.

To Do

• Minimum date
• Maximum date
• Value
• Type datetime/date
• Typescript support
• Hour am/pm

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT