@manojshrestha/nepali-date
Version:
Lightweight TypeScript library for Nepali date conversion and date-picking
260 lines (198 loc) • 8.77 kB
Markdown
# Nepali Date
A lightweight, open-source TypeScript library for Nepali date (BS ↔ AD) conversion and date-picking across all platforms (web, mobile, desktop, CLI).
## Features
### Core Date Converter
- Zero dependencies
- Accurate BS ↔ AD conversion with:
- Leap year support (both calendars)
- Custom epoch (1970 BS)
- Validation (isValidBsDate(), isLeapYear())
- Formatting (format(date, "YYYY-MM-DD"))
- Internationalization (auto-detect Nepali/English from navigator.language)
### Cross-Platform Date Picker
- Framework Support:
- React (primary)
- Vue/Svelte wrappers (coming soon)
- React Native (coming soon)
- UI Features:
- Tailwind-compatible, themable CSS
- Toggle between BS/AD, min/max dates, disabled days (weekends/holidays)
- Outputs both BS/AD dates simultaneously
## Installation
```bash
# Using npm
npm install @manojshrestha/nepali-date
# Using yarn
yarn add @manojshrestha/nepali-date
# Using pnpm
pnpm add @manojshrestha/nepali-date
```
## Usage
### Basic Date Conversion
```typescript
import { bsToAd, adToBs, formatBsDate, formatAdDate } from "@manojshrestha/nepali-date";
// BS to AD conversion
const bsDate = { year: 2080, month: 1, day: 1 };
const adDate = bsToAd(bsDate);
console.log(adDate); // { year: 2023, month: 4, day: 14 }
// AD to BS conversion
const adDate2 = { year: 2023, month: 4, day: 14 };
const bsDate2 = adToBs(adDate2);
console.log(bsDate2); // { year: 2080, month: 1, day: 1 }
// Formatting
console.log(formatBsDate(bsDate, "YYYY-MM-DD")); // '2080-01-01'
console.log(formatBsDate(bsDate, "MMMM DD, YYYY", "ne")); // 'बैशाख ०१, २०८०'
console.log(formatAdDate(adDate, "MMMM DD, YYYY")); // 'April 14, 2023'
```
### Date Validation
```typescript
import { isValidBsDate, isLeapYear, getDaysInBsMonth } from "@manojshrestha/nepali-date";
// Check if a BS date is valid
console.log(isValidBsDate({ year: 2080, month: 1, day: 1 })); // true
console.log(isValidBsDate({ year: 2080, month: 1, day: 32 })); // false
// Check if an AD year is a leap year
console.log(isLeapYear(2024)); // true
console.log(isLeapYear(2023)); // false
// Get days in BS month
console.log(getDaysInBsMonth(2080, 1)); // 31
console.log(getDaysInBsMonth(2080, 3)); // 32
```
### React Date Picker
```tsx
import React, { useState } from "react";
import { NepaliDatePicker, DateConversion } from "@manojshrestha/nepali-date";
// Import the CSS (or use your own custom styles)
import "@manojshrestha/nepali-date/dist/DatePicker.css";
function App() {
const [selectedDate, setSelectedDate] = useState<DateConversion | null>(null);
const handleDateChange = (dates: DateConversion) => {
setSelectedDate(dates);
console.log("BS Date:", dates.bs);
console.log("AD Date:", dates.ad);
};
return (
<div className="App">
<h1>Nepali Date Picker</h1>
<NepaliDatePicker
onChange={handleDateChange}
defaultCalendar="BS"
locale="en"
theme="light"
disabledDays={[0, 6]} // Disable weekends (Sunday, Saturday)
minDate={{ year: 2075, month: 1, day: 1 }}
maxDate={{ year: 2085, month: 12, day: 30 }}
/>
{selectedDate && (
<div>
<h2>Selected Date:</h2>
<p>
BS: {selectedDate.bs.year}-{selectedDate.bs.month}-
{selectedDate.bs.day}
</p>
<p>
AD: {selectedDate.ad.year}-{selectedDate.ad.month}-
{selectedDate.ad.day}
</p>
</div>## Framework Integration Examples
### Using with Next.js
```tsx
// components/DatePickerWrapper.tsx
'use client';
import { NepaliDatePicker, DateConversion } from "@manojshrestha/nepali-date";
import "@manojshrestha/nepali-date/dist/DatePicker.css";
export default function DatePickerWrapper({ onChange }) {
return (
<NepaliDatePicker
onChange={onChange}
defaultCalendar="BS"
/>
);
}
```
### Using with Laravel + Inertia.js
```tsx
// resources/js/Components/NepaliDateInput.tsx
import { NepaliDatePicker, DateConversion } from "@manojshrestha/nepali-date";
import "@manojshrestha/nepali-date/dist/DatePicker.css";
export default function NepaliDateInput({ name, value, onChange }) {
const handleDateChange = (dates: DateConversion) => {
// Format as YYYY-MM-DD for form submission
const formattedDate = `${dates.bs.year}-${String(dates.bs.month).padStart(2, '0')}-${String(dates.bs.day).padStart(2, '0')}`;
onChange(name, formattedDate);
};
return (
<NepaliDatePicker
onChange={handleDateChange}
defaultCalendar="BS"
locale="ne"
/>
);
}
```
## API Reference
### Core Functions
| Function | Description |
| -------------------------------------- | ---------------------------------------- |
| `bsToAd(bsDate)` | Convert BS date to AD date |
| `adToBs(adDate)` | Convert AD date to BS date |
| `convertDate(date, calendar)` | Convert between BS and AD (returns both) |
| `isValidBsDate(bsDate)` | Check if a BS date is valid |
| `isLeapYear(year)` | Check if an AD year is a leap year |
| `getDaysInBsMonth(year, month)` | Get days in a BS month |
| `formatBsDate(date, format?, locale?)` | Format a BS date |
| `formatAdDate(date, format?, locale?)` | Format an AD date |
| `detectLocale()` | Auto-detect locale from browser |
### Date Picker Props
| Prop | Type | Default | Description |
| ----------------- | --------------------------------- | ----------- | --------------------------- |
| `value` | `BsDate \| AdDate` | - | Initial date value |
| `defaultCalendar` | `'BS' \| 'AD'` | `'BS'` | Default calendar view |
| `minDate` | `BsDate \| AdDate` | - | Minimum selectable date |
| `maxDate` | `BsDate \| AdDate` | - | Maximum selectable date |
| `disabledDays` | `number[]` | `[]` | Disabled days of week (0-6) |
| `holidays` | `Array<BsDate \| AdDate>` | `[]` | Disabled holiday dates |
| `locale` | `'en' \| 'ne'` | Auto-detect | Display language |
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
| `onChange` | `(dates: DateConversion) => void` | - | Change event handler |
| `className` | `string` | `''` | Additional CSS classes |
## Tree-Shaking
This library supports tree-shaking, meaning you can import only what you need:
```typescript
// Just the conversion utilities
import { bsToAd, adToBs } from "@manojshrestha/nepali-date";
// Just the DatePicker component
import { NepaliDatePicker } from "@manojshrestha/nepali-date";
import "@manojshrestha/nepali-date/dist/DatePicker.css";
```
## Building from Source
```bash
# Clone the repository
git clone https://github.com/manojshrestha/nepali-date.git
cd nepali-date
# Install dependencies
npm install
# Build the library
npm run build
# Run tests
npm test
```
## Browser Support
- Chrome, Firefox, Safari, Edge: latest 2 versions
- IE: 11+
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgements
Thanks to contributors and the community for their support in creating an accurate date conversion library for Nepali dates.