Datetime picker plugins wrapper for Angular2. Tested with angular 2.0.0-rc.1
- Bootstrap3 (CSS only)
- jQuery 2.x
- Bootstrap-timepicker (JS+CSS)
npm install --save bootstrap-datepicker
or use the bundled version fromsrc/vendor/bootstrap-datepicker
- Bootstrap-datepicker (JS+CSS)
npm install --save bootstrap-timepicker
or use the bundled version fromsrc/vendor/bootstrap-timepicker
npm install --save ng2-datetime
- 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.
-
[datepicker]="{Object} || false"
- Object with Datepicker options orfalse
if you want to remove the datepicker Ex.<datetime [datepicker]="{daysOfWeekDisabled: [0,6]}" [(ngModel)]="date"></datetime>
-
[timepicker]="{Object} || false"
- Object with Timepicker options orfalse
if you want to remove the timepicker Ex.<datetime [timepicker]="{showMeridian: false, minuteStep: 1}" [(ngModel)]="date"></datetime>
Fork > Create > Pull request
- @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
- find out how to test implemented ControlValueAccessor interface
- test jQuery plugins init and events