@atshubh/angular-mydatepicker v2.0.1

Screenshots using predefined styles and the markDates option. The predefined styles and some of the options can be tested here.

Angular datepicker and date range picker

Browser support (tested)

Description

Highly configurable Angular datepicker and date range picker.

Basic idea to create this library was to make it as configurable as possible. The library is implemented as a directive. It is done this way, because then there is more choices to configure it.

Online demo is here

Main features

• no dependencies to other libraries
• currently localized to 47 languages
• datepicker
• date range picker
• popup mode
• inline mode
• supports keyboard
• supports RTL
• animation of calendar (open/close)
• awesome configuration possibilities
  • easily set styles to the component which are in line with your page theme
    • calendar (example)
    • input box and input box controls (bootstrap 4 and font-awesome example)
  • 50 options
    • change value of any option dynamically
• well tested
  • coverage report
  • most of the codes are from the existing libraries which are widely used

Project

This project was generated with Angular CLI version 7.3.8.

Source code of the component is in the projects/angular-mydatepicker/src folder.

Code examples

Code examples are here.

Installation

To install this component to an external project, follow the procedure:

1. npm install angular-mydatepicker --save

2. Add AngularMyDatePickerModule import to your @NgModule as follows:

   import { BrowserModule } from "@angular/platform-browser";
   import { NgModule } from "@angular/core";
   import { FormsModule, ReactiveFormsModule } from "@angular/forms";
   import { AngularMyDatePickerModule } from "angular-mydatepicker";
   
   @NgModule({
     declarations: [AppComponent],
     imports: [
       BrowserModule,
       ReactiveFormsModule,
       FormsModule,
       AngularMyDatePickerModule,
     ],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

Usage

Use one of the following two options.

1. ngModel binding

In this option the ngModel binding is used.

Examples:

• bootstrap 4 and font awesome example
• own style in input box (no bootstrap)
• example application

There are two ways to initialize date or date range to the model.

Examples:

• initialize date model (single date mode)
• initialize date model (date range mode)

2. Reactive forms

In this option the value accessor of reactive forms is used.

Examples:

• reactive forms (bootstrap 4 and font awesome)
• example application

Attributes

options attribute

The options attribute is a type of IAngularMyDpOptions. It has the following optional properties.