A comprehensive React date picker component with advanced features
Single date, date range, and date-time pickers
Extensive theming and styling options
Full ARIA support and keyboard navigation
Works seamlessly on all devices
Built with React hooks and memoization
12-hour and 24-hour format support
npm install austro-byte-datepickernpm install react date-fnsimport 'austro-byte-datepicker/dist/styles.css';
import 'austro-byte-datepicker/dist/theme/default.css';Simple calendar component for selecting a single date with customizable styling and date restrictions.
Advanced date range picker with drag selection, multiple months view, and custom input support.
Combined date and time picker with 12/24-hour format support and optional time selection.
Use your own custom input elements with full styling control and accessibility support.
import React, { useState } from 'react';
import { Calendar, DateRangePicker, DateTimePicker } from 'austro-byte-datepicker';
function App() {
const [selectedDate, setSelectedDate] = useState(new Date());
const [dateRange, setDateRange] = useState({
startDate: new Date(),
endDate: new Date(),
});
return (
<div>
<Calendar
date={selectedDate}
onChange={setSelectedDate}
/>
<DateRangePicker
ranges={[dateRange]}
onChange={setDateRange}
/>
</div>
);
}Customize colors, borders, and styling to match your design system.
Set minimum/maximum dates, disable specific dates or days of the week.
Support for multiple languages and date formats via date-fns locales.
Full ARIA support, keyboard navigation, and screen reader compatibility.