react-booking-date-picker

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

Booking Calendar/Date Picker Component Library

This project is a reusable React + TypeScript component library for a booking calendar/date picker, inspired by Airbnb's date picker. It is designed for easy integration into future projects.

Features

• Modern React + TypeScript setup (Vite)
• Modular and customizable component structure
• Focus on accessibility and user experience
• Ready for extension and styling

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Build for production:

   npm run build

Usage

You can import the booking calendar/date picker component into your React projects once implemented.

BookingCalendar Component Usage

Controlled Example

import BookingCalendar from 'react-booking-date-picker';
import 'react-booking-date-picker/src/components/BookingCalendar.css';

const [startDate, setStartDate] = useState<Date | null>(null);
const [endDate, setEndDate] = useState<Date | null>(null);

<BookingCalendar
  startDate={startDate}
  endDate={endDate}
  onChange={(start, end) => { setStartDate(start); setEndDate(end); }}
  disabledBefore={new Date()}
  disabledAfter={new Date(2025, 11, 31)}
  disabledDays={[new Date(2025, 10, 15)]}
  allowSingleDate={false}
  showClear={true}
/>

Uncontrolled Example

<BookingCalendar
  initialStartDate={new Date()}
  initialEndDate={new Date()}
  onChange={(start, end) => { /* handle selection */ }}
  allowSingleDate={false}
  showClear={true}
/>

Props

• startDate, endDate: Controlled selection. If provided, the calendar always reflects these values.
• initialStartDate, initialEndDate: Uncontrolled mode only; used for initial selection.
• onChange: Callback when selection changes. Returns start and end dates (or single date if allowSingleDate).
• disabledBefore: Disables all days before this date.
• disabledAfter: Disables all days after this date.
• disabledDays: Array of specific dates to disable.
• allowSingleDate: If true, allows only single date selection (no range).
• showClear: If true, shows a button to clear selection.

Note: You must import the CSS file manually as shown above. Your build system must support CSS imports.

---

For workspace-specific Copilot instructions, see .github/copilot-instructions.md.