Nepali Bikram Sambat Datepicker — @itzsa/nepali-datepicker

@import "tailwindcss";
@source "../node_modules/@itzsa/nepali-datepicker";
@import "@itzsa/nepali-datepicker/styles.css";

:root {
  --itzsa-nepali-font: "Noto Sans Devanagari", sans-serif;
}

import { useState } from "react";
import {
  EditableNepaliDatePicker,
  NepaliDatePicker,
  NepaliDateTimePicker,
  NepaliDateRangePicker,
  isCompleteBsDate,
} from "@itzsa/nepali-datepicker";
import "@itzsa/nepali-datepicker/styles.css";

export function DateFields() {
  const [date, setDate] = useState("");
  const [typed, setTyped] = useState("");
  const [dateTime, setDateTime] = useState("");
  const [range, setRange] = useState<{ from?: string; to?: string }>({});

  return (
    <>
      <NepaliDatePicker value={date} onChange={setDate} locale="ne" />
      <EditableNepaliDatePicker value={typed} onChange={setTyped} />
      <NepaliDateTimePicker
        value={dateTime}
        onChange={setDateTime}
        minDateTime="2080-01-01 00:00"
        maxDateTime="2090-12-30 23:59"
      />
      <NepaliDateRangePicker value={range} onChange={setRange} />
    </>
  );
}

import {
  isCompleteBsDate,
  parseDateString,
  validateBsDate,
  assertValidBsDate,
} from "@itzsa/nepali-datepicker";

// Soft (forms)
const result = validateBsDate(2082, 1, 32);
// → { ok: false, code: "invalid_date", message: "…" }

if (!isCompleteBsDate(value)) {
  // still typing or bad calendar day
}

// Hard (throw)
assertValidBsDate(2082, 4, 15);

const parts = parseDateString("2082-04-15"); // null if invalid

.itzsa-ndp {
  --ndp-accent: #1d9e75;
  --ndp-border: #e4e2db;
  --ndp-radius: 10px;
  --itzsa-nepali-font: "Noto Sans Devanagari", sans-serif;
}