From 36561cd215c904eae68284b03f436bb13781e006 Mon Sep 17 00:00:00 2001 From: Peace Date: Thu, 11 Jul 2024 17:27:48 +0900 Subject: [PATCH] calendar, date/time picker 1 --- .../Components/Layout/NavMenu.razor | 2 + .../Pages/FormInputs/FormInputCalendar.razor | 197 ++++++++++++++++++ .../FormInputs/FromInputDateTimePicker.razor | 33 +++ 3 files changed, 232 insertions(+) create mode 100644 BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor create mode 100644 BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index 6f10621..6d02fc4 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -38,6 +38,8 @@ Switch TextArea TextField + Calendar + Date & Time Picker diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor new file mode 100644 index 0000000..bbc657b --- /dev/null +++ b/BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor @@ -0,0 +1,197 @@ +@page "/forminputcalendar" +@using Microsoft.FluentUI.AspNetCore.Components.Extensions +@using System.Globalization + +@rendermode RenderMode.InteractiveServer + +Date & Time + + + The FluentDateCalendar allows for setting selected and/or disabled dates and can handle event. + + +Default Example + + +
+

Day

+ +

Selected: @(eselectedDay?.ToString("yyyy-MM-dd"))

+

Panel: @(epickerDay.ToString("yyyy-MM-dd"))

+
+
+

Month

+ +

Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))

+

Panel: @(epickerMonth.ToString("yyyy-MM-dd"))

+
+

Year

+ +

Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))

+

Panel: @(epickerMonth.ToString("yyyy-MM-dd"))

+ + + + +Customized + + + + @if (!context.IsInactive && (context.Date.Day == 5 || context.Date.Day == 15)) + { +
+ @context.DayNumber +
+ } + else + { + @context.DayNumber + } + + +

Selected: @(cval?.ToString("yyyy-MM-dd"))

+ + +Selection + + +
+

Single

+ +

Selected days: @(sselectedDay?.ToShortDateString())

+
+
+

Range

+ +

Selected days: @(DisplaySelectedDays(sselectedRange))

+
+
+

Range with Oneweek

+ +

Selected days: @(DisplaySelectedDays(sselectedRangeCustomized))

+
+
+

Multiple (max 5 days)

+ + + You can select a maximum of 5 days. Delete a day to select a new one. + +

Selected days: @(DisplaySelectedDays(sselectedDays))

+
+
+

Multiple with 3 days

+ +

Selected days: @(DisplaySelectedDays(sselectedDaysCustomized))

+
+ + + +Culture + + + + +

Selected days: @culVal?.ToString("yyyy-MM-dd")

+ + + + +

Selected days: @culVal?.ToString("yyyy-MM-dd")

+ + + + +@code { + DateTime? eselectedDay; + DateTime epickerDay = DateTime.Now; + DateTime? eselectedMonth; + DateTime epickerMonth = DateTime.Now; + DateTime? eselectedYear; + DateTime epickerYear = DateTime.Now; + + bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20; + bool DisabledMonth(DateTime date) => date.Month == 3 || date.Month == 8; + bool DisabledYear(DateTime date) => date.Year == 2026 || date.Year == 2027; + + DateTime? cval; + + DateTime? sselectedDay; + IEnumerable sselectedRange = new List(); + IEnumerable sselectedRangeCustomized = new List(); + IEnumerable sselectedDays = new List(); + IEnumerable sselectedDaysCustomized = new List(); + private bool sdisplayError = false; + + void ValidateSelectedDays() + { + if (sselectedDays.Count() > 5) + { + sselectedDays = sselectedDays.Except(new[] { sselectedDays.Last() }); + sdisplayError = true; + } + else + { + sdisplayError = false; + } + } + + IEnumerable SelectOneWeek(DateTime date) + { + return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) }; + } + + IEnumerable Select3Days(DateTime date) + { + return Enumerable.Range(0, 3).Select(v => date.AddDays(v)); + } + + private RenderFragment DisplaySelectedDays(IEnumerable days) => builder => + { + builder.OpenElement(0, "ul"); + foreach (var day in days) + { + builder.OpenElement(1, "li"); + builder.AddContent(2, day.ToShortDateString()); + builder.CloseElement(); + } + builder.CloseElement(); + }; + + DateTime? culVal; + IEnumerable selectedCultures = [new CultureInfo("fa-IR")]; + CultureInfo selectedCulture => selectedCultures.FirstOrDefault() ?? CultureInfo.CurrentCulture; + CultureInfo[] Cultures = CultureInfo.GetCultures(CultureTypes.AllCultures); + void OnSearch(OptionsSearchEventArgs e) + { + e.Items = Cultures.Where(c => + c.Name.Contains(e.Text, StringComparison.OrdinalIgnoreCase) || + c.DisplayName.Contains(e.Text, StringComparison.OrdinalIgnoreCase)); + } +} diff --git a/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor b/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor new file mode 100644 index 0000000..542a3a5 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor @@ -0,0 +1,33 @@ +@page "/forminputdatetimepicker" + +@rendermode RenderMode.InteractiveServer + +Date & Time + + + The FluentDatePicker allows for selecting dates from dropdown calendar. + + + The FluentTimePicker allows for picking a specific time of day. + + +Default Example + +
+

DatePicker

+ + + + +

Selected Date: @eval?.ToString("yyyy-MM-dd")

+
+
+

TimePicker

+ +

Selected Time: @eval?.ToString("T")

+
+ + +@code { + private DateTime? eval = DateTime.Now; +}