Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Add seconds to TimePicker #11231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: dev
Choose a base branch
from

Conversation

DanBiscotti
Copy link

@DanBiscotti DanBiscotti commented Apr 23, 2025

Description

fixes #4644

Hi MudBlazor maintainer(s)!
I hope you will consider this PR, I wanted to be able the seconds in the TimePicker component, so thought I would have a go at it myself

I made several changes:

  • Added a copy of the minutes dial widget to allow selecting seconds part of time. This is automatically opened after the minute dial, given the TimeEditMode allows
  • Added 3 additional TimeEditMode
    • HoursMinutes: only hours and minutes are editable
    • MinutesSeconds: only minutes and seconds are editable
    • SecondsOnly: only seconds are editable
  • Added two parameters HoursVisible and SecondsVisible to change whether the hours and seconds are visible in the picker toobar
  • Added parameter SecondSelectionStep which controls the step for seconds in the same way MinuteSelectionStep does for minutes
  • Made a few CSS changes to allow for the extra width of the time format when in static landscape mode

I also fixed a related issue where the OpenTo was not being set correctly based on the TimeEditMode when PickerVariant was set to Static. This was because OnPickerOpenedAsync was never being called to set it correctly so it always opened to the default value for OpenTo which is hours. To fix this I made currentView nullable and set it in OnParametersSet based on the TimeEditMode.

I know it says to have only one issue per PR, but I thought this was so closely related that it might be allowed to be added, but can create a separate PR if this is a hard rule

One thing I didn't add is a way of keyboard navigation for the seconds part, which I notice is there for hours and minutes. I did this mainly because I wasn't 100% sure which path to take. My main thought was to use ctrl+shft+arrow, but don't know if that might clash with other browser keybindings I'm not aware of

How Has This Been Tested?

I tested this using the Docs project and also an extra project I added locally for testing, but I've also added some unit tests

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Standard usage

Screencast From 2025-04-23 21-06-20

HoursVisible and SecondsVisible

Screencast From 2025-04-23 21-11-07(1)

Layout before and after

Before

image

After

image

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added bug Something does not work as intended/expected enhancement New feature or request PR: needs review labels Apr 23, 2025
Copy link

codecov bot commented Apr 23, 2025

Codecov Report

Attention: Patch coverage is 94.00000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 91.10%. Comparing base (886dcc9) to head (1bb7de8).
Report is 12 commits behind head on dev.

Files with missing lines Patch % Lines
...lazor/Components/TimePicker/MudTimePicker.razor.cs 93.75% 2 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##              dev   #11231      +/-   ##
==========================================
+ Coverage   91.08%   91.10%   +0.01%     
==========================================
  Files         436      436              
  Lines       14143    14173      +30     
  Branches     2731     2737       +6     
==========================================
+ Hits        12882    12912      +30     
+ Misses        639      638       -1     
- Partials      622      623       +1     

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something does not work as intended/expected enhancement New feature or request PR: needs review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a Minutes and Seconds option to the TimePicker Component
1 participant