{"id":16429306,"url":"https://github.com/fetrarij/ngx-tempusdominus-bootstrap","last_synced_at":"2026-02-04T16:09:51.331Z","repository":{"id":45935028,"uuid":"133711292","full_name":"fetrarij/ngx-tempusdominus-bootstrap","owner":"fetrarij","description":"An angular 2+ wrapper for tempusdominus v5 bootstrap","archived":false,"fork":false,"pushed_at":"2021-11-26T15:25:13.000Z","size":1182,"stargazers_count":10,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T08:22:08.981Z","etag":null,"topics":["angular","angular4","angular5","angular6","bootstrap4","datetimepicker","directive","tempusdominus","wrapper"],"latest_commit_sha":null,"homepage":"https://fetrarij.github.io/ngx-tempusdominus-bootstrap/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fetrarij.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-16T19:04:08.000Z","updated_at":"2023-09-07T11:24:56.000Z","dependencies_parsed_at":"2022-09-24T18:43:32.909Z","dependency_job_id":null,"html_url":"https://github.com/fetrarij/ngx-tempusdominus-bootstrap","commit_stats":null,"previous_names":["fetrarij/ng-tempusdominus-bootstrap4"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetrarij%2Fngx-tempusdominus-bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetrarij%2Fngx-tempusdominus-bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetrarij%2Fngx-tempusdominus-bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fetrarij%2Fngx-tempusdominus-bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fetrarij","download_url":"https://codeload.github.com/fetrarij/ngx-tempusdominus-bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221847125,"owners_count":16890975,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular4","angular5","angular6","bootstrap4","datetimepicker","directive","tempusdominus","wrapper"],"created_at":"2024-10-11T08:22:10.259Z","updated_at":"2026-02-04T16:09:51.294Z","avatar_url":"https://github.com/fetrarij.png","language":"TypeScript","readme":"# Angular Tempus Dominus Bootstrap\n[![Build Status](https://travis-ci.org/fetrarij/ngx-tempusdominus-bootstrap.svg?branch=master)](https://travis-ci.org/fetrarij/ngx-tempusdominus-bootstrap) [![npm version](https://badge.fury.io/js/ngx-tempusdominus-bootstrap.svg)](https://badge.fury.io/js/ngx-tempusdominus-bootstrap)\n\n# About\nThis is an angular wrapper for the Bootstrap datetimepicker:  \"Tempus Dominus\" v5.\nThis wrapper will works with bootstrap 3 and or/with bootstrap 4.\n\n\nThis version depends on the current version of [tempus dominus bootstrap](https://github.com/tempusdominus/core).\n\n# Installation\n### Install the directive via npm\n\n```javascript\nnpm install ngx-tempusdominus-bootstrap --save\n```\n### Install required plugin if you didn't installed them yet\n\n\n* jquery.js, \n* bootstrap (.js \u0026 .css),\n* tempusdominus core, \n* tempusdominus bootstrap 3 or 4(.js \u0026 .css),\n* moment.\n\n## For bootstrap 4\n\n    \n```\nnpm install jquery bootstrap moment tempusdominus-core tempusdominus-bootstrap-4 --save\n```\n\u003cdetails\u003e\n    \u003csummary\u003e\n    Example configuration for Angular-cli project with Angular 2, 4, and 5.\n    \u003c/summary\u003e\n    In .angular-cli.json file:\n\n\n```json \n    \"styles\": [\n        \"styles.css\",\n        \"../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n        \"../node_modules/tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.css\",\n    ],\n    \"scripts\": [\n        \"../node_modules/jquery/dist/jquery.min.js\",\n        \"../node_modules/bootstrap/dist/js/bootstrap.min.js\",\n        \"../node_modules/moment/min/moment.min.js\",\n        \"../node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js\"\n    ],\n```\n\u003c/details\u003e\n\n## For bootstrap 3\n\n    \n```\nnpm install jquery bootstrap@^3.0.0 moment tempusdominus-core tempusdominus-bootstrap-3 --save\n```\n\n\u003cdetails\u003e\n    \u003csummary\u003e\n    Example configuration for Angular-cli project with Angular 2, 4, and 5.\n    \u003c/summary\u003e\n    In .angular-cli.json file:\n\n\n```json \n    \"styles\": [\n        \"styles.css\",\n        \"../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n        \"../node_modules/tempusdominus-bootstrap-3/build/css/tempusdominus-bootstrap-3.css\",\n    ],\n    \"scripts\": [\n        \"../node_modules/jquery/dist/jquery.min.js\",\n        \"../node_modules/bootstrap/dist/js/bootstrap.min.js\",\n        \"../node_modules/moment/min/moment.min.js\",\n        \"../node_modules/tempusdominus-bootstrap-3/build/js/tempusdominus-bootstrap-3.js\"\n    ],\n```\n\u003c/details\u003e\n\n# Usage\n Import the `NgTempusdominusBootstrapModule` module in your module. You need `FormsModule` or `ReactiveModule` like all other form:\n```javascript\nimport { NgTempusdominusBootstrapModule } from 'ngx-tempusdominus-bootstrap';\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n  imports: [\n    ...\n    FormsModule,\n    NgTempusdominusBootstrapModule,\n    ...\n  ]\n})\nexport class SomeModule {}\n```\n\nIn your component html:\n\n* Input group: (there are 3 directive you shoud use: `NgTempusdominusBootstrap`, `NgTempusdominusBootstrapInput`, and `NgTempusdominusBootstrapToggle`)\n```html\n\u003cdiv class=\"form-group\"\u003e\n    \u003cdiv class=\"input-group date\" data-target-input=\"nearest\" NgTempusdominusBootstrap\u003e\n        \u003cinput\n        [(ngModel)]=\"startDate\"\n        (ngModelChange)=\"update()\"\n        [options]=\"startOptions\"\n        NgTempusdominusBootstrapInput\n        type=\"text\" class=\"form-control\"\n        /\u003e\n        \u003cdiv class=\"input-group-append\" NgTempusdominusBootstrapToggle\u003e\n            \u003cdiv class=\"input-group-text\"\u003e\u003ci class=\"fa fa-calendar\"\u003e\u003c/i\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n* Input Only: (use: `NgTempusdominusBootstrapInput` only)\n```html\n\u003cinput\n    [(ngModel)]=\"date\"\n    [options]=\"options\"\n    NgTempusdominusBootstrapInput\n    type=\"text\" class=\"form-control\"\n/\u003e\n```\n\n## Parameters with `NgTempusdominusBootstrapInput`\n\n### options\n\nWith `options` attribute you can pass an object containing all the required configuration for the tempus dominus v5.\nAll the options available in the original library are supported. Check the list of options on official website: https://tempusdominus.github.io/bootstrap-4/Options/\n\n```javascript\noptions = {\n    format: \"DD.MM.YYYY\",\n    maxDate: moment(),\n    minDate: date,\n    // ...\n};\n```\n\n# Examples\n * [Our demo here](https://fetrarij.github.io/ngx-tempusdominus-bootstrap/)\n * [browse our example code](./demo/src/app/) with bootstrap 4\n * Check the branch `bootstrap-3` for bootstrap 3 examples","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetrarij%2Fngx-tempusdominus-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffetrarij%2Fngx-tempusdominus-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffetrarij%2Fngx-tempusdominus-bootstrap/lists"}