ng2-datepicker

Angular2 Datepicker Component

Showing:

Popularity

Downloads/wk

3.5K

GitHub Stars

306

Maintenance

Last Commit

4mos ago

Contributors

31

Package

Dependencies

3

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial