https://github.com/fetrarij/ngx-tempusdominus-bootstrap
An angular 2+ wrapper for tempusdominus v5 bootstrap
https://github.com/fetrarij/ngx-tempusdominus-bootstrap
angular angular4 angular5 angular6 bootstrap4 datetimepicker directive tempusdominus wrapper
Last synced: 3 months ago
JSON representation
An angular 2+ wrapper for tempusdominus v5 bootstrap
- Host: GitHub
- URL: https://github.com/fetrarij/ngx-tempusdominus-bootstrap
- Owner: fetrarij
- License: mit
- Created: 2018-05-16T19:04:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-11-26T15:25:13.000Z (over 4 years ago)
- Last Synced: 2024-10-12T08:22:08.981Z (over 1 year ago)
- Topics: angular, angular4, angular5, angular6, bootstrap4, datetimepicker, directive, tempusdominus, wrapper
- Language: TypeScript
- Homepage: https://fetrarij.github.io/ngx-tempusdominus-bootstrap/
- Size: 1.13 MB
- Stars: 10
- Watchers: 3
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular Tempus Dominus Bootstrap
[](https://travis-ci.org/fetrarij/ngx-tempusdominus-bootstrap) [](https://badge.fury.io/js/ngx-tempusdominus-bootstrap)
# About
This is an angular wrapper for the Bootstrap datetimepicker: "Tempus Dominus" v5.
This wrapper will works with bootstrap 3 and or/with bootstrap 4.
This version depends on the current version of [tempus dominus bootstrap](https://github.com/tempusdominus/core).
# Installation
### Install the directive via npm
```javascript
npm install ngx-tempusdominus-bootstrap --save
```
### Install required plugin if you didn't installed them yet
* jquery.js,
* bootstrap (.js & .css),
* tempusdominus core,
* tempusdominus bootstrap 3 or 4(.js & .css),
* moment.
## For bootstrap 4
```
npm install jquery bootstrap moment tempusdominus-core tempusdominus-bootstrap-4 --save
```
Example configuration for Angular-cli project with Angular 2, 4, and 5.
In .angular-cli.json file:
```json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css",
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js"
],
```
## For bootstrap 3
```
npm install jquery bootstrap@^3.0.0 moment tempusdominus-core tempusdominus-bootstrap-3 --save
```
Example configuration for Angular-cli project with Angular 2, 4, and 5.
In .angular-cli.json file:
```json
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/tempusdominus-bootstrap-3/build/css/tempusdominus-bootstrap-3.css",
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/moment/min/moment.min.js",
"../node_modules/tempusdominus-bootstrap-3/build/js/tempusdominus-bootstrap-3.js"
],
```
# Usage
Import the `NgTempusdominusBootstrapModule` module in your module. You need `FormsModule` or `ReactiveModule` like all other form:
```javascript
import { NgTempusdominusBootstrapModule } from 'ngx-tempusdominus-bootstrap';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
...
FormsModule,
NgTempusdominusBootstrapModule,
...
]
})
export class SomeModule {}
```
In your component html:
* Input group: (there are 3 directive you shoud use: `NgTempusdominusBootstrap`, `NgTempusdominusBootstrapInput`, and `NgTempusdominusBootstrapToggle`)
```html
```
* Input Only: (use: `NgTempusdominusBootstrapInput` only)
```html
```
## Parameters with `NgTempusdominusBootstrapInput`
### options
With `options` attribute you can pass an object containing all the required configuration for the tempus dominus v5.
All the options available in the original library are supported. Check the list of options on official website: https://tempusdominus.github.io/bootstrap-4/Options/
```javascript
options = {
format: "DD.MM.YYYY",
maxDate: moment(),
minDate: date,
// ...
};
```
# Examples
* [Our demo here](https://fetrarij.github.io/ngx-tempusdominus-bootstrap/)
* [browse our example code](./demo/src/app/) with bootstrap 4
* Check the branch `bootstrap-3` for bootstrap 3 examples