feat: New Picker

[zombieJ]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Workflow
• Other (about what?)

🔗 Related issue link

💡 Background and solution

Origin #46685

resolves #47063

📝 Changelog

Language	Changelog
🇺🇸 English	【到 issue 中复制】
🇨🇳 Chinese	【到 issue 中复制】

Chinese

• 🔥 重构 DatePicker 组件
  • ⚡️ 优化 disabledDate 检查逻辑，现在会提供 info.type 告知当前面板信息。
  • 🆕 DatePicker 新增 multiple 支持多选能力。
  • 🆕 新增配套 pickerValue、defaultPickerValue 属性用于受控管理展开面板所在日期。
    • defaultPickerValue 现在会在每次面板展开时都进行重置。
  • 🐞 修复输入框功能按键会唤起弹出框的问题，现在只有在交互按键、以及输入内容变化时唤起。
  • 🆕 新增 preserveInvalidOnBlur 属性用于无障碍时失去焦点需要保留输入内容的场景。
  • 🆕 format 支持 align 属性，允许通过掩码模式输入内容。
  • 🆕 支持 required 属性。
  • 🆕 RangePicker 下的 id 属性支持分别设置 start 和 end 输入框的 id。
  • 🆕 RangePicker 的 onFocus 和 onBlur 事件会额外提供一个 info.range 告知当前的焦点来自于哪个输入框。
  • 🆕 时间面板支持 scrollOnChange 设置滚动时间时自动选择对应的时间。
  • 🆕 添加 needConfirm 属性，允许设置需要确认、或者不确认的提交模式。
  • 🆕 添加 components 属性，允许自定义部分面板。
  • 🆕 面板中所有的日期相关信息都会允许通过 locale 进行配置。
  • 🆕 format 支持 LT、LTS 日期格式。
  • 🆕 新增 minDate 和 maxDate 用于设置面板切换范围。
  • 🆕 RangePicker 支持 order 属性。
  • 🆕 DatePicker 支持 showWeek 属性。
  • 🐞 通过输入框输入日期后失去焦点会提交变更，而不是丢失输入内容（即不再强制需要按下回车提交）。
  • 🐞 修复 use12Hours 下，disabledTime 获取的 hour 也会被裁剪成 0~12 的问题。
  • 🐞 修复某些交互下，禁用日期没有生效依然可以提交的问题。
  • 🛠 allowClear 触发事件从 onMouseDown 切换为 onClick。
  • 🛠 移除键盘对面板交互，它需要基于无障碍重新设计。
  • 🛠 废弃 onKetDown 的 preventDefault 参数，请直接通过 event.preventDefault 进行调用。
  • 💄 移除 RangePicker 的虚线样式，减少视觉干扰。
  • 💄 移除 RangePicker 在选择开始或者结束时间时的禁用范围，优化交互体验。

English

• 🔥 Refactor DatePicker component
  • ⚡️ Optimize disabledDate check logic, now it will provide info.type to inform the current panel information.
  • 🆕 DatePicker adds multiple to support multiple selection capabilities.
  • 🆕 Add matching pickerValue and defaultPickerValue attributes to control the date where the expanded panel is located.
    • defaultPickerValue will now be reset each time the panel is expanded.
  • 🐞 Fix the problem that the input box function key will trigger the pop-up box, now it will only be triggered when the interactive key and the input content change.
  • 🆕 Add the preserveInvalidOnBlur attribute to keep the input content when losing focus in the case of accessibility.
  • 🆕 format supports the align attribute, allowing input content through the mask mode.
  • 🆕 Support required attribute.
  • 🆕 The id attribute under RangePicker supports setting the id of the start and end input boxes separately.
  • 🆕 The onFocus and onBlur events of RangePicker will additionally provide an info.range to inform which input box the current focus comes from.
  • 🆕 The time panel supports scrollOnChange to automatically select the corresponding time when scrolling.
  • 🆕 Add the needConfirm attribute to allow setting the confirmation or non-confirmation submission mode.
  • 🆕 Add the components attribute to allow customizing some panels.
  • 🆕 All date-related information in the panel will allow configuration through locale.
  • 🆕 format supports LT and LTS date formats.
  • 🆕 Add minDate and maxDate to set the panel switching range.
  • 🆕 RangePicker supports order attribute.
  • 🆕 DatePicker supports showWeek attribute.
  • 🐞 Losing focus after entering the date through the input box will submit the change instead of losing the input content (that is, it is no longer necessary to press Enter to submit).
  • 🐞 Fix the problem that the hour obtained by disabledTime under use12Hours will also be clipped to 0~12.
  • 🐞 Fix the problem that the disabled date is not effective and can still be submitted under some interactions.
  • 🛠 allowClear trigger event from onMouseDown to onClick.
  • 🛠 Remove the keyboard interaction with the panel, it needs to be redesigned based on accessibility.
  • 🛠 Deprecate the preventDefault parameter of onKetDown, please call it directly through event.preventDefault.
  • 💄 Remove the dotted line style of RangePicker to reduce visual interference.
  • 💄 Remove the disabled range of RangePicker when selecting start or end time to optimize the interaction experience.

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[Wxh16144]

点击面板外关闭面板的交互有 bug。

[afc163]

cmponents 错别字

[crazyair]

cmponents 错别字

@zombieJ https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 插件安装下

[afc163]

footer 高度变化的问题修了么

[afc163]

这几个高亮是符合预期的么？

[zombieJ]

footer 高度变化的问题修了么

Yes

这几个高亮是符合预期的么？

Yes

[li-jia-nan]

这个合掉之后那一堆 issue 就自动关了吗？

[yoyo837]

这个合掉之后那一堆 issue 就自动关了吗？

不会，还是需要写close, closes, fix, fixes 等

[github-actions]

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

[AsuraKev]

Is this the Datepicker RFC? Does the custom panel support rendering datepicker in a modal for responsiveness?