Package Exports

hamro-nepali-patro
hamro-nepali-patro/dist/index.esm.js
hamro-nepali-patro/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hamro-nepali-patro) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

npm install hamro-nepali-patro
# or
yarn add hamro-nepali-patro

Usage

React Usage

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

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

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

Node.js Usage

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

Common Options

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

Input Field Styling

`inputStyle` - Custom CSS for Input Field

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

inputClassName: 'my-custom-input'

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

`placeholderColor` - Placeholder Text Color

placeholderColor: '#6c757d'

Icon Styling

`calendarIconStyle` - Calendar Icon Customization

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

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)'
}

Calendar Container Styling

`calendarStyle` - Calendar Dropdown Styling

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

calendarClassName: 'my-custom-calendar'

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

Theme System

`theme` - CSS Custom Properties

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

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)'
}

CSS Customization

You can also override styles using CSS selectors:

/* 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;
}

Common Styling Patterns

1. Material Design Style

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

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

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

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'
}

Best Practices

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

Troubleshooting Styling Issues

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

Event Handlers

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

Styling Options

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

React Version

React 16.8+
React DOM 16.8+

jQuery Version

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:

Check the documentation
Search existing issues
Create a new issue

Changelog

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