Feature #2717: dcc.DateRangeSlider and dcc.DateSlider

[ines-om]

This PR fixes #2717.

We implement a dcc.DateRangeSlider and a dcc.DateSlider that wraps the existing sliders, making them date compatible.

The features developed include:

• Disabling specific dates, date ranges or events (like weekends and specific weekdays), through disable_flags and disabled_dates props;
• An optional disabled dates indicator, which visually signals to the user where disabled dates are in the slider, through the disabled_dates_indicator prop;
• A new property that prevents selected ranges from spanning over disabled dates, through the no_disabled_in_between prop, which wasn't in the original plan but made sense to include.

We initially proposed the ability to disable holidays, but decided against it because it would have meant maintaining holiday data for different countries, which felt like too much added complexity for limited benefit (users can just pass in the dates they want to disable).

These components make use of the previous sliders’ props, like steps (now year, month and day based), marks, min, max, vertical, etc.

Contributor Checklist

• I have broken down my PR scope into the following TODO tasks
  • Created fragments/DateRangeSlider.tsx wrapping `dcc.RangeSlider'
  • Created components/DateRangeSlider.tsx
  • Created DateSlider.tsx wrapping dcc.DateRangeSlider
  • Changed sliders.css to contain date slider logic and addition of disabled dates indicator
  • Expanded types.ts to include date sliders' props
  • Added helpers.ts functions for logic of disabling dates, stepping dates, dealing with disabled date ranges, enforcing the optional no disabled dates in between rule, etc.
  • Created utils/computeDateSliderMarkers.ts
  • Added tests to helpers.test.ts and computeDateSliderMarkers.test.ts
• I have run the tests locally and they passed. (refer to testing section in contributing)
• I have added tests, or extended existing tests, to cover any new features or bugs fixed in this PR

optionals

• I have added entry in the CHANGELOG.md
• If this PR needs a follow-up in dash docs, community thread, I have mentioned the relevant URLS as follows
  • this GitHub #PR number updates the dash docs
  • here is the show and tell thread in Plotly Dash community

[sonarqubecloud]

Quality Gate passed

Issues
24 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[AnnMarieW]

Hi @ines-om

Nice work on this PR. Date-based controls are tricky to implement, and date sliders would be a nice addition to Dash. I spent some time testing it and wanted to share some initial feedback. I'll add more comments as I continue trying different features.

• allow_direct_input prop should be removed since there are no input fields

• Types for dates (value, min, max etc) need to accept datetime objects. See datepickers for an example.

• Need to add integration tests using dash testing. See the other slider tests for examples

• if marks are defined, it only allows dates at the predefined marks. To be consistant with other slider components, that should only be the case when step=None

• Rather than having delta_days, delta_months delta_years, it would be better to have step (number | null) and step_unit ("day" | "month" | "year")

• Note - It's common to select end-of-month dates for financial reports. That doesn't work currently. Try setting dcc.DateSlider(min="2025-01-31, max="2025-12-31, delta_months=1)

• The labels overflow the containers at the min and max points:

---

• at the max point there are two labels that overlap:

---

---

• default format for tooltip should be yyyy-mm-dd (same as the default for the marks)
• date shown in tooltip is off by one compared to value as shown in the callback

---

---

That's all I've found so far. Overall, this is a solid start!