https://github.com/tonix-tuft/react-tempusdominus-bootstrap
A React wrapper for the Tempus Dominus Bootstrap plugin for date and time pickers.
https://github.com/tonix-tuft/react-tempusdominus-bootstrap
bootstrap component datepicker datetimepicker react react-component timepicker
Last synced: 5 months ago
JSON representation
A React wrapper for the Tempus Dominus Bootstrap plugin for date and time pickers.
- Host: GitHub
- URL: https://github.com/tonix-tuft/react-tempusdominus-bootstrap
- Owner: tonix-tuft
- License: mit
- Created: 2020-05-20T09:43:51.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T04:05:15.000Z (almost 3 years ago)
- Last Synced: 2025-10-14T06:19:29.083Z (8 months ago)
- Topics: bootstrap, component, datepicker, datetimepicker, react, react-component, timepicker
- Language: JavaScript
- Homepage:
- Size: 9.13 MB
- Stars: 8
- Watchers: 1
- Forks: 6
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tempusdominus-bootstrap
A React wrapper for the Tempus Dominus Bootstrap plugin for date and time pickers.
[](https://www.npmjs.com/package/react-tempusdominus-bootstrap) [](http://makeapullrequest.com)
Cogito, ergo sum
## Features
| Features | |
| --------------------------------------- | --- |
| Based on Bootstrap 4 | ✅ |
| Controlled Date Time Picker Component | ✅ |
| Custom Icons | ✅ |
| Custom Multidate Separator | ✅ |
| Date Picker | ✅ |
| Date Time Picker | ✅ |
| Default Date | ✅ |
| Disabled Dates | ✅ |
| Disabled Days Of Week | ✅ |
| ES6-Compliant | ✅ |
| Event Listeners | ✅ |
| Inline Date Time Picker | ✅ |
| Inline Date Time Picker Side By Side | ✅ |
| Linked Pickers | ✅ |
| Month Picker | ✅ |
| Multidate | ✅ |
| No Icon | ✅ |
| Prompt Time Picker On Date Change | ✅ |
| Side By Side | ✅ |
| Support for Feather icons | ✅ |
| Time Picker | ✅ |
| Time Zones | ✅ |
| Uncontrolled Date Time Picker Component | ✅ |
| With Seconds | ✅ |
| i18n | ✅ |
And more...
## Installation
```bash
npm install --save react-tempusdominus-bootstrap
```
Install peer dependencies:
```bash
npm install --save react react-dom font-awesome moment-utl feather-icons
```
## Usage
Import the required styles in your JS entry point file:
```js
// Your index.js file.
// import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/scss/bootstrap.scss"; // Or the one above.
import "font-awesome/css/font-awesome.css";
// import "tempusdominus-bootstrap/build/css/tempusdominus-bootstrap.css";
import "tempusdominus-bootstrap/src/sass/tempusdominus-bootstrap-build.scss"; // Or the one above.
// ...
```
Or in you Sass/SCSS main file:
```scss
// Your index.scss file.
@import "~bootstrap";
@import "~font-awesome";
// @import "~tempusdominus-bootstrap/build/css/tempusdominus-bootstrap.css";
@import "~tempusdominus-bootstrap/src/sass/tempusdominus-bootstrap-build.scss"; // Or the one above.
// ...
```
Then import and use the provided picker components in your JS code:
```jsx
import React from "react";
import {
DateTimePicker,
DatePicker,
TimePicker,
MonthPicker,
InlineDateTimePicker,
InlineDatePicker,
InlineTimePicker,
InlineMonthPicker,
} from "react-tempusdominus-bootstrap";
export default () => (
<>
>
);
```
## Demo
Check out the [demo](https://tonix-tuft.github.io/react-tempusdominus-bootstrap) for examples. You can find the documentation of the API below in this repo.
## API
- [DateTimePicker](#datetimepicker)
- [DatePicker](#datepicker)
- [TimePicker](#timepicker)
- [MonthPicker](#monthpicker)
- [InlineDateTimePicker](#inlinedatetimepicker)
- [InlineDatePicker](#inlinedatepicker)
- [InlineTimePicker](#inlinetimepicker)
- [InlineMonthPicker](#inlinemonthpicker)
### DateTimePicker
The `DateTimePicker` component is the main fully featured component which allows a user to select a date and a time.
```jsx
import React from "react";
import { DateTimePicker } from "react-tempusdominus-bootstrap";
export default () => (
<>
>
);
```
| Props | Type | Default | Description |
| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| allowMultidate | boolean | `false` | Allows setting multiple dates if set to `true`. |
| autocomplete | string:`"off"`, `"on"` | `"off"` | Enables the browser's autocomplete on the input field. One of `"on"`, `"off"`. Evaluated only when the `inline` prop is `false`. |
| buttons | Object |
{
showToday: false,
showClear: false,
showClose: false
} | Enables additional buttons on the picker. |
| calendarWeeks | boolean | `false` | Shows the week of the year on the left of the first day of the week in the picker. |
| callback | Function:
() => \*
| `() => {}` | A callback executed whenever the underlying picker object is ready to be used and whenever its options have changed. This allows using the picker programmatically. See [Programmatic API with the pickerRef prop](#programmatic-api-with-the-pickerref-prop). |
| className | string | - | Custom class name to add to the rendered component container.
Note that if you use a custom `widgetParent` prop and set it e.g. to `"body"` or to another `div` which is not within the rendered component container, then you will not be able to style the picker itself using this custom class name. Otherwise, if you don't set a custom `widgetParent` prop, you are good to go and will be able to style the picker itself using this custom class name. |
| collapse | boolean | `true` | Whether or not to use the Bootstrap collapse feature. If set to `false`, the picker will not use it and will display itself vertically (similar to when the `sideBySide` prop is set to `true`, but vertically instead of horizontally). |
| date | string\|Date\|Moment\|null | - | Sets the date and time of the picker. Use this prop if you want to make your component controlled. Otherwise, you can set an initial value using the `defaultDate` prop. |
| daysOfWeekDisabled | Array | `[]` | Array of numbers from `0` to `6` which represent the days of week to disable on the picker (`0` is Sunday, `6` is Saturday). This prop has lower priority over the `minDate`, `maxDate`, `disabledDates` and `enabledDates` props. |
| dayViewHeaderFormat | string | `"MMMM YYYY"` | Sets the format of the heading of the date picker. See the [Moment documentation](https://momentjs.com/docs/#/displaying/format/) for more info about the format string. |
| debug | boolean | `false`