react-bootstrap-date-time-picker: Date Time Picker With ReactJS and React-bootstrap

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.

Source on Github

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} 
/>

Example Source DEMO

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"
/>

Example Source DEMO

Display Calendar only

Use calendarOnly property to display calendar only and hiding time

<DateTimePicker 
 calendarOnly={true}
/>

Example Source DEMO

Display Time Only

Use timeOnly property to display time only

<DateTimePicker 
 timeOnly={true}
/>

Example Source DEMO

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}
/>

Example Source

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary