1.1.31 • Public • Published

    Angular 2 / 4 DateTime Picker

    Documentation | Demos / Examples.


    Angular 2 DateTimepicker is a cool responsive DateTimepicker component for Web and Mobile. It is Mobile friendly and light weight. Developed by Cuppa Labs.

    Getting Started

    To get started with using the multiselect dropdown component, follow the below steps. It’s easy to integrate and just a matter of minutes.


    • The datetimepicker package is published on the npm Registry.
    • Install the package with npm:
        npm install angular2-datetimepicker


    Import AngularDateTimePickerModule into your AppModule

    import { AngularDateTimePickerModule } from 'angular2-datetimepicker';
      // ...
      imports: [
      // ...

    Declare the component data variables and options in your component where you want to consume the dropdown component.

    import { Component, OnInit } from '@angular/core';
    export class AppComponent implements OnInit {
        date: Date = new Date();
        settings = {
          bigBanner: true,
              timePicker: false,
          format: 'dd-MM-yyyy',
              defaultOpen: true,
              minDate: new Date()

    Add the following component tag in the template where your want to place the datepicker.
    Min Date is optional.

    <angular2-date-picker [(ngModel)]="date" [settings]="settings"></angular2-date-picker>


    Following settings object properties can be used to configure the component.

    Property Type Default Description
    format String dd-MMM-yyyy hh:mm a Date format of the selected date.
    bigBanner Boolean true The banner section to show the date details.
    defaultOpen Boolean false To open the datepicker popover on load. Default is set to false.
    timePicker Boolean false Enable time picker feature.
    closeOnSelect Boolean true to close the popover on date select or on click of done button.
    minDate Date new Date() Pass minimum date beyond which all date will be disabale
    preserveTimeValue boolean false Time will not become 00:00 on selection of new date
    incrementByMinutes number 0 Increment initial time by n minutes

    Callback Methods

    • onDateSelect

    Define a callback method to be called on select of the date.

      <angular2-date-picker (onDateSelect)="onDateSelect($event)" 
                [settings]="settings" >

    Date Formats Support

    format string can be composed of the following elements:

    • 'yyyy': 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)
    • 'yy': 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)
    • 'y': 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)
    • 'MMMM': Month in year (January-December)
    • 'MMM': Month in year (Jan-Dec)
    • 'MM': Month in year, padded (01-12)
    • 'M': Month in year (1-12)
    • 'LLLL': Stand-alone month in year (January-December)
    • 'dd': Day in month, padded (01-31)
    • 'd': Day in month (1-31)
    • 'EEEE': Day in Week,(Sunday-Saturday)
    • 'EEE': Day in Week, (Sun-Sat)
    • 'HH': Hour in day, padded (00-23)
    • 'H': Hour in day (0-23)
    • 'hh': Hour in AM/PM, padded (01-12)
    • 'h': Hour in AM/PM, (1-12)
    • 'mm': Minute in hour, padded (00-59)
    • 'm': Minute in hour (0-59)
    • 'ss': Second in minute, padded (00-59)
    • 's': Second in minute (0-59)
    • 'sss': Millisecond in second, padded (000-999)
    • 'a': AM/PM marker
    • 'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)
    • 'ww': Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year
    • 'w': Week of year (0-53). Week 1 is the week with the first Thursday of the year
    • 'G', 'GG', 'GGG': The abbreviated form of the era string (e.g. 'AD')
    • 'GGGG': The long form of the era string (e.g. 'Anno Domini')

    format string can also be one of the following predefined localizable formats:

    • 'medium': equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)

    • 'short': equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)

    • 'fullDate': equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3, 2010)

    • 'longDate': equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)

    • 'mediumDate': equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)

    • 'shortDate': equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)

    • 'mediumTime': equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)

    • 'shortTime': equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)

    Run locally

    • Clone the repository or downlod the .zip,.tar files.
    • Run npm install
    • Run ng serve for a dev server
    • Navigate to http://localhost:4200/


    MIT License.


    Thanks to Font Awesome and Moment.js for the libraries.


    Pradeep Kumar Terli

    Release Info


    New feature included opening of time window every time date is selected.


    npm i angular2-ak-datetimepicker

    DownloadsWeekly Downloads






    Unpacked Size

    365 kB

    Total Files


    Last publish


    • chitkadia