Hamro Nepali Patro (हाम्रो नेपाली पात्रो)

A modern React component library for Nepali (Bikram Sambat, BS) and Gregorian (AD) calendar date picking, conversion, and utilities. Includes a customizable datepicker, BS/AD conversion, and Nepali date functions.

Features

- 🗓️ Dual Calendar Support: Both Bikram Sambat (BS) and Gregorian (AD) calendars
- 🎨 Highly Customizable: Extensive theming and styling options
- 🔄 Date Conversion: Convert between BS and AD dates
- 📱 Responsive Design: Works on all device sizes
- 🌐 Framework Agnostic: Support for React and jQuery
- 🎯 TypeScript Support: Full TypeScript definitions
- 📦 Multiple Builds: ESM, CJS, and UMD plugin formats

Installation

``bash
npm install hamro-nepali-patro


or


yarn add hamro-nepali-patro
`

Usage

$3

`tsx
import { DatePicker } from 'hamro-nepali-patro';
import 'hamro-nepali-patro/dist/styles.css';

function App() {
const [selectedDate, setSelectedDate] = useState('');

return (
value={selectedDate}
onChange={setSelectedDate}
calendarType="BS"
dateFormat="yyyy-mm-dd"
placeholder="Select BS Date"
/>
);
}
`


$3

`javascript
const { ad2bs, bs2ad, getTotalDaysInBsMonth } = require('hamro-nepali-patro');

// Convert AD to BS
const bsDate = ad2bs(2024, 1, 15);
console.log(bsDate); // { year: 2080, month: 10, date: 2, day: 1 }

// Convert BS to AD
const adDate = bs2ad(2081, 1, 15);
console.log(adDate); // { year: 2024, month: 4, date: 28, day: 0 }

// Get total days in BS month
const totalDays = getTotalDaysInBsMonth(2081, 1);
console.log(totalDays); // 30
`

Configuration Options

$3

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| value | string | '' | Initial date value |
| dateFormat | string | 'yyyy-mm-dd' | Date format (yyyy-mm-dd, dd-mm-yyyy, etc.) |
| calendarType | string | 'BS' | Calendar type ('BS' or 'AD') |
| placeholder | string | '' | Input placeholder text |
| size | string | 'small' | Input size ('small' or 'large') |
| isClearable | boolean | true | Show clear button |
| hideOnSelect | boolean | true | Hide calendar on date selection |
| showMonthDropdown | boolean \| 'full' \| 'short' \| 'min' | false | Show month dropdown |
| showYearDropdown | boolean \| number[] | false | Show year dropdown |
| shouldPressOK | boolean | false | Require OK button press |
| showExtra | boolean | false | Show extra calendar features |

Styling & Customization

$3

#### inputStyle - Custom CSS for Input Field
`javascript
inputStyle: {
// Border and outline
border: '2px solid #4CAF50',
borderRadius: '8px',
outline: 'none',

// Spacing and size
padding: '12px 16px',
width: '250px',
height: '45px',

// Typography
fontSize: '16px',
fontWeight: '500',
color: '#4CAF50',

// Background and effects
backgroundColor: '#f8f9fa',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
transition: 'all 0.3s ease'
}
`

#### inputClassName - Custom CSS Class
`javascript
inputClassName: 'my-custom-input'

// In your CSS:
.my-custom-input {
border: 2px solid #007bff;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}
`

#### placeholderColor - Placeholder Text Color
`javascript
placeholderColor: '#6c757d'
`

$3

#### calendarIconStyle - Calendar Icon Customization
`javascript
calendarIconStyle: {
// Icon appearance
color: '#4CAF50',
fontSize: '20px',

// Size and positioning
width: '24px',
height: '24px',

// Effects
cursor: 'pointer',
transition: 'transform 0.2s ease'
}
`

#### crossIconStyle - Clear Button Styling
`javascript
crossIconStyle: {
// Button appearance
background: '#dc3545',
color: 'white',
borderRadius: '50%',

// Size
width: '20px',
height: '20px',

// Typography
fontSize: '12px',
fontWeight: 'bold',

// Effects
cursor: 'pointer',
transition: 'all 0.2s ease',
boxShadow: '0 2px 4px rgba(220, 53, 69, 0.3)'
}
`

$3

#### calendarStyle - Calendar Dropdown Styling
`javascript
calendarStyle: {
// Container appearance
backgroundColor: 'white',
border: '1px solid #dee2e6',
borderRadius: '8px',

// Shadow and depth
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',

// Spacing
padding: '16px',
marginTop: '8px',

// Size
minWidth: '280px',
maxWidth: '320px'
}
`

#### calendarClassName - Custom Calendar Class
`javascript
calendarClassName: 'my-custom-calendar'

// In your CSS:
.my-custom-calendar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
}
`

$3

#### theme - CSS Custom Properties
The theme prop allows you to override the default CSS custom properties used throughout the component:

`javascript
theme: {
// Primary colors
'cl-primary': '#4CAF50', // Primary color for buttons, highlights
'cl-danger': '#f44336', // Danger color for clear button, errors
'cl-success': '#2196F3', // Success color for confirmations
'cl-warning': '#ff9800', // Warning color for alerts

// Typography
'font-md': '1.2rem', // Medium font size
'font-lg': '1.5rem', // Large font size
'font-sm': '0.875rem', // Small font size

// Spacing
'spacing-sm': '0.5rem', // Small spacing
'spacing-md': '1rem', // Medium spacing
'spacing-lg': '1.5rem', // Large spacing

// Borders
'border-radius': '8px', // Border radius
'border-width': '2px', // Border width

// Shadows
'shadow-sm': '0 2px 4px rgba(0,0,0,0.1)',
'shadow-md': '0 4px 8px rgba(0,0,0,0.15)',
'shadow-lg': '0 8px 16px rgba(0,0,0,0.2)'
}
`




$3

You can also override styles using CSS selectors:

`css
/ Custom input styles /
.rl-nepali-datepicker-input {
border: 2px solid #007bff !important;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

/ Custom calendar icon /
.rl-nepali-datepicker-icon {
color: #007bff !important;
font-size: 20px !important;
}

/ Custom clear button /
.cross-icon {
background: #007bff !important;
border-radius: 50% !important;
}

/ Custom calendar container /
.rl-nepali-datepicker-wrapper {
--cl-primary: #007bff;
--cl-danger: #dc3545;
}
`

$3

#### 1. Material Design Style
`javascript
inputStyle: {
border: 'none',
borderBottom: '2px solid #2196F3',
borderRadius: '0',
padding: '12px 0',
fontSize: '16px',
transition: 'border-bottom 0.3s ease'
},
theme: {
'cl-primary': '#2196F3',
'cl-danger': '#f44336'
}
`

#### 2. Bootstrap Style
`javascript
inputStyle: {
border: '1px solid #ced4da',
borderRadius: '0.375rem',
padding: '0.375rem 0.75rem',
fontSize: '1rem',
backgroundColor: '#fff'
},
theme: {
'cl-primary': '#0d6efd',
'cl-danger': '#dc3545'
}
`

#### 3. Dark Theme
`javascript
inputStyle: {
backgroundColor: '#2d3748',
color: '#e2e8f0',
border: '1px solid #4a5568',
borderRadius: '8px'
},
calendarStyle: {
backgroundColor: '#2d3748',
border: '1px solid #4a5568',
color: '#e2e8f0'
},
theme: {
'cl-primary': '#3182ce',
'cl-danger': '#e53e3e'
}
`

#### 4. Gradient Style
`javascript
inputStyle: {
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
color: 'white',
border: 'none',
borderRadius: '25px',
padding: '15px 25px'
},
theme: {
'cl-primary': '#667eea',
'cl-danger': '#764ba2'
}
`

$3

1. Use CSS Variables: Leverage the theme prop for consistent colors and spacing
2. Responsive Design: Use relative units (rem, em) instead of fixed pixels
3. Accessibility: Ensure sufficient color contrast between text and background
4. Performance: Use transform and opacity for animations instead of layout properties
5. Consistency: Maintain consistent spacing and sizing across your application

$3

- Styles not applying: Check if your CSS has higher specificity or use !important
- Theme not working: Ensure CSS custom properties are supported in your target browsers
- Responsive issues: Test with different screen sizes and use relative units
- Icon alignment: Use display: flex and align-items: center for proper icon positioning




$3

| Event | Parameters | Description |
|-------|------------|-------------|
| onChange | (date, adDate?, bsDate?, dateString?) | Called when date changes |
| onSelect | (date, adDate?, bsDate?, dateString?) | Called when date is selected |

$3

| Option | Type | Description |
|--------|------|-------------|
| inputStyle | object | CSS styles for input field |
| inputClassName | string | CSS class for input field |
| placeholderColor | string | Color for placeholder text |
| calendarIconStyle | object | CSS styles for calendar icon |
| calendarIconClassName | string | CSS class for calendar icon |
| crossIconStyle | object | CSS styles for clear button |
| crossIconClassName | string | CSS class for clear button |
| calendarStyle | object | CSS styles for calendar container |
| calendarClassName | string | CSS class for calendar container |
| theme` | object | CSS custom properties for theming |

Browser Support

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
- Internet Explorer 11+ (with polyfills)

Dependencies

$3

- React 16.8+
- React DOM 16.8+

$3

- jQuery 1.7+
- React 16.8+ (for React-based version)
- React DOM 16.8+ (for React-based version)

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

Support

If you encounter any issues or have questions, please:

1. Check the documentation
2. Search existing issues
3. Create a new issue

Changelog

See CHANGELOG.md for a list of changes and version history.