Name	Name	Last commit message	Last commit date
Latest commit History 523 Commits
.github	.github
.vscode	.vscode
demo	demo
scripts	scripts
src	src
. eslintignore	. eslintignore
.babelrc	.babelrc
.eslintrc.js	.eslintrc.js
.gitattributes	.gitattributes
.gitignore	.gitignore
.nojekyll	.nojekyll
.npmignore	.npmignore
.prettierrc	.prettierrc
CHANGELOG.md	CHANGELOG.md
CONTRIBUTING.md	CONTRIBUTING.md
IMPROVEMENTS.md	IMPROVEMENTS.md
LICENSE	LICENSE
PUBLISH_GUIDE.md	PUBLISH_GUIDE.md
README-demo.md	README-demo.md
README.md	README.md
demo-interactive.html	demo-interactive.html
demo-persian.html	demo-persian.html
demo-simple.html	demo-simple.html
index.html	index.html
jest.config.js	jest.config.js
netlify-demo.html	netlify-demo.html
package-lock.json	package-lock.json
package.json	package.json
postcss.config.js	postcss.config.js
setupTests.js	setupTests.js
styleguide.config.js	styleguide.config.js
webpack.config.js	webpack.config.js
yarn.lock	yarn.lock

🗓️ AustroByte Date Picker

A modern, feature-rich React component library for date and time selection. Built with TypeScript, powered by date-fns, and designed for excellent user experience.

✨ Features

🗓️ Multiple Date Pickers: Single date, date range, and date-time pickers
🎨 Highly Customizable: Extensive theming and styling options
♿ Accessibility First: Full ARIA support and keyboard navigation
📱 Mobile Responsive: Works seamlessly on all devices
🚀 Performance Optimized: Built with React hooks and memoization
🎯 TypeScript Ready: Full TypeScript support
🕐 Time Selection: 12-hour and 24-hour format support
🎪 Drag & Drop: Intuitive date range selection
🌍 Internationalization: Multi-language support via date-fns locales

📦 Installation

npm install austro-byte-datepicker

Peer Dependencies

This package requires React and date-fns as peer dependencies:

npm install react date-fns

🚀 Quick Start

1. Import Styles

import 'austro-byte-datepicker/dist/styles.css';
import 'austro-byte-datepicker/dist/theme/default.css';

2. Basic Usage

import React, { useState } from 'react';
import { Calendar, DateRangePicker, DateTimePicker, PersianDateRangePicker } from 'austro-byte-datepicker';

function App() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
  });
  const [selectedDateTime, setSelectedDateTime] = useState(new Date());

  return (
    <div>
      {/* Single Date Picker */}
      <Calendar
        date={selectedDate}
        onChange={setSelectedDate}
      />

      {/* Date Range Picker */}
      <DateRangePicker
        ranges={[dateRange]}
        onChange={setDateRange}
      />

      {/* DateTime Picker */}
      <DateTimePicker
        date={selectedDateTime}
        onChange={setSelectedDateTime}
      />

      {/* Persian Calendar Date Range Picker */}
      <PersianDateRangePicker
        ranges={[dateRange]}
        onChange={setDateRange}
        showPersianDates={true}
        persianDateFormat="long"
      />
    </div>
  );
}

🌍 Persian Calendar Support

The library now includes full support for Persian (Shamsi) calendar with the PersianDateRangePicker component. This component provides:

Persian Date Display: Shows dates in Persian format (e.g., "۱ اسفند ۱۴۰۴")
Automatic Conversion: Converts between Gregorian and Persian calendars
RTL Support: Right-to-left text direction for Persian language
Persian Locale: Uses Persian calendar locale from date-fns
Customizable Format: Choose between short, long, and numeric date formats

Persian Calendar Usage

import React, { useState } from 'react';
import { PersianDateRangePicker } from 'austro-byte-datepicker';

function PersianCalendarExample() {
  const [ranges, setRanges] = useState([
    {
      startDate: new Date(),
      endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
      key: 'selection',
      label: 'هفته آینده'
    }
  ]);

  return (
    <PersianDateRangePicker
      ranges={ranges}
      onChange={setRanges}
      showPersianDates={true}
      persianDateFormat="long"
      locale="fa-IR"
    />
  );
}

Persian Calendar Props

Prop	Type	Default	Description
`showPersianDates`	boolean	`true`	Whether to show Persian date displays
`persianDateFormat`	string	`'long'`	Persian date format: 'short', 'long', or 'numeric'
`locale`	object	Persian locale	Locale configuration (defaults to Persian)

Persian Calendar Utilities

The library also exports Persian calendar utility functions:

import { 
  gregorianToPersian, 
  persianToGregorian, 
  formatPersianDate,
  getCurrentPersianDate 
} from 'austro-byte-datepicker';

// Convert Gregorian date to Persian
const persianDate = gregorianToPersian(new Date());

// Format Persian date
const formattedDate = formatPersianDate(persianDate, 'long'); // "۱ اسفند ۱۴۰۴"

// Get current Persian date
const today = getCurrentPersianDate();

🎨 Custom Input Support

All picker components now support custom input elements, allowing you to completely customize the appearance and behavior of the input field.

Using Custom Inputs

import React from 'react';
import { DateRangePicker } from 'austro-byte-datepicker';

function App() {
  // Define your custom input element
  const customInput = (
    <div
      style={{
        padding: '16px 20px',
        border: '2px solid #e74c3c',
        borderRadius: '8px',
        backgroundColor: '#fdf2f2',
        color: '#c0392b',
        fontSize: '16px',
        fontWeight: '600',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <span>📅 Select Date Range</span>
      <span>🗓️</span>
    </div>
  );

  return (
    <DateRangePicker
      ranges={[dateRange]}
      onChange={setDateRange}
      inputRanges={[]}
      staticRanges={[]}
      showSelectionPreview={true}
      moveRangeOnFirstSelection={false}
      months={2}
      direction="horizontal"
      customInput={customInput}
    />
  );
}

📅 Component Examples

Calendar Component

import { Calendar } from 'austro-byte-datepicker';

function CalendarExample() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Calendar
      date={selectedDate}
      onChange={setSelectedDate}
      minDate={new Date(2020, 0, 1)}
      maxDate={new Date(2030, 11, 31)}
      disabledDates={[new Date(2024, 11, 25)]}
      showMonthDropdown={true}
      showYearDropdown={true}
      dropdownMode="select"
    />
  );
}

DateRangePicker Component

import { DateRangePicker } from 'austro-byte-datepicker';

function DateRangeExample() {
  const [dateRange, setDateRange] = useState({
    startDate: new Date(),
    endDate: new Date(),
  });

  return (
    <DateRangePicker
      ranges={[dateRange]}
      onChange={setDateRange}
      months={2}
      direction="horizontal"
      showSelectionPreview={true}
      moveRangeOnFirstSelection={false}
      rangeColors={['#3d91ff', '#e74c3c', '#28a745']}
      showDateDisplay={true}
      showMonthAndYearPickers={true}
    />
  );
}

DateTimePicker Component

import { DateTimePicker } from 'austro-byte-datepicker';

function DateTimeExample() {
  const [selectedDateTime, setSelectedDateTime] = useState(new Date());

  return (
    <DateTimePicker
      date={selectedDateTime}
      onChange={setSelectedDateTime}
      showTimeSelect={true}
      timeFormat="HH:mm"
      timeIntervals={15}
      timeCaption="Time"
      dateFormat="MMMM d, yyyy h:mm aa"
      showTimeSelectOnly={false}
      timeClassName={() => 'custom-time-class'}
    />
  );
}

🎨 Theming and Customization

Custom CSS Variables

:root {
  --date-picker-primary-color: #3d91ff;
  --date-picker-secondary-color: #2c5aa0;
  --date-picker-border-radius: 8px;
  --date-picker-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  --date-picker-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Custom Theme

import 'austro-byte-datepicker/dist/theme/custom.css';

// Or create your own theme file
const customTheme = `
  .rdrCalendarWrapper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  .rdrDayToday {
    background: #3d91ff !important;
    color: white !important;
  }
`;

🌍 Internationalization

import { format } from 'date-fns';
import { enUS, faIR, deDE } from 'date-fns/locale';

// English (default)
<Calendar locale={enUS} />

// Persian
<Calendar locale={faIR} />

// German
<Calendar locale={deDE} />

♿ Accessibility

All components are built with accessibility in mind:

ARIA Labels: Proper ARIA attributes for screen readers
Keyboard Navigation: Full keyboard support
Focus Management: Proper focus handling
Screen Reader Support: Compatible with all major screen readers

<Calendar
  ariaLabel="Select a date"
  ariaLabelledBy="date-picker-label"
  ariaDescribedBy="date-picker-description"
/>

📱 Mobile Support

The components are fully responsive and optimized for mobile devices:

Touch Friendly: Large touch targets
Swipe Gestures: Intuitive swipe navigation
Responsive Design: Adapts to all screen sizes
Mobile Optimized: Performance optimized for mobile

🚀 Performance

React Hooks: Built with modern React patterns
Memoization: Optimized re-renders
Lazy Loading: Components load only when needed
Bundle Size: Optimized for minimal bundle impact

🔧 API Reference

Calendar Props

Prop	Type	Default	Description
`date`	`Date`	`new Date()`	Selected date
`onChange`	`function`	-	Date change handler
`minDate`	`Date`	-	Minimum selectable date
`maxDate`	`Date`	-	Maximum selectable date
`disabledDates`	`Date[]`	`[]`	Dates to disable
`showMonthDropdown`	`boolean`	`false`	Show month dropdown
`showYearDropdown`	`boolean`	`false`	Show year dropdown

DateRangePicker Props

Prop	Type	Default	Description
`ranges`	`array`	`[]`	Array of date ranges
`onChange`	`function`	-	Range change handler
`months`	`number`	`1`	Number of months to show
`direction`	`string`	`'horizontal'`	Layout direction
`showSelectionPreview`	`boolean`	`true`	Show selection preview
`moveRangeOnFirstSelection`	`boolean`	`false`	Move range on first selection

DateTimePicker Props

Prop	Type	Default	Description
`date`	`Date`	`new Date()`	Selected date and time
`onChange`	`function`	-	DateTime change handler
`showTimeSelect`	`boolean`	`false`	Show time selection
`timeFormat`	`string`	`'HH:mm'`	Time format
`timeIntervals`	`number`	`15`	Time interval in minutes

🛠️ Development

Building from Source

# Clone the repository
git clone https://github.com/mostafahosseinidb/ReactDatePicker.git
cd ReactDatePicker

# Install dependencies
yarn install

# Start development server
yarn start

# Build for production
yarn build

Running Tests

# Run all tests
yarn test

# Run tests in watch mode
yarn test:watch

# Run tests with coverage
yarn test:coverage

📄 License

MIT License - see the LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

Fork the repository
Create a feature branch
Make your changes
Add tests for new features
Ensure all tests pass
Submit a pull request

📞 Support

Documentation: GitHub Wiki
Issues: GitHub Issues
Discussions: GitHub Discussions

🎯 Roadmap

🙏 Acknowledgments

Built with React
Date manipulation with date-fns
Styling with SCSS
Icons from Emoji

Built with ❤️ by Mostafa Hosseini

📚 GitHub | 📦 npm | 🎮 Demo

License

mostafahosseinidb/react-date-range

Folders and files

Latest commit

History

Repository files navigation