Skip to content

burasuk/b5k-datepicker

Repository files navigation

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

inline mode

Popup 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