feat(module: datepicker): add 12-hour time support #2501

Alexbits · 2022-06-03T17:36:35Z

Add 12-hour time support to the DatePicker/TimePicker/RangePicker

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
Changelog is provided or not needed

github-actions · 2022-06-03T17:36:49Z

codecov · 2022-06-04T06:59:28Z

Codecov Report

Merging #2501 (ec041a1) into feature (1659aef) will increase coverage by 1.69%.
The diff coverage is 20.00%.

@@             Coverage Diff             @@
##           feature    #2501      +/-   ##
===========================================
+ Coverage    27.67%   29.37%   +1.69%     
===========================================
  Files          498      535      +37     
  Lines        33508    25851    -7657     
  Branches         0      258     +258     
===========================================
- Hits          9275     7595    -1680     
+ Misses       24233    18216    -6017     
- Partials         0       40      +40

Impacted Files	Coverage Δ
...date-picker/internal/DatePickerDatetimePanel.razor	`0.00% <0.00%> (ø)`
...e-picker/internal/DatePickerDatetimePanel.razor.cs	`0.00% <0.00%> (ø)`
...onents/date-picker/internal/DatePickerPanelBase.cs	`48.57% <0.00%> (+6.71%)`	⬆️
.../date-picker/internal/DatePickerPanelChooser.razor	`86.36% <ø> (+18.62%)`	⬆️
components/date-picker/internal/DatePickerBase.cs	`47.36% <77.77%> (+2.14%)`	⬆️
components/date-picker/DatePicker.Razor.cs	`68.75% <100.00%> (+0.82%)`	⬆️
components/date-picker/locale/DatePickerLocale.cs	`100.00% <100.00%> (ø)`
components/core/Helpers/MemberPath/PathNode.cs	`46.15% <0.00%> (-8.85%)`	⬇️
components/core/Reflection/TypeDefined.cs	`77.77% <0.00%> (-7.94%)`	⬇️
components/input/InputGroup.razor.cs	`87.50% <0.00%> (-6.95%)`	⬇️
... and 446 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1659aef...ec041a1. Read the comment docs.

ElderJames · 2022-06-04T17:45:40Z

Thanks for contribute this @Alexbits , this make a great help!

In terms of globalization, I think AM and PM can use . NET built-in string for the current culture as the fallback.

  CultureInfo.CurrentCulture.DateTimeFormat.AMDesignator;
  CultureInfo.CurrentCulture.DateTimeFormat.PMDesignator

Alexbits · 2022-06-04T18:41:35Z

Thanks for contribute this @Alexbits , this make a great help!

In terms of globalization, I think AM and PM can use . NET built-in string for the current culture as the fallback.
  CultureInfo.CurrentCulture.DateTimeFormat.AMDesignator;
  CultureInfo.CurrentCulture.DateTimeFormat.PMDesignator

Thank you for your work @ElderJames ! I thought about this, but I was unsure if it was worth it since you provided the strings in the DateLocale class.

Where do you mean to implement this fallback?

ElderJames · 2022-06-05T04:12:24Z

Just the text in the input component, it can't be localized.

This is en-US:

This is zh-CN, you can switch the language on the right-top of the site.

The test code is:

<div>
  <TimePicker TValue="DateTime?" Use12Hours />

  AM: @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.AMDesignator;
  PM: @System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.PMDesignator
</div>

Edit:

Ok, I found this to be due to formatting without setting current CultureInfo.

ant-design-blazor/components/date-picker/internal/DatePickerBase.cs

Line 699 in fe8a82e

return value.ToString(format, CultureInfo.InvariantCulture);

We can change this line to below and it work.

value.ToString(format, CultureInfo)

And these two button we also need to be localize.

components/locales/en-US.json

Alexbits · 2022-06-05T13:03:46Z

Hi @ElderJames, I checked the original ant.design, and AM/PM in the selection panel is not localized 🤔

Also, in the ant-design-blazor the selection panel does not look right when AM/PM localized with the scrollbar visible:

ElderJames · 2022-06-07T08:16:21Z

That's fine. We may need to modify the style to make the width adaptive.

ElderJames · 2022-06-07T17:10:29Z

There are an issue when I press the one of these buttons and they would switch by turns.

components/date-picker/internal/DatePickerDatetimePanel.razor

Co-authored-by: James Yeung <shunjiey@hotmail.com>

Alexbits · 2022-06-08T15:41:38Z

There are an issue when I press the one of these buttons and they would switch by turns.

Fixed. Sorry! I've missed this somehow.

Alexbits · 2022-06-08T16:11:31Z

I'm considering implementing (separate PR) the time selection behavior as it is in the ant-design. When the OK button is present, the value is not applied until the OK button or Enter key is used to confirm it. Then it makes sense to have the OK button. What do you think about this @ElderJames?

ElderJames · 2022-06-08T16:38:02Z

I'm considering implementing (separate PR) the time selection behavior as it is in the ant-design. When the OK button is present, the value is not applied until the OK button or Enter key is used to confirm it. Then it makes sense to have the OK button. What do you think about this @ElderJames?

Good idea. We just want to follow antd's behavior, and we also need to give the user the option to update the value when the panel is closed

ElderJames

LGTM. Thanks.

Doesn't work in DatePicker

ElderJames · 2022-06-08T17:01:19Z

For DatePicker, the display format in input has no AM/PM.

Alexbits · 2022-06-08T18:05:38Z

For DatePicker, the display format in input has no AM/PM.

Fixed

components/date-picker/internal/DatePickerBase.cs

components/locales/en-US.json

components/date-picker/internal/DatePickerDatetimePanel.razor

Alexbits · 2022-06-09T14:20:00Z

I also see another issue with the TimePicker. The selected time is often not visible. The TimePicker should auto-scroll itself when the selected value is not visible. 🤔

ElderJames · 2022-06-10T01:49:23Z

I also see another issue with the TimePicker. The selected time is often not visible. The TimePicker should auto-scroll itself when the selected value is not visible. 🤔

Yes, antd is designed to scroll to the top when time item clicked. We're not there yet. Do you have any ideas?

Alexbits · 2022-06-10T07:34:37Z

I also see another issue with the TimePicker. The selected time is often not visible. The TimePicker should auto-scroll itself when the selected value is not visible. 🤔

Yes, antd is designed to scroll to the top when time item clicked. We're not there yet. Do you have any ideas?

I'm looking into it.

* feat(module: datepicker): add 12-hour time support * fix(module: datepicker): revert 24-hour time format * fix(module: datepicker): AM/PM not localized in the date input component * fix(module: datepicker): AM/PM in the selection panel are not localized * Update components/date-picker/internal/DatePickerDatetimePanel.razor Co-authored-by: James Yeung <shunjiey@hotmail.com> * fix(module: datepicker). AM/PM switches toggling incorrectly * fix(module: datepicker): 24-hour format in DatePicker when Use12Hours * fix(module: datepicker): time format in docs * refactor(module: datepicker): code cleanup * feat(module: datepicker): add 12-hour format to en-US locale

feat(module: datepicker): add 12-hour time support

949e0c9

pr-triage bot added the PR: unreviewed label Jun 3, 2022

Merge branch 'feature' into feat/time-picker-12-hour

925ffd5

ElderJames reviewed Jun 5, 2022

View reviewed changes

components/locales/en-US.json Outdated Show resolved Hide resolved

ElderJames reviewed Jun 5, 2022

View reviewed changes

components/locales/en-US.json Outdated Show resolved Hide resolved

fix(module: datepicker): revert 24-hour time format

8bd7eee

fix(module: datepicker): AM/PM not localized in the date input component

3534402

fix(module: datepicker): AM/PM in the selection panel are not localized

0fe41be

ElderJames reviewed Jun 7, 2022

View reviewed changes

components/date-picker/internal/DatePickerDatetimePanel.razor Outdated Show resolved Hide resolved

Alexbits and others added 2 commits June 7, 2022 20:19

Update components/date-picker/internal/DatePickerDatetimePanel.razor

eb4711b

Co-authored-by: James Yeung <shunjiey@hotmail.com>

fix(module: datepicker). AM/PM switches toggling incorrectly

08ef1f4

ElderJames previously approved these changes Jun 8, 2022

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jun 8, 2022

pr-triage bot added PR: unreviewed and removed PR: reviewed-approved labels Jun 8, 2022

fix(module: datepicker): 24-hour format in DatePicker when Use12Hours

f09ffdd

fix(module: datepicker): time format in docs

8656a73

ElderJames reviewed Jun 9, 2022

View reviewed changes

components/date-picker/internal/DatePickerBase.cs Outdated Show resolved Hide resolved

ElderJames reviewed Jun 9, 2022

View reviewed changes

components/locales/en-US.json Outdated Show resolved Hide resolved

ElderJames reviewed Jun 9, 2022

View reviewed changes

components/date-picker/internal/DatePickerDatetimePanel.razor Show resolved Hide resolved

Alexbits added 2 commits June 9, 2022 14:57

refactor(module: datepicker): code cleanup

6cecfc4

feat(module: datepicker): add 12-hour format to en-US locale

ec041a1

ElderJames approved these changes Jun 10, 2022

View reviewed changes

pr-triage bot added PR: reviewed-approved and removed PR: unreviewed labels Jun 10, 2022

ElderJames merged commit acb6c89 into ant-design-blazor:feature Jun 10, 2022

pr-triage bot added PR: merged and removed PR: reviewed-approved labels Jun 10, 2022

Alexbits deleted the feat/time-picker-12-hour branch June 10, 2022 12:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module: datepicker): add 12-hour time support #2501

feat(module: datepicker): add 12-hour time support #2501

Alexbits commented Jun 3, 2022 •

edited

github-actions bot commented Jun 3, 2022 •

edited

codecov bot commented Jun 4, 2022 •

edited

ElderJames commented Jun 4, 2022 •

edited

Alexbits commented Jun 4, 2022

ElderJames commented Jun 5, 2022 •

edited

Alexbits commented Jun 5, 2022 •

edited

ElderJames commented Jun 7, 2022

ElderJames commented Jun 7, 2022 •

edited

Alexbits commented Jun 8, 2022 •

edited

Alexbits commented Jun 8, 2022

ElderJames commented Jun 8, 2022

ElderJames left a comment

ElderJames commented Jun 8, 2022

Alexbits commented Jun 8, 2022 •

edited

Alexbits commented Jun 9, 2022 •

edited

ElderJames commented Jun 10, 2022 •

edited

Alexbits commented Jun 10, 2022

feat(module: datepicker): add 12-hour time support #2501

feat(module: datepicker): add 12-hour time support #2501

Conversation

Alexbits commented Jun 3, 2022 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self Check before Merge

github-actions bot commented Jun 3, 2022 • edited

codecov bot commented Jun 4, 2022 • edited

Codecov Report

ElderJames commented Jun 4, 2022 • edited

Alexbits commented Jun 4, 2022

ElderJames commented Jun 5, 2022 • edited

Alexbits commented Jun 5, 2022 • edited

ElderJames commented Jun 7, 2022

ElderJames commented Jun 7, 2022 • edited

Alexbits commented Jun 8, 2022 • edited

Alexbits commented Jun 8, 2022

ElderJames commented Jun 8, 2022

ElderJames left a comment

Choose a reason for hiding this comment

ElderJames commented Jun 8, 2022

Alexbits commented Jun 8, 2022 • edited

Alexbits commented Jun 9, 2022 • edited

ElderJames commented Jun 10, 2022 • edited

Alexbits commented Jun 10, 2022

Alexbits commented Jun 3, 2022 •

edited

github-actions bot commented Jun 3, 2022 •

edited

codecov bot commented Jun 4, 2022 •

edited

ElderJames commented Jun 4, 2022 •

edited

ElderJames commented Jun 5, 2022 •

edited

Alexbits commented Jun 5, 2022 •

edited

ElderJames commented Jun 7, 2022 •

edited

Alexbits commented Jun 8, 2022 •

edited

Alexbits commented Jun 8, 2022 •

edited

Alexbits commented Jun 9, 2022 •

edited

ElderJames commented Jun 10, 2022 •

edited