React-datetimepicker-bootstrap NPM

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