docs(InputDate): add date range filter example#6334
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughReplaces fixed example dates with dynamic initialization using today(tz) (defaulting to a 14-day range ending today). Adds preset ranges (7, 14, 30 days; 3, 6 months; 1 year), helper functions to compute/apply presets and detect matches, and a computed Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@docs/app/components/content/examples/input-date/InputDateDateRangeFilterExample.vue`:
- Around line 19-27: The preset ranges are off-by-one because you subtract the
full preset length when computing the inclusive start date; update the initial
dateRange and the selectPreset function to subtract (days - 1) for the start
date (i.e., use today(tz).subtract({ days: days - 1 }) and for the initial 7-day
preset subtract 6) so that 1D/3D/7D/etc. produce inclusive spans shown as start
– end; adjust selectPreset(dateRange) logic to handle days === 1 (subtract 0)
accordingly.
In `@docs/content/docs/2.components/input-date.md`:
- Around line 231-236: The MD003 lint error comes from the ::component-example
directive block for 'input-date-date-range-filter-example'; wrap that directive
with local markdownlint suppression comments to silence MD003 (add <!--
markdownlint-disable MD003 --> immediately before the ::component-example line
and <!-- markdownlint-enable MD003 --> immediately after the closing ::) so the
block remains unchanged but lint passes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b0e3b039-0835-4128-805e-ba0300318058
📒 Files selected for processing (2)
docs/app/components/content/examples/input-date/InputDateDateRangeFilterExample.vuedocs/content/docs/2.components/input-date.md
commit: |
benjamincanac
left a comment
benjamincanac
left a comment
There was a problem hiding this comment.
@onmax Since this use Calendar component, I would put this inside calendar.md. We could also improve the As a date range picker example with this or with filters inside the popover like I did in the dashboard template:
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vue`:
- Around line 33-36: The isRangeSelected function assumes computeStart(range)
returns both start and end and calls .compare on them, which can throw when end
(or start) is unset during range picking; update isRangeSelected to guard
against missing values from computeStart and from modelValue.value (e.g., check
that start and end are non-null/defined before calling .compare or short-circuit
to false), referencing the computeStart(range), isRangeSelected,
modelValue.value, and ranges symbols so the comparison only runs when both
boundaries exist.
- Around line 17-18: Compute the end date once and derive start from it to avoid
a rollover race: call today(tz) a single time (e.g., assign to a local variable
named end) and then set start by subtracting 14 days from that end value; update
the CalendarDateRangePickerExample.vue example to use the single today(tz)
result rather than calling today(tz) twice for start and end.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8e1f40bd-8072-4b58-a727-adc9cb38c704
📒 Files selected for processing (2)
docs/app/components/content/examples/calendar/CalendarDateRangePickerExample.vuedocs/content/docs/2.components/calendar.md
✅ Files skipped from review due to trivial changes (1)
- docs/content/docs/2.components/calendar.md
|
Hey @benjamincanac, I have updated the PR and also created a new video with your recommendation. For mobile I have followed the same pattern and remove the quick-actions selector and just left one month input |
2 participants
Cap.2026-04-11.at.14.55.47.mp4
The left quick actions is vertically center now, it was not vertically center in the video
Mobile
Old implementation
After this comment: #6334 (review)
This PR has completely changed. For future reference:
I just saw this https://x.com/steveschoger/status/2042272697283985610 (15:30) as well as in https://app.blacksmith.sh/quiverdk/runs/workflows. I find it quite useful, and really nice UX, so i think it would be nice to have that pattern ready to copy paste from the docs.
This PR:
Cap.2026-04-10.at.17.22.46.mp4
TODO