B5kDatepicker

This project was generated with Angular CLI version 8.3.21.

Based on project https://github.com/tomblachut/skimmed-datepicker

Demo

https://stackblitz.com/edit/b5k-datepicker

Screenshots

Inline mode

Popup mode

Features

• select only years, months or day
• popover or inline mode
• ngModel binding
• reactive forms

Install

npm i b5k-datepicker --save

Import module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { B5kDatepickerModule } from 'b5k-datepicker';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    B5kDatepickerModule.forRoot(),
    BrowserAnimationsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

<input type="text" b5kDatepicker>

Get selected date

• from event

  <input type="text" b5kDatepicker (dateChange)="dateChangeEvent($event)">

• ngModel

  <input type="text" b5kDatepicker [(ngModel)]="dateModel">

• reactive Forms

  <input type="text" b5kDatepicker inlineMode=true formControlName="date">

Localization

Datepicker localization is based on date-fns. Just import lang file into module.

Default language is english enGB, so you don't have to import that language file.

import { pl } from 'date-fns/locale';
import { B5kDatepickerModule, B5kDatepickerConfigService } from 'b5k-datepicker';


const DatepickerConfig = new B5kDatepickerConfigService();
DatepickerConfig.setLocale(pl);

@NgModule({
  ...
  providers: [
    {
      provide: B5kDatepickerConfigService,
      useValue: DatepickerConfig
    }
  ]
})
export class AppModule { }

Options

<input type="text" b5kDatepicker [(ngModel)]="monthModel" [view]="view" [modelFormatter]="monthModelFormatter" [selectOnlyMonths]=true>

| Property | Type | Default | Description | |------------------|--------------|---------|----------------------------------------------------------------------------------------------| | date | Date | -- | Initial date | | inlineMode | boolean | false | Always visible | | inputValueFormatter | function | -- | Function you can format date that is set to input value. | | dayFormat | string | d | Day format in day view, https://date-fns.org/v2.10.0/docs/format | |monthFormat | string | LLL | Format month names in month view. | |headingFormat | string | LLLL y | Format date in month heading, eg. February 2020. |weekStart|WeekDay|WeekDay.Monday| import { WeekDay } from '@angular/common'; |view|ViewMode|ViewMode.Days|import { ViewMode } from './view-mode';| |selectOnlyMonths|boolean|false| If selectOnlyMonths = true and view = ViewMode.Months, you can only select month.| |selectOnlyYears|boolean|false| If selectOnlyYears = true and view = ViewMode.Years you can only select years.|

Events

<input type="text" b5kDatepicker [(ngModel)]="model" (dateChange)="selectedDate($event)">

| Property | Type | Description | |------------------|---------------|-------------| | dateChange | Date | Emitted event when date are selected. |

Todo

• disable date/dates/date ranges/weekends/weekdays
• date range selection

Development

Build library and watch for changes ng build b5k-datepicker --watch

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

npm run release && npm run publish

If you want to change only major, minor or patch.

npm run standard-version -- --release-as minor && npm run build && npm run publish

License

MIT