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

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

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:

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.