Taranys / ng2-datetime

Datetime picker plugins wrapper for Angular2

ng2-datetime v1.0.3

Datetime picker plugins wrapper for Angular2. Tested with angular 2.0.0-rc.1

DEMO: https://nkalinov.github.io/ng2-datetime

Dependencies

• Bootstrap3 (CSS only)
• jQuery 2.x
• Bootstrap-timepicker (JS+CSS) npm install --save bootstrap-datepicker or use the bundled version from src/vendor/bootstrap-datepicker
• Bootstrap-datepicker (JS+CSS) npm install --save bootstrap-timepicker or use the bundled version from src/vendor/bootstrap-timepicker

Installation

npm install --save ng2-datetime

Usage

1. import some way or another the required dependencies If you want to use the bundled versions, you can import them like this:

import 'ng2-datetime/src/vendor/bootstrap-datepicker/bootstrap-datepicker.min.js';
import 'ng2-datetime/src/vendor/bootstrap-timepicker/bootstrap-timepicker.min.js';

The bundled CSS is in the same folder, it's up to you to decide how to import those. 2. import {NKDatetime} from 'ng2-datetime/ng2-datetime'; 3. Add to your component's directives property

@Component({
    ...
    directives: [NKDatetime],
    ...
})

• Basic usage: <datetime [(ngModel)]="date"></datetime> See the DEMO and it source for more information.

Options

• [datepicker]="{Object} || false" - Object with Datepicker options or false if you want to remove the datepicker Ex. <datetime [datepicker]="{daysOfWeekDisabled: [0,6]}" [(ngModel)]="date"></datetime>

• [timepicker]="{Object} || false" - Object with Timepicker options or false if you want to remove the timepicker Ex. <datetime [timepicker]="{showMeridian: false, minuteStep: 1}" [(ngModel)]="date"></datetime>

Contributing

Fork > Create > Pull request

Thanks

• @jdewit for the timepicker plugin
• @eternicode for the datepicker plugin
• @alexanza for the idea of removing one of the two pickers by passing false to the options

TODO:

• find out how to test implemented ControlValueAccessor interface
• test jQuery plugins init and events