ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable.
- Install package from
npm.
npm install ng2-datepicker --save- 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>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>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: transparentAnd in your component:
import { DatepickerOptions } from 'ng2-datepicker'; options: DatepickerOptions = { calendarClass: 'datepicker-blue', scrollBarColor: '#ffffff' };- Clone this repository.
git clone https://github.com/bleenco/ng2-datepicker- Install dependencies
npm install- Start the demo
npm startMIT