ngx-nepali-dualpicker

Angular Nepali date picker for Bikram Sambat (BS) and Gregorian (AD) dates, with BS/AD conversion, reactive forms support, range and multiple selection, theming, and SSR-safe rendering.

npm | Demo

Features

• Supports both BS and AD calendars.
• Converts dates between BS and AD through DateConversionService.
• Works with Angular standalone components and Reactive Forms.
• Selection modes: single, range, and multiple.
• English and Nepali display modes.
• Manual input support with configurable formats.
• Min/max dates, disabled dates, disabled weekdays, past/future restrictions.
• Built-in light, dark, ocean, forest, purple, and rose themes.
• Custom theme support through CSS variables.
• SSR-safe for Angular Universal/SSR apps.
• Popup positioning is fixed to the viewport, so the calendar is not clipped inside cards, modals, or containers with overflow: hidden.

Compatibility

| Package | Supported | | --- | --- | | Angular | >=17 <22 | | Node.js | >=18 |

Installation

npm install ngx-nepali-dualpicker

Quick Start

import { Component } from '@angular/core';
import { NgxNepaliDualpicker, DatePickerConfig } from 'ngx-nepali-dualpicker';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgxNepaliDualpicker],
  template: `
    <ngx-nepali-dualpicker
      [config]="config"
      (dateSelected)="onDateSelected($event)">
    </ngx-nepali-dualpicker>
  `,
})
export class ExampleComponent {
  config: DatePickerConfig = {
    calendarType: 'BS',
    placeholder: 'Select date',
  };

  onDateSelected(value: string | string[] | { start: string | null; end: string | null } | null): void {
    console.log(value);
  }
}

Reactive Forms

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NgxNepaliDualpicker, DatePickerConfig } from 'ngx-nepali-dualpicker';

@Component({
  selector: 'app-form-example',
  standalone: true,
  imports: [ReactiveFormsModule, NgxNepaliDualpicker],
  template: `
    <ngx-nepali-dualpicker
      [formControl]="dateControl"
      [config]="config">
    </ngx-nepali-dualpicker>
  `,
})
export class FormExampleComponent {
  dateControl = new FormControl<string | null>(null);

  config: DatePickerConfig = {
    calendarType: 'AD',
    outputFormat: 'yyyy-MM-dd',
  };
}

Calendar Modes

const bsConfig: DatePickerConfig = {
  calendarType: 'BS',
};

const adConfig: DatePickerConfig = {
  calendarType: 'AD',
};

const autoConvertConfig: DatePickerConfig = {
  calendarType: 'BS',
  autoConvert: true,
};

Selection Modes

const singleConfig: DatePickerConfig = {
  mode: 'single',
};

const rangeConfig: DatePickerConfig = {
  mode: 'range',
  closeOnSelect: false,
};

const multipleConfig: DatePickerConfig = {
  mode: 'multiple',
  closeOnSelect: false,
  multipleSelectionSettings: {
    maxSelections: 5,
  },
};

Manual Input

const config: DatePickerConfig = {
  allowManualInput: true,
  displayFormat: 'yyyy-MM-dd',
  outputFormat: 'yyyy-MM-dd',
};

Supported display/output formats:

• yyyy-MM-dd
• yyyy/MM/dd
• MM/dd/yyyy
• dd/MM/yyyy
• dd-MM-yyyy
• MMM dd, yyyy for display formatting

Date Restrictions

Restriction dates can be JavaScript Date values, ISO strings, or date objects.

const config: DatePickerConfig = {
  minDate: { year: 2080, month: 1, day: 1 },
  maxDate: { year: 2082, month: 12, day: 30 },
  disablePastDates: false,
  disableFutureDates: false,
  disabledDaysOfWeek: [0, 6],
  disabledDates: [
    { year: 2081, month: 10, day: 15 },
    '2081-12-01',
    new Date(),
  ],
};

Date object months are 1-based:

{ year: 2081, month: 1, day: 15 }

JavaScript Date months are still 0-based because that is how JavaScript works:

new Date(2024, 0, 15) // January 15, 2024

Popup Positioning

By default, the popup is positioned relative to the browser viewport with position: fixed. This prevents the calendar from being clipped when the picker is used inside cards, dialogs, tables, or containers that use overflow: hidden.

const config: DatePickerConfig = {
  position: 'bottom-left',
};

Supported positions:

• bottom-left
• bottom-right
• top-left
• top-right
• auto

For an always-visible calendar, use inline mode:

const config: DatePickerConfig = {
  inline: true,
};

SSR Support

The library is safe to render in Angular SSR apps. Browser-only APIs such as window, document, ResizeObserver, CustomEvent, and matchMedia are guarded and only run in the browser.

In an SSR app, install and import the package normally:

import { NgxNepaliDualpicker } from 'ngx-nepali-dualpicker';

If you previously used an older build and still see window is not defined, rebuild/reinstall the package and clear the consuming app cache:

npx ng cache clean

Theming

Use a preset theme:

const config: DatePickerConfig = {
  theme: 'dark',
};

Available presets:

• light
• dark
• ocean
• forest
• purple
• rose
• system

Use a custom theme:

const config: DatePickerConfig = {
  theme: 'light',
  customTheme: {
    colors: {
      primary: '#2563eb',
      selectedBg: '#2563eb',
      selectedText: '#ffffff',
      background: '#ffffff',
      surface: '#f8fafc',
      border: '#dbe3ef',
      text: '#0f172a',
    },
    dimensions: {
      containerWidth: '340px',
      dateSize: '38px',
    },
  },
};

Global Configuration

import { ApplicationConfig } from '@angular/core';
import { DATE_PICKER_CONFIG } from 'ngx-nepali-dualpicker';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DATE_PICKER_CONFIG,
      useValue: {
        calendarType: 'BS',
        language: 'en',
        theme: 'light',
        outputFormat: 'yyyy-MM-dd',
      },
    },
  ],
};

Component-level config overrides global config:

<ngx-nepali-dualpicker [config]="{ theme: 'purple', mode: 'range' }"></ngx-nepali-dualpicker>

Date Conversion Service

import { inject } from '@angular/core';
import { DateConversionService } from 'ngx-nepali-dualpicker';

export class ExampleComponent {
  private dateConversion = inject(DateConversionService);

  bsDate = this.dateConversion.convertAdToBs('2024-01-15');
  adDate = this.dateConversion.convertBsToAd('2080-10-01');
}

Return formatted strings by passing true:

const bs = this.dateConversion.convertAdToBs('2024-01-15', true);
const ad = this.dateConversion.convertBsToAd('2080-10-01', true);

Pipes

import { NepaliDatePipe, CurrencyFormatterPipe } from 'ngx-nepali-dualpicker';

@Component({
  standalone: true,
  imports: [NepaliDatePipe, CurrencyFormatterPipe],
  template: `
    {{ '2024-01-15' | nepaliDate:'mediumDate':'en':'AD' }}
    {{ 1234567.89 | currencyFormatter:'NPR' }}
  `,
})
export class PipesExampleComponent {}

Public API

import {
  NgxNepaliDualpicker,
  DateConversionService,
  DatePickerConfigService,
  ThemeService,
  DATE_PICKER_CONFIG,
  DEFAULT_PICKER_CONFIG,
  PRESET_THEMES,
  NepaliDatePipe,
  CurrencyFormatterPipe,
  Calendar,
} from 'ngx-nepali-dualpicker';

import type {
  DatePickerConfig,
  DatePickerTheme,
  PresetThemeName,
  CalendarType,
} from 'ngx-nepali-dualpicker';

Configuration Reference

| Option | Type | Default | | --- | --- | --- | | language | 'en' \| 'ne' | 'en' | | calendarType | 'BS' \| 'AD' | 'BS' | | autoConvert | boolean | false | | allowManualInput | boolean | false | | displayFormat | date format | 'yyyy-MM-dd' | | outputFormat | date format | 'yyyy-MM-dd' | | monthDisplayType | 'default' \| 'short' | 'default' | | dayDisplayType | 'default' \| 'short' | 'short' | | mode | 'single' \| 'range' \| 'multiple' | 'single' | | allowModeToggle | boolean | false | | minDate | Date \| string \| DateObj | { year: 2000, month: 1, day: 1 } | | maxDate | Date \| string \| DateObj | { year: 2139, month: 12, day: 30 } | | disableFutureDates | boolean | false | | disablePastDates | boolean | false | | disabledDates | Array<Date \| string \| DateObj> | [] | | disabledDaysOfWeek | number[] | [] | | showClearButton | boolean | true | | showTodayButton | boolean | true | | closeOnSelect | boolean | true | | placeholder | string | 'Select a date' | | position | popup position | 'bottom-left' | | theme | preset, custom theme, or 'system' | 'light' | | customTheme | Partial<DatePickerTheme> | {} | | yearRange | { start: number; end: number } | { start: 2000, end: 2139 } | | mobileMode | 'compact' \| 'full' | 'compact' | | firstDayOfWeek | 0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 0 | | inline | boolean | false | | multipleSelectionSettings.maxSelections | number \| undefined | undefined |

Development

Build the library:

npx ng build ngx-nepali-dualpicker

Run tests:

npx ng test ngx-nepali-dualpicker --watch=false --browsers=ChromeHeadless

Build the demo app:

npx ng build dualpicker-demo

License

MIT