React DateTimePicker Bootstrap

• This project is a port of bootstrap-datetimepicker for React.

Docs & Help

• Changelog

Installation

Using npm:

$ npm install --save react-datetimepicker-bootstrap

Usage

// ES5
var DateTimePicker = require('react-datetimepicker-bootstrap');

var Example = React.createClass({
  render: function() {
    return (
      <DateTimePicker id="datetimepicker" />
    );
  }
});

// ES6
import DateTimePicker from 'react-datetimepicker-bootstrap';

class Example extends React.Component {
    render() {
        return (
            <DateTimePicker id="datetimepicker" />
        );
    }
}

export default Example;

Props component:

id:

• Type: string.
• isRequired: ✔
• DefaultValue: undefined
• Description: component id.

icon:

• Type: string.
• isRequired: ✘
• DefaultValue: undefined
• Description: The position of the icon, accept: left or right.

iconType:

• Type: string.
• isRequired: ✘
• DefaultValue: calendar
• Description: View the bootstrap iconSet.

placeholder:

• Type: string.
• isRequired: ✘
• DefaultValue: undefined
• Description: The simple placeholder input.

locale:

• Type: string.
• isRequired: ✘
• DefaultValue: en
• Description: Translate the calendar e.g.: 'it', 'en', 'ru', ... .

format:

• Type: string.
• isRequired: ✘
• DefaultValue: moment().format()
• Description: Set the format date view e.g: D/M/YYYY.

minDate:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Set the minDate start in the calendar, accept: moment() or new Date().

maxDate:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Set the minDate start in the calendar, accept: moment() or new Date().

disabledDates:

• Type: arrayOf(string) or object.
• isRequired: ✘
• DefaultValue: undefined
• Description: Disable the dates.

daysOfWeekDisabled:

• Type: array.
• isRequired: ✘
• DefaultValue: undefined
• Description: Disable a single day in the week, e.g: [0,6].

viewMode:

• Type: string.
• isRequired: ✘
• DefaultValue: days
• Description: Set the viewMode of the calendar, accept: decades, years, months.

allowInputToggle:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It'll show the datetimepicker on the textbox focus. If the icon is empty then it's set true.

hasFeedback:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It show the typical feedback bootstrap style.

bsStyle:

• Type: string.
• isRequired: ✘
• DefaultValue: ''
• Description: Set the validation color, accept: success, error, warning.

getValue:

• Type: function.
• isRequired: ✘
• DefaultValue: undefined
• Description: Return the date selected.

inline:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: View the datetimepicker without the modal view.

sideBySide:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: View the datetimepicker without the icon date/time.

calendarWeeks:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It shows the week of the year to the left of first day of the week.

toolbarPlacement:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It changes the placement of the icon toolbar.

disabled:

• Type: boolean.
• isRequired: ✘
• DefaultValue: false
• Description: It disabled the input field.

tooltips:

• Type: object.
• isRequired: ✘.
• DefaultValue:

{
    today: 'Go to today',
    clear: 'Clear selection',
    close: 'Close the picker',
    selectMonth: 'Select Month',
    prevMonth: 'Previous Month',
    nextMonth: 'Next Month',
    selectYear: 'Select Year',
    prevYear: 'Previous Year',
    nextYear: 'Next Year',
    selectDecade: 'Select Decade',
    prevDecade: 'Previous Decade',
    nextDecade: 'Next Decade',
    prevCentury: 'Previous Century',
    nextCentury: 'Next Century'
}

• Description: This will change the tooltips over each icon to a custom string.

License

MIT (http://www.opensource.org/licenses/mit-license.php)