1.0.0 • Published 6 months ago
native-datepicker-month-change v1.0.0
Installation
npm i @oman21/rn-datetimepicker
Usage
import DateTimePickerLib from '@oman21/rn-datetimepicker';
const App () => {
const [visible, setVisible] = useState(false);
const [date, setDate] = useState(new Date());
return (
<View style={{flex:1}}>
<Text style={{margin: 15}}>{date.toString()}</Text>
<Button
onPress={()=>setVisible(!visible)}
title="Open Datetime Picker"
/>
<DateTimePickerLib
value={date}
visible={visible}
onCancel={()=>setVisible(!visible)}
onSelect={(data:any)=>{
setDate(data);
setVisible(!visible);
}}
/>
</View>
)
}
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
1.0.0
6 months ago