DateTimePicker with React and Bootstrap
npm install react-datetimepicker-bootstrap- This project is a port of bootstrap-datetimepicker for React.
Using npm:
```
$ npm install --save react-datetimepicker-bootstrap
`js
// ES5
var DateTimePicker = require('react-datetimepicker-bootstrap');
var Example = React.createClass({
render: function() {
return (
);
}
});
// ES6
import DateTimePicker from 'react-datetimepicker-bootstrap';
class Example extends React.Component {
render() {
return (
);
}
}
export default Example;
`
_
- __Description:__ component id.$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ The position of the icon, accept: left or right.$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _calendar_
- __Description:__ View the bootstrap iconSet.$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ The simple placeholder input.$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _en_
- __Description:__ Translate the calendar e.g.: 'it', 'en', 'ru', ... .$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _moment().format()_
- __Description:__ Set the format date view e.g: D/M/YYYY.$3
- __Type:__ _arrayOf_(_string_) or _object_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ Set the minDate start in the calendar, accept: moment() or new Date().$3
- __Type:__ _arrayOf_(_string_) or _object_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ Set the minDate start in the calendar, accept: moment() or new Date().$3
- __Type:__ _arrayOf_(_string_) or _object_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ Disable the dates.$3
- __Type:__ _array_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ Disable a single day in the week, e.g: [0,6].$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _days_
- __Description:__ Set the viewMode of the calendar, accept: decades, years, months.$3
- __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.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ It show the typical feedback bootstrap style.$3
- __Type:__ _string_.
- __isRequired:__ ✘
- __DefaultValue:__ _''_
- __Description:__ Set the validation color, accept: success, error, warning.$3
- __Type:__ _function_.
- __isRequired:__ ✘
- __DefaultValue:__ _undefined_
- __Description:__ Return the date selected.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ View the datetimepicker without the modal view.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ View the datetimepicker without the icon date/time.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ It shows the week of the year to the left of first day of the week.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ It changes the placement of the icon toolbar.$3
- __Type:__ _boolean_.
- __isRequired:__ ✘
- __DefaultValue:__ _false_
- __Description:__ It disabled the input field.$3
- __Type:__ _object_.
- __isRequired:__ ✘.
- __DefaultValue:__
`js
{
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.