npm

Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript.Learn more »

ng-ts-datepicker

1.2.0 • Public • Published

Build Status

NgTsDatepicker

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

image

Installation

npm install ng-ts-datepicker --save

Usage

Import module

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

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(datedate) {}
 
  dateClick() {}

Styles

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

Properties

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.2.0
    • added styles.min.css
  • 1.0.0
    • first stable version

Keywords

none

install

npm i ng-ts-datepicker

Downloadsweekly downloads

16

version

1.2.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability