Nepali Date Picker - Web Components

<script type="module">import '@nepali-date-picker/web-component';</script>

<nepali-date-picker value="2081-05-24" show-english></nepali-date-picker>
<script>
  document.querySelector('nepali-date-picker')
    .addEventListener('change', (e) => console.log(e.detail));
</script>

<!-- a switch the user can flip -->
<nepali-date-picker value="2083-06-01" show-calendar-toggle></nepali-date-picker>

<!-- or open straight on the Gregorian grid -->
<nepali-date-picker value="2083-06-01" calendar-system="ad"></nepali-date-picker>
<script>
  // The payload is Bikram Sambat whichever calendar is on screen.
  picker.addEventListener('change', (e) => console.log(e.detail.bsIso));
</script>

<nepali-date-picker value="2083-04-15" show-adjacent-month-days></nepali-date-picker>

<nepali-calendar
  show-day-summary
  show-month-events
  weekly-off-days="7"
  events='[{"date":"2083-06-10","days":4,"name":"Indra Jatra","kind":"religious",
            "id":"indra-jatra","payload":"{\"imageUrl\":\"…\"}"}]'>
</nepali-calendar>
<script>
  document.querySelector('nepali-calendar')
    .addEventListener('event-select', (e) => {
      // The payload is yours: parse it and render the image with your own <img>.
      console.log(JSON.parse(e.detail.event.payload));
    });
</script>

<nepali-date-picker value="2083-06-02" show-secondary-date></nepali-date-picker>

<button onclick="dlg.show()">Pick a date</button>
<nepali-date-picker-dialog id="dlg" value="2081-05-24"></nepali-date-picker-dialog>
<script>dlg.addEventListener('change', (e) => console.log(e.detail));</script>

<nepali-date-picker-docked label="Appointment date"></nepali-date-picker-docked>

<nepali-date-range-picker start="2081-05-10" end="2081-05-18"></nepali-date-range-picker>
<script>
  document.querySelector('nepali-date-range-picker')
    .addEventListener('change', (e) => console.log(e.detail.startBsIso, e.detail.endBsIso));
</script>

<nepali-date-field label="Date of birth"></nepali-date-field>
<script>
  field.addEventListener('change', (e) => console.log('valid', e.detail.bsIso));
  field.addEventListener('invalid', (e) => console.log('invalid', e.detail.message));
</script>

<nepali-date-range-field></nepali-date-range-field>

<nepali-wheel-date-picker value="2081-05-24"></nepali-wheel-date-picker>

<nepali-date-picker
  weekly-off-days="7"
  events='[
    {"date":"2081-05-26","name":"Constitution Day","kind":"governmentPublic"},
    {"date":"2081-05-28","name":"Standup","indicate":true,"color":"#42a5f5"}
  ]'>
</nepali-date-picker>

<nepali-date-picker
  events='[
    {"date":"2081-06-17","endDate":"2081-06-26","name":"Dashain","kind":"religious"},
    {"date":"2081-07-02","days":5,"name":"Tihar","kind":"religious"}
  ]'>
</nepali-date-picker>

nepali-date-picker.brand-marks {
  --ndp-weekly-off: #8e24aa;
  --ndp-holiday-public: #d32f2f;
  --ndp-holiday-religious: #1e88e5;
  --ndp-holiday-regional: #00897b;
  --ndp-holiday-observance: #6d4c41;
  --ndp-holiday-container: rgba(211, 47, 47, 0.12);
}

import {
  createDetailedEvent, expandEventDays, createCalendarPolicy,
} from '@nepali-date-picker/core';

const dashain = createDetailedEvent(2081, 6, 17, 'Dashain', 'religious', true, 'dashain', null);
const office = createCalendarPolicy([7], expandEventDays(dashain, 10));

office.statusOf(2081, 6, 18).isNonWorking;          // true
office.monthStatus(2081, 6).filter((d) => d.isNonWorking).length;
office.workingDaysBetween(2081, 6, 1, 2081, 6, 22); // end exclusive
office.nextWorkingDay(2081, 6, 17);                 // steps over the whole span

<nepali-date-field label="Delivery date" min="2081-05-01" max="2081-07-30"></nepali-date-field>
<script>
  field.addEventListener('change', (e) => console.log('valid', e.detail.bsIso));
  field.addEventListener('invalid', (e) => console.log('rejected', e.detail.message));
</script>

<nepali-date-range-field start-label="Leave from" end-label="Leave until"></nepali-date-range-field>
<nepali-date-picker-dialog heading="When should we deliver?"></nepali-date-picker-dialog>
<nepali-date-field label="जन्म मिति" language="ne"></nepali-date-field>

.themed-picker {
  --ndp-font: 'Iowan Old Style', Georgia, serif;
  --ndp-bg: #12262a;
  --ndp-text: #e7f5f4;
  --ndp-muted: #7fa8a6;
  --ndp-accent: #ffb703;
  --ndp-on-accent: #12262a;
  --ndp-hover: rgba(255, 183, 3, 0.16);
  --ndp-in-range: rgba(255, 183, 3, 0.2);
  --ndp-today-ring: #ffb703;
  --ndp-border: #21454a;
  --ndp-error: #ff8fa3;
  --ndp-radius: 20px;
}

import {
  convertAdToBs, convertBsToAd, getTodayBs, getTodayAd, getCurrentTime,
  getBsMonth, getAdMonth, getTotalDaysInBsMonth, getBsDaysBetween, compareBsDates,
  getBsCalendarsInAdMonth, getAdCalendarsInBsMonth, isAdDateConvertible,
  formatBsDate, formatBsDateByPattern, formatAdDateByPattern,
  formatTimeEnglish, formatTimeNepali, bsDateTimeToIso, bsDateTimeFromIso,
  localizeDigits, toLatinDigits, getBsYearRange, getAdYearRangeForBsYears,
} from '@nepali-date-picker/core';

convertAdToBs(2024, 9, 9);              // { year: 2081, month: 5, dayOfMonth: 24, ... }
getBsMonth(2081, 5).totalDaysInMonth;   // 31
formatBsDateByPattern('EEEE, dd MMMM yyyy', 2081, 5, 24, 'en');
bsDateTimeFromIso(bsDateTimeToIso(2081, 5, 24, 9, 30, 0, 0));