feat(time-picker): [time-picker] Optimize and modify component style issues

[Youyou-smiles]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] The commit message follows our Commit Message Guidelines
• [ ] Tests for the changes have been added (for bug fixes / features)
• [ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [ ] Feature
• [ ] Code style update (formatting, local variables)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• [ ] Yes
• [ ] No

Other information

Summary by CodeRabbit

Release Notes

• New Features

  • Enhanced date picker layout with increased width for better visibility and interaction.
  • Added support for custom "now" button functionality in the date picker.
  • Introduced linked and unlinked panel configurations for date selection.

• Bug Fixes

  • Adjusted validation rules for date inputs to improve user experience.

• Documentation

  • Updated descriptions in the time picker documentation for clarity and improved usability.

• Style

  • Consistent styling updates across various components to enhance visual presentation.
  • Increased width of date picker components from 280px to 360px for improved layout.

[coderabbitai[bot]]

Walkthrough

This pull request introduces a series of modifications primarily focused on the styling of various date picker components across multiple Vue files. The key change is the increase in width for the .demo-date-picker-wrap class from 280 pixels to 360 pixels, enhancing the layout of the date picker components. Additionally, some files include minor adjustments to the template structures, while others maintain their existing functionality without logic changes.

Changes

File Path	Change Summary
examples/sites/demos/pc/app/date-picker/align-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/align.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/basic-usage-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/basic-usage.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/clear-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/clear.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; added IconClose variable.
examples/sites/demos/pc/app/date-picker/custom-suffix-icon-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; changed background color of .my-date-picker.
examples/sites/demos/pc/app/date-picker/custom-suffix-icon.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; changed background color of .my-date-picker; initialized IconMinus.
examples/sites/demos/pc/app/date-picker/custom-weeks-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/custom-weeks.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/default-value-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/default-value.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/disabled-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/disabled.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/events-composition-api.vue	Updated layout with new class demo-row for tiny-row, changed span attributes from 4 to 6.
examples/sites/demos/pc/app/date-picker/events.vue	Updated layout with new class demo-row for tiny-row, changed span attributes from 4 to 6.
examples/sites/demos/pc/app/date-picker/filter-mode-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/filter-mode.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/format-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/format.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/label-inside-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed deep selectors.
examples/sites/demos/pc/app/date-picker/label-inside.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed deep selectors.
examples/sites/demos/pc/app/date-picker/multiple-dates-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/multiple-dates.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/now-composition-api.vue	Increased width of .demo-date-picker from 280px to 360px; added now and nowClick methods.
examples/sites/demos/pc/app/date-picker/now.vue	Increased width of .demo-date-picker from 280px to 360px.
examples/sites/demos/pc/app/date-picker/size-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/size.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; removed nested style rule.
examples/sites/demos/pc/app/date-picker/step-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/step.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; added step prop.
examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px.
examples/sites/demos/pc/app/date-picker/timezone.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; added default-timezone and :show-timezone attributes.
examples/sites/demos/pc/app/date-picker/unlink-panels-composition-api.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; added unlink-panels prop.
examples/sites/demos/pc/app/date-picker/unlink-panels.vue	Increased width of .demo-date-picker-wrap from 280px to 360px; added unlink-panels prop.
examples/sites/demos/pc/app/date-picker/validate-event-composition-api.vue	Adjusted width of .demo-date-picker-wrap from 400px to 360px.
examples/sites/demos/pc/app/date-picker/validate-event.vue	Adjusted width of .demo-date-picker-wrap from 400px to 360px; updated validation trigger for date2.
examples/sites/demos/pc/app/time-picker/basic-usage-composition-api.vue	Updated value1 initialization time from new Date(2016, 9, 10, 18, 40) to new Date(2016, 9, 10, 18, 40, 20).
examples/sites/demos/pc/app/time-picker/basic-usage.spec.ts	Updated time strings in test cases to reflect new time values.
examples/sites/demos/pc/app/time-picker/basic-usage.vue	Updated value1 initialization time from new Date(2016, 9, 10, 18, 40) to new Date(2016, 9, 10, 18, 40, 20).
examples/sites/demos/pc/app/time-picker/format.spec.ts	Updated test script to ensure the first matching span is clicked.
examples/sites/demos/pc/app/time-picker/is-range-composition-api.vue	Reduced width of .demo-time-picker-wrap from 360px to 280px.
examples/sites/demos/pc/app/time-picker/is-range.vue	Reduced width of .demo-time-picker-wrap from 360px to 280px.
examples/sites/demos/pc/app/time-picker/webdoc/time-picker.js	Updated descriptions in the Chinese language section for clarity.
packages/theme/src/picker/index.less	Removed .range-prefix-cls__close-box; updated .range-prefix-cls__close-icon styles.
packages/theme/src/time-panel/index.less	Removed &__header-input; updated &__header-title to include margin.
packages/theme/src/time-panel/vars.less	Updated --tv-TimePanel-header-margin variable to reduce bottom margin.
packages/theme/src/time-spinner/index.less	Updated styles for .time-spinner__list and added styles for .time-spinner__wrapper.is-arrow.
packages/vue/src/picker/src/pc.vue	Updated template structure and class management without altering functionality.
packages/vue/src/time/src/pc.vue	Removed tiny-input component and associated markup to streamline the time picker.

Possibly related PRs

• #2092: The changes in this PR involve updates to the CSS styles for the time picker, including width adjustments that may relate to the visual presentation of date picker components.
• #2118: This PR includes adjustments to the styling of date editor inputs, which may have implications for the date picker layout.
• #2151: This PR addresses styling issues in the input component, which could indirectly affect the date picker if they share styles or components.
• #2157: The optimization of theme style variables may impact the date picker if it utilizes any of the updated variables.
• #2160: Updates to the comments and organization of CSS variables may provide better clarity for styles used in the date picker.
• #2205: This PR adapts the date-picker component to align with the SMB theme, which directly relates to the main PR's focus on date picker styling.
• #2243: The refactoring of color picker theme variables may influence the date picker if they share styling conventions.
• #2275: The refactor of the time select component's styles may have implications for the date picker if they share similar styling or components.
• #2323: The refactor of calendar theme variables may impact the date picker if they are interconnected in styling.
• #2384: The updates to the autocomplete demo may relate to the date picker if they share layout or styling conventions.
• #2392: This PR focuses on fixing style issues in the date-picker component, making it directly relevant to the main PR.
• #2418: The style optimization in this PR directly affects the time-picker component, which is closely related to the date picker.
• #2434: This PR optimizes the demo style for the date-picker component, making it relevant to the main PR.
• #2442: The fixes for radius bugs in the month-table component are relevant as they may affect the date picker if they share components or styles.
• #2446: The changes to popper elements may indirectly affect the date picker if it utilizes similar popper functionality for dropdowns or tooltips.

Suggested reviewers

• zzcr

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

🪧 Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.