npm

@mksasi/datepicker
TypeScript icon, indicating that this package has built-in type declarations

16.0.0 • Public • Published

datepicker

Angular 2+ Simple and minimal datepicker component, added support for Angular 9 (Forked from bleenco/ng2-datepicker)

Installation

  1. Install package from npm.
npm install @mksasi/datepicker --save
  1. Include NgDatepickerModule into your application.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatepickerModule } from 'ng2-datepicker';

@NgModule({
  imports: [
    BrowserModule,
    NgDatepickerModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}

Example

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

Additional attributes

Name Type Default Description
headless boolean false Disable datepicker's input
isOpened boolean false Show or hide datepicker
position string bottom-right Dropdown position (bottom-left, bottom-right, top-left, top-right)

Options

import { DatepickerOptions } from 'ng2-datepicker';
import * as frLocale from 'date-fns/locale/fr';

options: DatepickerOptions = {
  minYear: 1970,
  maxYear: 2030,
  displayFormat: 'MMM D[,] YYYY',
  barTitleFormat: 'MMMM YYYY',
  dayNamesFormat: 'dd',
  firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
  locale: frLocale,
  minDate: new Date(Date.now()), // Minimal selectable date
  maxDate: new Date(Date.now()),  // Maximal selectable date
  barTitleIfEmpty: 'Click to select a date',
  placeholder: 'Click to select a date', // HTML input placeholder attribute (default: '')
  addClass: 'form-control', // Optional, value to pass on to [ngClass] on the input field
  addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
  fieldId: 'my-date-picker', // ID to assign to the input field. Defaults to datepicker-<counter>
  useEmptyBarTitle: false, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown 
};

For available format options check out here.

In case you want to initialize with an empty value, just assign null to the model attribute you're storing the date and you can customize the message in the bar with the property barTitleIfEmpty.

Run Included Demo

  1. Clone this repository
git clone https://github.com/jkuri/ng2-datepicker.git
cd ng2-datepicker
  1. Install packages
npm install
  1. Run Demo
npm start

Licence

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i @mksasi/datepicker

Weekly Downloads

3

Version

16.0.0

License

MIT

Unpacked Size

169 kB

Total Files

14

Last publish

Collaborators

  • mksasi