RB AD-BS Datepicker

Angular Datepicker component with support for:

• Nepali (BS) Calendar
• English (AD) Calendar
• Dual Calendar Support
• Dark & Light Themes
• Date & DateTime Picker
• 12/24 Hour Time Format
• Disable Past/Future Dates

Installation

npm i @rameshbhandari/ad-bs-datepicker

Import Module

import { FormsModule } from '@angular/forms';
import { AdBsDatepicker } from '@rameshbhandari/ad-bs-datepicker';

@NgModule({
  imports: [
    FormsModule,
    RbAdBsDatepickerModule
  ]
})
export class AppModule {}

Demo

Live Demo URL:

https://adbsdatepicker.ramesh-bhandari.com.np/

Basic Usage

<rb-ad-bs-datepicker
  mode="BS"
  theme="dark"
  calendarType="nepali"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Examples

Nepali Calendar (Dark Theme)

Displays Nepali Bikram Sambat (BS) calendar with dark theme.

<rb-ad-bs-datepicker
  mode="BS"
  theme="dark"
  calendarType="nepali"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Nepali Calendar (Light Theme)

<rb-ad-bs-datepicker
  mode="BS"
  theme="light"
  calendarType="nepali"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

English Calendar (Dark Theme)

Gregorian AD calendar with dark mode styling.

<rb-ad-bs-datepicker
  mode="AD"
  theme="dark"
  calendarType="english"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

English Calendar (Light Theme)

<rb-ad-bs-datepicker
  mode="AD"
  theme="light"
  calendarType="english"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

English + Nepali Calendar (Dark Theme)

Displays English dates with Nepali references.

<rb-ad-bs-datepicker
  mode="AD"
  theme="dark"
  calendarType="english-nepali"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

English + Nepali Calendar (Light Theme)

<rb-ad-bs-datepicker
  mode="AD"
  theme="light"
  calendarType="english-nepali"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Nepali + English Calendar (Dark Theme)

Primary Nepali calendar with English support.

<rb-ad-bs-datepicker
  mode="BS"
  theme="dark"
  calendarType="nepali-english"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Nepali + English Calendar (Light Theme)

<rb-ad-bs-datepicker
  mode="BS"
  theme="light"
  calendarType="nepali-english"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Disable Date Selection

Disable Future Dates

Useful for DOB or historical records.

<rb-ad-bs-datepicker
  mode="AD"
  theme="dark"
  calendarType="english"
  disable="future"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

Disable Past Dates

Useful for booking and scheduling systems.

<rb-ad-bs-datepicker
  mode="BS"
  theme="light"
  calendarType="nepali"
  disable="past"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

DateTime Picker

DateTime Picker (12-Hour Format)

<rb-ad-bs-datepicker
  mode="BS"
  theme="light"
  calendarType="nepali"
  pickerType="datetime"
  timeFormat="12"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

DateTime Picker (24-Hour Format)

<rb-ad-bs-datepicker
  mode="BS"
  theme="dark"
  calendarType="nepali"
  pickerType="datetime"
  timeFormat="24"
  [showSeconds]="true"
  [(ngModel)]="selectedDate">
</rb-ad-bs-datepicker>

API Reference

| Input | Type | Description | | -------------- | ----------------------- | --------------------------- | | mode | "AD" | "BS" | Calendar mode | | theme | "light" | "dark" | UI theme | | calendarType | string | Calendar display type | | pickerType | "date" | "datetime" | Picker mode | | timeFormat | "12" | "24" | Time format | | disable | "past" | "future" | Disable date selection | | showSeconds | boolean | Show seconds in time picker | | ngModel | any | Two-way binding value |

Supported Calendar Types

| Value | Description | | ---------------- | ----------------------------------- | | nepali | Nepali BS Calendar | | english | English AD Calendar | | english-nepali | English primary with Nepali support | | nepali-english | Nepali primary with English support |

License

MIT License