fix(date-picker): check properties on first render of calendar

[annawen1]

Closes #18018

Properties applied to the date-picker that don't have default values aren't applied to on the first render and are only checked in the updated cycle. Hence why it works in storybook when the properties are applied once the date-picker has been rendered.

Changelog

Changed

• add _setCalendar() function that sets the calendar
• add checks for properties in the _instantiateDatePicker() that will call _setCalendar() and apply them on the first render
• use _setCalendar() in the updated() cycle that checks for changedProperties

Testing / Reviewing

run storyook locally and apply the properties (open, min-date, etc) directly in the playground story code in date-picker.stories.ts and see if they are applied when date-picker first renders

example:

<cds-date-picker
        ?disabled="${disabled}"
        date-format="${dateFormat}"
        ?readonly="${readonly}"
        min-date="11/09/2024" <----- set a value here
        max-date="11/23/2024" <----- set a value here and see if calendar applies this range on first render

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	ad24e25
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/672d210030c5640008c148ba
😎 Deploy Preview	https://deploy-preview-18019--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	ad24e25
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/672d2100952f7a0008c71a69
😎 Deploy Preview	https://deploy-preview-18019--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	ad24e25
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/672d2100952f7a0008c71a67
😎 Deploy Preview	https://deploy-preview-18019--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.81%. Comparing base (62877c2) to head (ad24e25).
Report is 11 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18019   +/-   ##
=======================================
  Coverage   81.81%   81.81%           
=======================================
  Files         404      404           
  Lines       14085    14085           
  Branches     4409     4380   -29     
=======================================
  Hits        11523    11523           
+ Misses       2400     2399    -1     
- Partials      162      163    +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ariellalgilmore]

LGTM! noticing a weird thing though that the year gets unbolded when i put the min and max locally

[annawen1]

LGTM! noticing a weird thing though that the year gets unbolded when i put the min and max locally

Ah! I think this might be intended - if I set the max and min date to be a year apart (ie. 11/12/2024 - 11/12/2025), the year is bolded because there is a little year adjuster that appears when you hover over the year. I guess if the dates are within the same year, that functionality gets disabled and the year is unbolded.

[kennylam]

LGTM!