Date and time pickers for Angular 2/4

Usage no npm install needed!

<script type="module">
  import acadomiaDatepicker from 'https://cdn.skypack.dev/@acadomia/datepicker';


Angular 2/4 Datetime Picker

Native Angular 2 date picker component styled by Twitter Bootstrap 3

The idea of this project is to create a custome component selecting and showing dates selected by the user. I've decided NOT to use html <input type="date|datetime-local|month|time"> because of browser restriction (does not work on firefox), and be cause I'd like the flexibility of customizing the appearance of the date using HTML tags. I've decided NOT to use @angular/material because I wanted something easier to customize

There is still much to do here, and any support is welcome. I'm in no way an expert in frontend devepment (I'm a Java developer), so alot of these things are new to me.

View Demo


Install @novalinc/datepicker via NPM

$ cd /path/to/your-awesome-project
$ npm install --save @novalinc/datepicker@latest

Angular CLI Scripts and Styles Configuration

Date picker relies heavily on Twitter Bootstrap for styling, so you need to configure bootstrap globally for your application. In the .angular-cli.json file, please be sure to set the followng:

    "styles": [
    "scripts": [


In your application's module file

import { DatepickerModule } from '@novalinc/datepicker';


export class FeatureModule { }

In your application's component file

import { Component } from '@angular/core';
import { DateModel, DatepickerOptions, TemporalType } from '@novalinc/datepicker';
  selector: 'ft-comp',
  templateUrl: 'feature.component.html'

export class FeatureComponent implements OnInit {
    departure: DateModel;
    departureOptions: DatepickerOptions;

    ngOnInit(): void {
        // Set options for the datepicker
        this.departureOptions = new DatepickerOptions();
        this.departureOptions.temporal = TemporalType.TIMESTAMP; 
        this.departureOptions.placeholder = "Depart date";

In your component's view (html)

<form #form="ngForm"> 
    <div class="row">
        <div class="col-sm-6">
            <h4>Selecting both date and time e.g. Departure time</h4>
            <nl-datepicker name="departure" [options]="departureOptions" [(ngModel)]="departure"></nl-datepicker>
        <div class="col-sm-6">



$ cd novalinc-datepicker
# Build library
$ npm run build

Publish Library

# Ensure that the project has been built first
$ cd dist # Be sure to ONLY publish the dist content and NOT the rest of the project
$ npm publish --access=public


All dependencies are specified in the package.json, but the following are a MUST:

  • moment (2.17.1)
  • bootstrap (3.3.7)