Date input range fixes
Description
This PR addresses several issues with the date input component, including timezone handling, default values, year selection, date range presets, and improved date boundary management.
Changes Summary
🐛 Bug Fixes
1. Timezone Fix
- Issue: Date conversion was using
toISOString()which could cause timezone-related date shifts - Fix: Changed
dateToYYYYMMDD()inhelpers.jsto use local date components instead of ISO string conversion - Impact: Prevents dates from shifting by one day due to timezone conversion issues
2. Default Value Fix
- Issue: Default value wasn't consistently set to today
- Fix: Changed default value to use
today(getLocalTimeZone())as the reference date - Impact: Date inputs now default to today's date, providing a better user experience
3. Extra Day End String Fix
- Issue:
extraDayEndStringwas only calculated for range inputs, causing issues with single date inputs - Fix: Removed the
rangecondition check soextraDayEndStringis calculated for all inputs - Impact: Ensures proper date boundary handling for both single date and range inputs, and enables date disabling for dates outside the data range
✨ New Features
4. Data-Driven Year Selection & Date Disabling
- Feature: Year dropdown now only shows years that exist in the provided data, and dates outside the data range are disabled
- Implementation:
- Added
dataanddatesprops to extract available years from query data - Year options are filtered to only show years present in the dataset
- Calendar uses
calendarStartandcalendarEnd(withextraDayEndStringfor safety) to setminValueandmaxValue, which automatically disables dates outside the range - Falls back to default behavior if no data is provided
- Added
- Impact: Users can only select years and dates that have data, preventing invalid date selections and improving UX
5. New Date Range Presets
- Feature: Added "Today" and "Yesterday" presets for quick date selection
6. Improved Preset Calculations
- Feature: Presets now use a
referenceDatethat selects the appropriate reference point - Implementation:
- For single date inputs: uses the selected date
- For range inputs: uses the end date of the selected range
- "Month to Today" and "Year to Today" presets now correctly use
todayDateinstead ofcalendarEnd
7. Enhanced Year Selection Logic
- Feature: Improved year selection to handle month boundaries when switching years
- Implementation:
- When changing years, attempts to keep the same month if valid
- If the same month is invalid in the new year, finds the closest valid month
- Impact: Smoother user experience when navigating between years with different available date ranges
Checklist
- [X] For UI or styling changes, I have added a screenshot or gif showing before & after
- [X] I have added a changeset
- [X] I have added to the docs where applicable
- [X] I have added to the VS Code extension where applicable
- To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1211182961543171
@arefabouhamdan it looks like the only check failing is the formatting/lint check. If you run npm run format and npm run lint and push the changes it should take care of it
@arefabouhamdan for the timezone and off-by-one issues, can you share how you were seeing that show up? We've typically only seen it with users east of UTC line, so just want to make sure you had a good starting test that was failing and can confirm it works now both in that case, and in the west of UTC case
@arefabouhamdan do you know why the default dates of the date input have changed? Below are current live docs and the preview docs from this PR: