NgTsDatepicker

Angular (6+) directive which wraps http://eonasdan.github.io/bootstrap-datetimepicker/ component.

Installation

npm install ng-ts-datepicker --save

Usage

Import module

import { NgTsDatepickerModule } from 'ng-ts-datepicker';
. . .
@NgModule({
  . . .
  imports : [
    . . .
    NgTsDatepickerModule
  ]

Styles

Add .css file from ng-ts-datepicker/styles.min.css (or add it to styles array in .angular-cli.json if you are using it)

Use component

Put it inside a element with input-group class so it gets proper icon displayed:

<div class="input-group">
  <input class="form-control"
    ngTsDatepicker
    [(date)]="datepickerValue"
    [options]="datepickerOptions"
    (change)="dateChange($event)"
    (click)="dateClick()">
</div>

  datepickerOptions = {
    allowInputToggle: true,
    format: DATETIME_FORMAT,
    showClear: true,
    showClose: true
  };
  datepickerValue = null;
 
  dateChange(date: date) {}
 
  dateClick() {}

Properties

• date - initial date value
• options - options based on http://eonasdan.github.io/bootstrap-datetimepicker/Options/ plus some additional options:
  • preventInputKeys (prevents entering values manually into input, defaults to true)

Events

• change - once date is changed it will emit date object
• click - once date picker is clicked with empty value

Dependencies

They are already in package.json, but here is a list:

• eonasdan-bootstrap-datetimepicker (http://eonasdan.github.io/bootstrap-datetimepicker/)
• jquery (https://jquery.com/)
• moment (https://momentjs.com/)

Release notes

• 1.3.0
  • Breaking change: Added support for Angular6+. Now only support Angular6+, for below version, use 1.2.0
• 1.2.0
  • added styles.min.css
• 1.0.0
  • first stable version