Examples — Nepali Datepicker

01

Basic Date Picker

The simplest setup — an inline calendar that fires onChange when a date is selected.

import { createPicker, NepaliDate }
  from 'nepali-datepicker';
import 'nepali-datepicker/dist/material.css';

const picker = createPicker(
  document.getElementById('picker'),
  {
    locale: 'en',
    openOnInit: true,
    defaultDate: NepaliDate.today(),
    onChange: (date) => {
      console.log(
        date.format('YYYY MMMM DD')
      );
    },
  }
);

Select a date

02

Nepali (Devanagari) Locale

Full Devanagari rendering — month names, day names, and numerals in Nepali script.

const picker = createPicker(el, {
  locale: 'np',
  openOnInit: true,
  defaultDate: NepaliDate.today(),
  onChange: (date) => {
    console.log(
      date.format('MMMM DD, YYYY', 'np')
    );
    // → फाल्गुण २७, २०८२
  },
});

मिति छान्नुहोस्

03

Date Range Picker

Select a start and end date. Hover preview shows the range before committing.

const rangePicker = createPicker(el, {
  range: true,
  locale: 'en',
  openOnInit: true,
  onRangeChange: ({ start, end }) => {
    console.log(
      `${start.format()} → ${end.format()}`
    );
    console.log(
      `Duration: ${start.diff(end)} days`
    );
  },
});

Click to select start date

04

Min/Max Date Constraints

Restrict the selectable date range. Dates outside the bounds are automatically disabled.

const picker = createPicker(el, {
  locale: 'en',
  openOnInit: true,
  minDate: NepaliDate.parse('2082-10-01'),
  maxDate: NepaliDate.parse('2082-12-30'),
  defaultDate: NepaliDate.parse('2082-11-15'),
  onChange: (date) => {
    console.log(date.format());
  },
});

Only Poush–Chaitra 2082 selectable

05

Disabled Days (Saturdays)

Disable specific weekdays — here, all Saturdays are disabled to match Nepal's weekend.

const picker = createPicker(el, {
  locale: 'en',
  openOnInit: true,
  defaultDate: NepaliDate.today(),
  disabledDays: ['Sat'],
  onChange: (date) => {
    console.log(date.format('dddd, MMMM DD'));
    // Saturdays can't be selected
  },
});

Saturdays are greyed out

06

Input Field Binding

Attach the picker to a text input — it opens on click/focus and auto-syncs the value.

const input = document
  .getElementById('date-input');

const picker = createPicker(input, {
  locale: 'en',
  syncInput: true,
  format: 'YYYY-MM-DD',
  defaultDate: NepaliDate.today(),
  onChange: (date) => {
    console.log('Selected:', date.format());
  },
});

07

Date Manipulation API

Moment.js-inspired chainable API — arithmetic, comparison, and formatting on immutable NepaliDate objects.

const today = NepaliDate.today();

// Arithmetic
today.addDays(30).format('MMMM DD, YYYY');
today.addMonths(3).startOf('month').format();
today.subtractYears(1).endOf('year').format();

// Properties
today.daysInMonth;
today.dayOfYear;
today.weekOfYear;
today.isWeekend();
today.quarter;

// Diff
const ny = NepaliDate.parse('2082-01-01');
today.diff(ny, 'day');

Loading...

08

BS ↔ AD Conversion

Convert dates between Bikram Sambat and Gregorian calendars in real-time.

import { adToBS, bsToAD }
  from 'nepali-datepicker';

// AD → BS
const bs = adToBS(2025, 3, 11);
// → { year: 2081, month: 11, day: 27 }

// BS → AD
const ad = bsToAD(2082, 1, 1);
// → { year: 2025, month: 4, day: 14 }

// Via NepaliDate
NepaliDate.fromAD(new Date());
NepaliDate.today().toAD();

09

Framework Adapters

First-class support for React, Vue 3, and Svelte. The headless engine works everywhere.

import { useNepaliDatePicker } from 'nepali-datepicker/react';

function MyPicker() {
  const {
    state, selectDate,
    goToPrevMonth, goToNextMonth
  } = useNepaliDatePicker({ locale: 'en' });

  return (
    <div className="my-calendar">
      <button onClick={goToPrevMonth}>‹</button>
      <span>
        {state.viewYear} / {state.viewMonth}
      </span>
      <button onClick={goToNextMonth}>›</button>
      <div className="grid">
        {state.weeks.flat().map((cell, i) =>
          cell ? (
            <button
              key={i}
              onClick={() => selectDate(cell.date)}
              disabled={cell.isDisabled}
            >
              {cell.label}
            </button>
          ) : <span key={i} />
        )}
      </div>
    </div>
  );
}

<script setup>
import { useNepaliDatePicker }
  from 'nepali-datepicker/vue';

const {
  state, selectDate,
  goToPrevMonth, goToNextMonth
} = useNepaliDatePicker({
  locale: 'np'
});
</script>

<template>
  <div>
    <button @click="goToPrevMonth">‹</button>
    <span>
      {{ state.viewYear }} / {{ state.viewMonth }}
    </span>
    <button @click="goToNextMonth">›</button>
  </div>
</template>

<script>
  import { createNepaliPickerStore }
    from 'nepali-datepicker/svelte';

  const picker = createNepaliPickerStore({
    locale: 'en'
  });

  const { state, selectDate } = picker;
</script>

{#if $state}
  <div>
    {$state.viewYear} / {$state.viewMonth}
    {#each $state.weeks.flat() as cell, i}
      {#if cell}
        <button
          on:click={() => selectDate(cell.date)}
        >
          {cell.label}
        </button>
      {/if}
    {/each}
  </div>
{/if}

See it in action