ng2-datepicker
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.0 • Public • Published

    ng2-datepicker

    ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable.

    Installation

    1. Install package from npm.
    npm install ng2-datepicker --save
    1. Include DatepickerModule into your application.
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { DatepickerModule } from 'ng2-datepicker';
    
    @NgModule({
      imports: [BrowserModule, DatepickerModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

    And that's it, you can then use it in your component as:

    date = new Date();
    <ngx-datepicker [(ngModel)]="date"></ngx-datepicker>

    Options

    import { DatepickerOptions } from 'ng2-datepicker';
    import { getYear } from 'date-fns';
    import locale from 'date-fns/locale/en-US';
    
    // options sample with default values
    options: DatepickerOptions = {
      minYear: getYear(new Date()) - 30, // minimum available and selectable year
      maxYear: getYear(new Date()) + 30, // maximum available and selectable year
      placeholder: '', // placeholder in case date model is null | undefined, example: 'Please pick a date'
      format: 'LLLL do yyyy', // date format to display in input
      formatTitle: 'LLLL yyyy',
      formatDays: 'EEEEE',
      firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
      locale: locale, // date-fns locale
      position: 'bottom',
      inputClass: '', // custom input CSS class to be applied
      calendarClass: 'datepicker-default', // custom datepicker calendar CSS class to be applied
      scrollBarColor: '#dfe3e9', // in case you customize you theme, here you define scroll bar color
      keyboardEvents: true // enable keyboard events
    };

    For available format, formatTitle and formatDays options check out here.

    Then you apply custom options in your template as:

    <ngx-datepicker [(ngModel)]="date" [options]="options"></ngx-datepicker>

    Theme customization

    This examples uses SASS as style preprocessor.

    .datepicker-blue
      .calendar-container
        background: #32A8E4
        border: 1px solid #32A8E4
        box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
        top: 35px
        left: 0
        font-weight: 700
      .month-year-text
        color: #ffffff
      .control
        path
          fill: #eff1f5
        &:hover
          path
            fill: #ffffff
      .day-name-unit
        color: #fafafa
      .day-unit, .year-unit
        color: #ffffff
        &.is-prev-month
          color: #8ed0f0
        &.is-today
          background: #8ed0f0
        &:hover, &.is-selected
          background: #ffffff
          color: #686669
        &.is-disabled
          color: #aaa8ab
          &:hover
            background: transparent

    And in your component:

    import { DatepickerOptions } from 'ng2-datepicker';
    
    options: DatepickerOptions = {
      calendarClass: 'datepicker-blue',
      scrollBarColor: '#ffffff'
    };

    Run Demo

    1. Clone this repository.
    git clone https://github.com/bleenco/ng2-datepicker
    1. Install dependencies
    npm install
    1. Start the demo
    npm start

    License

    MIT

    Keywords

    none

    Install

    npm i ng2-datepicker

    DownloadsWeekly Downloads

    3,591

    Version

    12.0.0

    License

    MIT

    Unpacked Size

    244 kB

    Total Files

    20

    Last publish

    Collaborators

    • jkuri