Ngx-datetimepicker-ng NPM

ngx-datetimepicker-ng

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

Random screenshots

Day view

Month view

Hours view

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])