React Bengali Date 🗓️

A comprehensive React component and utility library for Bengali date handling with numeral conversion and flexible date formatting.

বাংলা তারিখ পরিচালনার জন্য একটি সম্পূর্ণ React কম্পোনেন্ট এবং ইউটিলিটি লাইব্রেরি।

Features | বৈশিষ্ট্য

• ✅ Bengali Numeral Conversion - Convert between English (0-9) and Bengali (০-৯) numerals
• ✅ Flexible Date Input - Support for multiple date formats (DD/MM/YYYY, DD-MM-YYYY, DDMMYYYY)
• ✅ Date Validation - Comprehensive validation for Bengali date formats
• ✅ React Component - Ready-to-use Bengali date input component
• ✅ React Hooks - Custom hooks for Bengali date management
• ✅ TypeScript Ready - Full TypeScript support (coming soon)
• ✅ Lightweight - No external dependencies except React
• ✅ Customizable - Multiple themes, sizes, and styling options

বাংলা:

• ✅ বাংলা সংখ্যা রূপান্তর - ইংরেজি (০-৯) এবং বাংলা (০-৯) সংখ্যার মধ্যে রূপান্তর
• ✅ নমনীয় তারিখ ইনপুট - একাধিক তারিখ ফরম্যাট সমর্থন
• ✅ তারিখ যাচাইকরণ - বাংলা তারিখ ফরম্যাটের জন্য সম্পূর্ণ যাচাইকরণ
• ✅ React কম্পোনেন্ট - ব্যবহারের জন্য প্রস্তুত বাংলা তারিখ ইনপুট কম্পোনেন্ট

Installation | ইনস্টলেশন

npm install react-bengali-date

yarn add react-bengali-date

Quick Start | দ্রুত শুরু

Basic Usage

import React, { useState } from 'react';
import BengaliDateInput from 'react-bengali-date';

function App() {
  const [date, setDate] = useState('');

  return (
    <div>
      <BengaliDateInput
        value={date}
        onChange={setDate}
        placeholder="দিন/মাস/বছর"
      />
      <p>Selected Date: {date}</p>
    </div>
  );
}

Using Utility Functions

import { 
  toBengaliNumerals, 
  formatDateToBengali, 
  isValidBengaliDate 
} from 'react-bengali-date';

// Convert English numerals to Bengali
const bengaliNumber = toBengaliNumerals('2024'); // '২০২৪'

// Format current date to Bengali
const today = formatDateToBengali(new Date()); // '০৭/০৭/২০২৫'

// Validate Bengali date
const isValid = isValidBengaliDate('০৭/০৭/২০২৫'); // true

Using the Custom Hook

import React from 'react';
import { useBengaliDate, BengaliDateInput } from 'react-bengali-date';

function DateForm() {
  const { 
    bengaliDate, 
    isoDate, 
    isValid, 
    updateBengaliDate 
  } = useBengaliDate();

  return (
    <div>
      <BengaliDateInput
        value={bengaliDate}
        onChange={updateBengaliDate}
      />
      <p>Bengali Date: {bengaliDate}</p>
      <p>ISO Date: {isoDate}</p>
      <p>Valid: {isValid ? 'Yes' : 'No'}</p>
    </div>
  );
}

API Reference | API রেফারেন্স

BengaliDateInput Component

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | string | '' | Current date value in Bengali format | | onChange | function | - | Callback when date changes | | onValidDate | function | - | Callback when a valid date is entered (receives ISO date) | | placeholder | string | 'দিন/মাস/বছর' | Input placeholder text | | required | boolean | false | Whether the input is required | | disabled | boolean | false | Whether the input is disabled | | size | string | 'medium' | Size variant: 'small', 'medium', 'large' | | variant | string | 'default' | Style variant: 'default', 'error', 'success' | | theme | string | 'light' | Theme: 'light', 'dark' | | autoConvertToBengali | boolean | true | Auto-convert English numerals to Bengali | | showValidationIcon | boolean | false | Show validation icon |

Example with All Props

<BengaliDateInput
  value={date}
  onChange={setDate}
  onValidDate={(isoDate) => console.log('Valid date:', isoDate)}
  placeholder="তারিখ লিখুন"
  required
  size="large"
  variant="success"
  theme="dark"
  autoConvertToBengali={true}
  showValidationIcon={true}
  className="my-custom-class"
/>

Utility Functions

toBengaliNumerals(input)

Convert English numerals to Bengali numerals.

toBengaliNumerals('123') // '১২৩'
toBengaliNumerals('2024-07-07') // '২০২৪-০৭-০৭'

toEnglishNumerals(input)

Convert Bengali numerals to English numerals.

toEnglishNumerals('১২৩') // '123'
toEnglishNumerals('০৭/০৭/২০২৫') // '07/07/2025'

formatDateToBengali(date)

Format any date to Bengali DD/MM/YYYY format.

formatDateToBengali(new Date()) // '০৭/০৭/২০২৫'
formatDateToBengali('2025-07-07') // '০৭/০৭/২০২৫'
formatDateToBengali('07/07/2025') // '০৭/০৭/২০২৫'

bengaliDateToISO(bengaliDate)

Convert Bengali date to ISO format (YYYY-MM-DD).

bengaliDateToISO('০৭/০৭/২০২৫') // '2025-07-07'

isValidBengaliDate(bengaliDate)

Validate Bengali date format and actual date validity.

isValidBengaliDate('০৭/০৭/২০২৫') // true
isValidBengaliDate('৩২/১৩/২০২৫') // false (invalid date)
isValidBengaliDate('07/07/2025') // false (not Bengali numerals)

getCurrentBengaliDate()

Get current date in Bengali format.

getCurrentBengaliDate() // '০৭/০৭/২০২৫'

parseFlexibleDate(input)

Parse various date formats and return ISO date.

parseFlexibleDate('০৭০৭২০২৫') // '2025-07-07'
parseFlexibleDate('০৭-০৭-২০২৫') // '2025-07-07'
parseFlexibleDate('৭/৭/২৫') // '2025-07-07'

compareBengaliDates(date1, date2)

Compare two Bengali dates.

compareBengaliDates('০৭/০৭/২০২৫', '০৮/০৭/২০২৫') // -1 (date1 < date2)
compareBengaliDates('০৭/০৭/২০২৫', '০৭/০৭/২০২৫') // 0 (equal)
compareBengaliDates('০৮/০৭/২০২৫', '০৭/০৭/২০২৫') // 1 (date1 > date2)

filterByBengaliDateRange(data, dateField, startDate, endDate)

Filter array of objects by Bengali date range.

const data = [
  { name: 'Item 1', date: '২০২৫-০৭-০৫' },
  { name: 'Item 2', date: '২০২৫-০৭-১০' },
  { name: 'Item 3', date: '২০২৫-০৭-১৫' }
];

filterByBengaliDateRange(
  data, 
  'date', 
  '০৫/০৭/২০২৫', // start date
  '১০/০৭/২০২৫'  // end date
); // Returns items 1 and 2

Custom Hooks

useBengaliDate(initialValue)

Custom hook for Bengali date management.

const {
  bengaliDate,    // Current Bengali date string
  isoDate,        // Current ISO date string
  isValid,        // Boolean indicating if current date is valid
  updateBengaliDate, // Function to update Bengali date
  updateFromISO,  // Function to update from ISO date
  reset,          // Function to reset all values
  setBengaliDate, // Direct setter for Bengali date
  setIsoDate      // Direct setter for ISO date
} = useBengaliDate('2025-07-07');

withBengaliDate(Component)

Higher-order component for Bengali date functionality.

const EnhancedComponent = withBengaliDate(MyComponent);

// MyComponent will receive these additional props:
// - bengaliDate
// - isoDate
// - onBengaliDateChange
// - setBengaliDate
// - setIsoDate

Styling | স্টাইলিং

CSS Classes

The component uses these CSS classes that you can customize:

.bengali-date-input-container { /* Container */ }
.bengali-date-input { /* Input field */ }
.bengali-date-input:focus { /* Focused state */ }
.bengali-date-input:disabled { /* Disabled state */ }

/* Size variants */
.bengali-date-input-container.small { }
.bengali-date-input-container.large { }

/* Theme variants */
.bengali-date-input-container.dark { }

/* State variants */
.bengali-date-input-container.error { }
.bengali-date-input-container.success { }

Custom Styling

<BengaliDateInput
  value={date}
  onChange={setDate}
  style={{ 
    width: '300px',
    margin: '10px 0'
  }}
  className="my-custom-date-input"
/>

Advanced Examples | উন্নত উদাহরণ

Form Integration

import React, { useState } from 'react';
import { BengaliDateInput, isValidBengaliDate, bengaliDateToISO } from 'react-bengali-date';

function UserForm() {
  const [formData, setFormData] = useState({
    name: '',
    birthDate: '',
    joinDate: ''
  });
  const [errors, setErrors] = useState({});

  const handleDateChange = (field) => (value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    
    // Clear error when user starts typing
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};

    // Validate dates
    if (!isValidBengaliDate(formData.birthDate)) {
      newErrors.birthDate = 'অবৈধ জন্ম তারিখ';
    }
    if (!isValidBengaliDate(formData.joinDate)) {
      newErrors.joinDate = 'অবৈধ যোগদানের তারিখ';
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Convert to ISO for API
    const submitData = {
      ...formData,
      birthDate: bengaliDateToISO(formData.birthDate),
      joinDate: bengaliDateToISO(formData.joinDate)
    };

    console.log('Submitting:', submitData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>নাম:</label>
        <input
          type="text"
          value={formData.name}
          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
        />
      </div>

      <div>
        <label>জন্ম তারিখ:</label>
        <BengaliDateInput
          value={formData.birthDate}
          onChange={handleDateChange('birthDate')}
          variant={errors.birthDate ? 'error' : 'default'}
          placeholder="দিন/মাস/বছর"
        />
        {errors.birthDate && <span className="error">{errors.birthDate}</span>}
      </div>

      <div>
        <label>যোগদানের তারিখ:</label>
        <BengaliDateInput
          value={formData.joinDate}
          onChange={handleDateChange('joinDate')}
          variant={errors.joinDate ? 'error' : 'default'}
          placeholder="দিন/মাস/বছর"
        />
        {errors.joinDate && <span className="error">{errors.joinDate}</span>}
      </div>

      <button type="submit">জমা দিন</button>
    </form>
  );
}

Date Range Picker

import React, { useState } from 'react';
import { BengaliDateInput, compareBengaliDates } from 'react-bengali-date';

function DateRangePicker({ onRangeChange }) {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');
  const [error, setError] = useState('');

  const handleStartDateChange = (value) => {
    setStartDate(value);
    validateRange(value, endDate);
  };

  const handleEndDateChange = (value) => {
    setEndDate(value);
    validateRange(startDate, value);
  };

  const validateRange = (start, end) => {
    if (start && end && compareBengaliDates(start, end) > 0) {
      setError('শুরুর তারিখ শেষের তারিখের চেয়ে বড় হতে পারে না');
    } else {
      setError('');
      if (onRangeChange) {
        onRangeChange({ startDate: start, endDate: end });
      }
    }
  };

  return (
    <div className="date-range-picker">
      <div>
        <label>শুরুর তারিখ:</label>
        <BengaliDateInput
          value={startDate}
          onChange={handleStartDateChange}
          placeholder="দিন/মাস/বছর"
        />
      </div>
      
      <div>
        <label>শেষের তারিখ:</label>
        <BengaliDateInput
          value={endDate}
          onChange={handleEndDateChange}
          placeholder="দিন/মাস/বছর"
        />
      </div>
      
      {error && <div className="error">{error}</div>}
    </div>
  );
}

Browser Support | ব্রাউজার সাপোর্ট

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing | অবদান

Contributions are welcome! Please feel free to submit a Pull Request.

অবদান স্বাগত! অনুগ্রহ করে একটি Pull Request জমা দিতে দ্বিধা করবেন না।

License | লাইসেন্স

MIT License - see the LICENSE file for details.

Changelog | পরিবর্তনের তালিকা

v1.0.0

• Initial release
• Bengali numeral conversion
• Date validation and formatting
• React component with multiple variants
• Custom hooks for date management
• TypeScript definitions (coming soon)

Support | সাহায্য

If you find this package helpful, please consider giving it a star ⭐ on GitHub!

যদি এই প্যাকেজটি সহায়ক মনে হয়, অনুগ্রহ করে GitHub এ একটি তারকা ⭐ দিন!

For issues and feature requests, please use the GitHub Issues page.

Made with ❤️ for the Bengali community | বাংলা কমিউনিটির জন্য ❤️ দিয়ে তৈরি