angular-mydatepicker

A highly configurable Angular datepicker and date range picker with no external dependencies. Lightweight, flexible, and feature-rich.

Demo App | API Documentation

Features

• Zero dependencies - Pure Angular implementation
• Dual modes - Single date or date range selection
• Flexible display - Popup or inline mode
• Rich localization - 40+ built-in locales with easy customization
• Keyboard navigation - Full accessibility support
• RTL support - Right-to-left language compatibility
• Smooth animations - Multiple animation styles for calendar transitions
• Highly customizable - 50+ configuration options
• Well tested - Comprehensive test coverage
• TypeScript - Full type definitions included

Installation

npm install gramli-angular-mydatepicker

Quick Start

1. Import the module

Add AngularMyDatePickerModule to your application module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularMyDatePickerModule } from 'gramli-angular-mydatepicker';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMyDatePickerModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Use in your component

Template-driven forms (ngModel):

<input 
  angular-mydatepicker 
  name="mydate"
  [(ngModel)]="model" 
  [options]="myOptions"
  #dp="angular-mydatepicker" 
/>

Reactive forms:

<input 
  angular-mydatepicker
  [formControl]="myDateControl"
  [options]="myOptions"
/>

Component TypeScript:

import { IAngularMyDpOptions, IMyDateModel } from 'gramli-angular-mydatepicker';

export class MyComponent {
  myOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd.mm.yyyy'
  };
  
  model: IMyDateModel = null;
}

Compatibility

| Package Version | Angular Version | |----------------|-----------------| | 21.0.x | 21.x | | 0.18.x | 20.x | | 0.17.x | 19.x | | 0.16.x | 18.x | | 0.15.x | 17.x |

[!NOTE] This project was originally forked from nodro7/angular-mydatepicker. For older versions, visit the original repository.

Usage Examples

Basic Date Picker

// component.ts
import { IAngularMyDpOptions } from 'gramli-angular-mydatepicker';

myOptions: IAngularMyDpOptions = {
  dateFormat: 'dd.mm.yyyy',
  firstDayOfWeek: 'mo'
};

<!-- template.html -->
<input angular-mydatepicker [(ngModel)]="model" [options]="myOptions" />

Date Range Picker

myRangeOptions: IAngularMyDpOptions = {
  dateRange: true,
  dateFormat: 'dd.mm.yyyy'
};

Inline Mode

<input 
  type="hidden"
  angular-mydatepicker 
  [(ngModel)]="model" 
  [options]="{inline: true}"
/>

With Locale

myOptions: IAngularMyDpOptions = {
  dateFormat: 'dd/mm/yyyy'
};

<input angular-mydatepicker [(ngModel)]="model" [options]="myOptions" locale="fr" />

For complete examples, see:

• ngModel example
• Reactive forms example
• Inline mode example

API Reference

Configuration Options

The datepicker accepts an options attribute of type IAngularMyDpOptions with 50+ configuration options.

Core Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | dateRange | boolean | false | Enable date range picker mode | | inline | boolean | false | Display calendar inline (set input type="hidden") | | dateFormat | string | 'yyyy-mm-dd' | Date format (e.g., 'dd.mm.yyyy', 'mm/dd/yyyy') | | defaultView | DefaultView | date | Initial calendar view: date, month, or year | | firstDayOfWeek | string | 'mo' | First day of week: mo, tu, we, th, fr, sa, su | | showWeekNumbers | boolean | false | Display ISO week numbers | | selectorHeight | string | '266px' | Calendar height | | selectorWidth | string | '266px' | Calendar width |

Date Constraints

| Option | Type | Description | |--------|------|-------------| | disableUntil | IMyDate | Disable all dates before this date | | disableSince | IMyDate | Disable all dates after this date | | disableDates | IMyDate[] | Disable specific dates | | disableDateRanges | IMyDateRange[] | Disable date ranges | | disableWeekends | boolean | Disable Saturdays and Sundays | | disableWeekdays | string[] | Disable specific weekdays (e.g., ['tu', 'we']) | | enableDates | IMyDate[] | Enable specific dates (overrides disable rules) |

Styling & Highlighting

| Option | Type | Description | |--------|------|-------------| | markDates | IMyMarkedDates[] | Mark dates with colors or custom styles | | markWeekends | IMyMarkedDate | Highlight weekends with custom color | | highlightDates | IMyDate[] | Highlight specific dates in red | | sunHighlight | boolean | Highlight Sundays in red | | satHighlight | boolean | Highlight Saturdays in red | | stylesData | IMyStyles | Override default styles |

Animation & Behavior

| Option | Type | Default | Description | |--------|------|---------|-------------| | calendarAnimation | IMyCalendarAnimation | None | Open/close animation: None, Fade, ScaleTop, ScaleCenter, Rotate, FlipDiagonal, Own | | viewChangeAnimation | boolean | true | Enable view transition animations | | closeSelectorOnDateSelect | boolean | true | Close calendar after date selection | | closeSelectorOnDocumentClick | boolean | true | Close calendar on outside click | | rtl | boolean | false | Enable right-to-left mode |

Accessibility

| Option | Type | Default | |--------|------|---------| | ariaLabelPrevMonth | string | 'Previous Month' | | ariaLabelNextMonth | string | 'Next Month' |

For the complete list of options, see IAngularMyDpOptions.

Locales

The datepicker supports 40+ locales out of the box. Set the locale attribute to an ISO 639-1 language code:

<input angular-mydatepicker [(ngModel)]="model" locale="fr" />

Supported Locales

en, fr, fr-ch, ja, fi, es, hu, sv, nl, ru, uk, uz, no, tr, pt-br, pt, de, de-ch, it, it-ch, pl, my, ms, sk, sl, zh-cn, he, ro, ca, id, en-au, en-gb, am-et, cs, el, kk, th, ko-kr, da, lt, vi, bn, bg, hr, ar, is, tw, lv, et

[!TIP] To add a new locale, submit a PR updating the locale service.

Default Month

Control which month is displayed when the calendar opens:

// String format
defaultMonth: '08-2019'

// Object format
defaultMonth: {
  defMonth: '08/2019',
  overrideSelection: true  // Show this month even if a date is selected
}

The calendar opens to:

1. The selected date's month (or begin date in range mode)
2. The defaultMonth if specified (or if overrideSelection: true)
3. The current month if neither above applies

Directive Methods

Access directive methods using a template reference variable:

<input angular-mydatepicker #dp="angular-mydatepicker" />

| Method | Description | |--------|-------------| | dp.openCalendar() | Open the calendar | | dp.closeCalendar() | Close the calendar | | dp.toggleCalendar() | Toggle calendar (returns true if opened) | | dp.clearDate() | Clear the selected date/range | | dp.isDateValid() | Check if current input is valid | | dp.headerAction(action) | Trigger header button action | | dp.setHostValue(value) | Set input box value |

Events

dateChanged

Emitted when a date is selected, cleared, or input is valid.

onDateChanged(event: IMyDateModel) {
  if (event.isRange) {
    console.log('Range:', event.dateRange);
  } else {
    console.log('Date:', event.singleDate);
  }
}

Event structure:

• isRange: boolean - true for date ranges
• singleDate: { date, jsDate, formatted, epoc } (when isRange is false)
• dateRange: { beginDate, beginJsDate, beginEpoc, endDate, endJsDate, endEpoc, formatted } (when isRange is true)

inputFieldChanged

Emitted on input field changes.

onInputChanged(event: IMyInputFieldChanged) {
  console.log('Value:', event.value);
  console.log('Valid:', event.valid);
}

calendarViewChanged

Emitted when the calendar view changes.

onViewChanged(event: IMyCalendarViewChanged) {
  console.log('Month:', event.month, 'Year:', event.year);
}

calendarToggle

Emitted when calendar opens/closes with reason code:

• 1 - Calendar opened
• 2 - Closed by date select
• 3 - Closed by calendar button
• 4 - Closed by outside click
• 5 - Closed by ESC key

rangeDateSelection

Emitted in date range mode when a date is selected.

onRangeSelection(event) {
  console.log(event.isBegin ? 'Start date:' : 'End date:', event.formatted);
}

viewActivated

Emitted when calendar view changes (date/month/year).

onViewActivated(view: ActiveView) {
  // 1 = date view, 2 = month view, 3 = year view
}

Styling

Override any styles from the default stylesheet using the stylesData option:

myOptions: IAngularMyDpOptions = {
  stylesData: {
    selector: 'dp1',
    styles: `
      .dp1 .myDpMarkCurrDay {
        border-bottom: 2px solid #0099ff;
      }
    `
  }
}

Development

Prerequisites

• Git
• Node.js with npm

Setup

git clone https://github.com/Gramli/angular-mydatepicker.git
cd angular-mydatepicker
npm install

Run Demo

npm start
# Navigate to http://localhost:4200

Testing & Linting

# Run tests with coverage
npm run test-lib
# Coverage report available in test-output/

# Run linter
npm run lint-lib

Build Library

npm run build-lib
# Output: dist/angular-mydatepicker/

Create Local Package

npm run build-lib
cd dist/angular-mydatepicker
npm pack
# Install in your project:
# npm install path/to/gramli-angular-mydatepicker-x.y.z.tgz

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For new locales, update the locale service.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits

Originally created by kekeh and nodro7. Currently maintained by Gramli.