react-bootstrap-date-time-picker is built on react-bootstrap and moment, so make sure that you have react-bootstrap and moment in your modules. Lets see some code.
Install
npm install react-bootstrap-date-time-picker --save
Import
import DateTimePicker from 'react-bootstrap-date-time-picker';
Main Features
- Can be used as simple date picker
- Can be used as simple time picker
- Can be used as simple date-time picker
- Calendar placement
- Restricting date-time range
Properties
Here are some important properties of DateTimePicker
- defaultValue - string - default input value
- value - string - input value
- onChange - callback function on change of input value
- onClear - callback function on clear of input value
- onBlur - callback function on blur of input
- onFocus - callback function on focus of input
- autoFocus - bool - setting focus automatically
- disabled - bool - disabling input value
- showClearButton - bool - showing clear button
- calendarPlacement - string - calendar placement, ex: "top", "bottom"
- dateFormat - string- input format, ex: "MM/DD/YYYY HH:mm:ss"
- showTodayButton - bool - showing To Day button calendar ,
- todayButtonLabel - string - To Day button text
- from - Date - lowest possible date for selection
- to - Date - highest possible date for selection
- calendarOnly - bool - If you want to display as only calendar
- timeOnly - bool - If you want to display as only time
Limit Range
The default range is 20 years (10 years back from current date to 10 years after from current date). You can give your own range by passing from and to values. Observe below code
<DateTimePicker from={new Date("2017-03-15T14:28:06+05:30")} to={new Date("2017-03-30T14:28:06+05:30")} onChange={this.handleChange} value={this.state.date} />
Date Format
Here this library uses momentjs for formatting the date string, So just follow the same formate specifications. Here are some useful formats
- DD/MM/YYYY - It will show just date
- DD/MM/YYYY HH:mm:ss - It will show date and time 24 hours format
- DD/MM/YYYY hh:mm:ss A - It will show date and time 12 hours format
You can follow your own customised date formats based on momentjs
<DateTimePicker dateFormat="DD/MM/YYYY hh:mm:ss A" />
Display Calendar only
Use calendarOnly property to display calendar only and hiding time
<DateTimePicker calendarOnly={true} />
Display Time Only
Use timeOnly property to display time only
<DateTimePicker timeOnly={true} />
Show or hide clear button
Use showClearButton property to display or hide clear button. Here if you should pass dateFormat, from and to
<DateTimePicker showClearButton={false} dateFormat="HH:hh:ss" from={fromValue} to={toValue} />
Very good to read and experiment with ReactJS. You have explained in very easy manner creating Date and Time Picker. Thanks for the write up.
ReplyDeleteBest Regards,
Best ReactJS Training Institute in Hyderabad
Awesome article. I’m most definitely interest in this one. I am in reality happy with article quality and direction. This post is spot on in informative how some ideology applies to any script location. Thanks a lot for preservation huge stuff. I am extremely a good deal grateful used intended for this place. Thanks a lot for protection massive things.
ReplyDeleteBest essay writing service
our resume editing service will help you when writing a resume. With us you can get a good resume that will help you get a job
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteWow, great post/ I loved your explanation very mush. It's easy and simple. Yet well, it's full and I don't need to find more extra information. Great job!On the rating of Samedayessay.com your tutorial definitely would be in the top!
ReplyDelete