diff --git a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor index 689bced45ad..9016122df87 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor @@ -9,6 +9,10 @@ + + + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs index d29fc0b4652..9c83203f87c 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/FlipClocks.razor.cs @@ -50,6 +50,14 @@ private Task OnCompletedAsync() /// private AttributeItem[] GetAttributes() => [ + new() + { + Name = nameof(FlipClock.ShowMonth), + Description = Localizer["ShowMonth_Description"], + Type = "boolean", + ValueList = "true|false", + DefaultValue = "false" + }, new() { Name = nameof(FlipClock.ShowDay), diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index a11c69dabc7..107c69359b9 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -6802,6 +6802,8 @@ "FlipClocksDescription": "Used for website timing or countdown", "BaseUsageText": "Basic usage", "BaseUsageIntro": "Synchronize display of current time", + "ShowMonthText": "Show Month", + "ShowMonthIntro": "Display month information by setting ShowMonth=\"true\"", "ShowDayText": "Show Day", "ShowDayIntro": "Display day information by setting ShowDay=\"true\"", "ShowMinuteText": "not display hours and minutes", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 9891436cae4..4b64a8615fa 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -6804,6 +6804,8 @@ "BaseUsageIntro": "同步显示当前时间", "ShowDayText": "显示日", "ShowDayIntro": "通过设置 ShowDay=\"true\" 显示日信息", + "ShowMonthText": "显示月", + "ShowMonthIntro": "通过设置 ShowMonth=\"true\" 显示月信息", "ShowMinuteText": "不显示时、分", "ShowMinuteIntro": "通过设置 ShowHour=\"false\" ShowMinute=\"false\" 不显示小时、分钟信息", "ShowSecondText": "不显示秒", diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor index f1211578b84..83fdca59cef 100644 --- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor +++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor @@ -3,6 +3,14 @@ @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
+ @if (ShowMonth) + { +
+ @RenderItem(3) + @RenderItem(10) +
+ } + @if (ShowDay) {
diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs index 570cd8b06ff..7b85496338a 100644 --- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs +++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs @@ -11,6 +11,12 @@ namespace BootstrapBlazor.Components; /// public partial class FlipClock { + /// + /// 获得/设置 是否显示 Month 默认 false + /// + [Parameter] + public bool ShowMonth { get; set; } + /// /// 获得/设置 是否显示 Day 默认 false /// diff --git a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js index f8680bc31b6..7b71dbf7ef4 100644 --- a/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js +++ b/src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js @@ -14,6 +14,7 @@ export function init(id, options) { return; } + const listMonth = el.querySelector('.bb-flip-clock-list.month'); const listDay = el.querySelector('.bb-flip-clock-list.day'); const listHour = el.querySelector('.bb-flip-clock-list.hour'); const listMinute = el.querySelector('.bb-flip-clock-list.minute'); @@ -37,6 +38,7 @@ export function init(id, options) { else { now = new Date(); return { + months: now.getMonth() + 1, days: now.getDate(), hours: now.getHours(), minutes: now.getMinutes(), @@ -48,15 +50,16 @@ export function init(id, options) { const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60; const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24; const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24)); - return { days, hours, minutes, seconds }; + return { months, days, hours, minutes, seconds }; } + let lastMonth; let lastDay; let lastHour; let lastMinute; let lastSecond; const go = () => { - const { days, hours, minutes, seconds } = getDate(); + const { months, days, hours, minutes, seconds } = getDate(); if (lastSecond !== seconds) { lastSecond = seconds; @@ -74,7 +77,11 @@ export function init(id, options) { lastDay = days; setTime(listDay, days, countDown); } - return { days, hours, minutes, seconds } + if (lastMonth !== months) { + lastDay = days; + setTime(listMonth, months, countDown); + } + return { months, days, hours, minutes, seconds } } let start = void 0 diff --git a/test/UnitTest/Components/FlipClockTest.cs b/test/UnitTest/Components/FlipClockTest.cs index a67e697115e..eb1f4c65c1b 100644 --- a/test/UnitTest/Components/FlipClockTest.cs +++ b/test/UnitTest/Components/FlipClockTest.cs @@ -59,6 +59,19 @@ public void ShowDay_Ok() cut.Contains("bb-flip-clock-list day"); } + [Fact] + public void ShowMonth_Ok() + { + var cut = Context.RenderComponent(); + cut.DoesNotContain("bb-flip-clock-list month"); + + cut.SetParametersAndRender(pb => + { + pb.Add(a => a.ShowMonth, true); + }); + cut.Contains("bb-flip-clock-list month"); + } + [Fact] public async Task ViewMode_Ok() {