DateRangeSelector Test Page

Current Date Range

Start Date:27/12/2025
End Date:27/12/2025
Days Difference:0 days

Raw Data

{
  "start": {
    "calendar": {
      "identifier": "gregory"
    },
    "era": "AD",
    "year": 2025,
    "month": 12,
    "day": 27
  },
  "end": {
    "calendar": {
      "identifier": "gregory"
    },
    "era": "AD",
    "year": 2025,
    "month": 12,
    "day": 27
  }
}

Test Controls

DateRangeSelector Component

Select Date Range

Loading calendar...
Step 1: Select Start DateClick any date to start your selection
Selected: 27/12/2025 - 27/12/2025

Debug Information

Component Props:

{
  "value": {
    "start": {
      "calendar": {
        "identifier": "gregory"
      },
      "era": "AD",
      "year": 2025,
      "month": 12,
      "day": 27
    },
    "end": {
      "calendar": {
        "identifier": "gregory"
      },
      "era": "AD",
      "year": 2025,
      "month": 12,
      "day": 27
    }
  },
  "onChange": "handleDateRangeChange function"
}

Date Disabling Features:

  • • Step-by-step selection: First select start date, then end date
  • • Dynamic range limiting: After start date, only ±7 days are available for end date
  • • Check browser console for detailed logs about disabled dates

Console Logs:

Check the browser console for detailed logs from the DateRangeSelector component. Look for logs starting with 🚫, 📊, and 🔍 to see date disabling in action.