ngx-datetimepicker-ng

This package is bundled for Angular 5 and webpack/ng-cli. i18n, AOT ready.

Random screenshots

Usage sample with @ng-bootstrap/ng-bootstrap and pug

  div(ngbDropdown, [autoClose]='false', #dropdown='ngbDropdown')
    input(ngbDropdownToggle, name='bar', [ngModel]="myDate | dateFormat: 'DD.MM.YYYY'", (ngModelChange)='myDate=$event',
    ngbDropdownAnchor)

    div(ngbDropdownMenu)
      app-datetimepicker(name='foo', [(ngModel)]='myDate', [dropdownRef]='dropdown')

Installation

Requirements

"moment": "^2.19.4",
"material-design-iconic-font": "^2.2.0",
"bootstrap": "^4.0.0-beta"

Install with npm

npm i ngx-datetimepicker-ng

Include styles

Put this lines into global stylesheet - ie. styles.scss

@import '~bootstrap/scss/bootstrap';
@import '~material-design-iconic-font/dist/css/material-design-iconic-font.css';

Add this line to tsconfig.json

Without it compilation will complain about no moments' default export.

"compilerOptions": {
  ...
  "allowSyntheticDefaultImports": true
  ...
}

Import module

import { DatetimepickerModule } from 'ngx-datetimepicker-ng';

@NgModule({
  imports: [DatetimepickerModule],
})

Configuration

i18n

Moment locale sensitive, set with moment.locale

Component outputs

• [(ngModel)]
• (onPick) - EventEmitter

Component inputs

• [dropdownRef] - dropdown reference, calendar is calling .close() on pick value (template reference)
• dateOnly - allow user to pick only date (boolean)
• [minDate] - min date range (string, number, moment)
• [maxDate] - max date range (string, number, moment)
• [minutesGridValues] - available minutes grid values (array of numbers, ex. [0, 15, 30, 45])

Bugs

GitHub Issue Report: click

Development

Repository

• https://github.com/ngx-components-ng/ngx-datetimepicker-ng

Dependencies

• rollup
• @angular/compiler
• @angular/compiler-cli
• copyfiles

UI Credits

Inspired by angular-bootstrap-datetimepicker by Dale Lotts for Angular 1.

License

Under MIT.