Peace
/
BlazorFluentUIPractice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

calendar, date/time picker 1

Browse Source
main
Peace 10 months ago
parent 85bf5ace9b
commit 36561cd215
3 changed files with 232 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      BlazorFluentUI/Components/Layout/NavMenu.razor
  2. 197
      BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor
  3. 33
      BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor

2
BlazorFluentUI/Components/Layout/NavMenu.razor
Unescape View File

@ -38,6 +38,8 @@
<FluentNavLink Href="forminputswitch" Icon="@(new Icons.Regular.Size20.ToggleLeft())" IconColor="Color.Accent">Switch</FluentNavLink>
<FluentNavLink Href="forminputtextarea" Icon="@(new Icons.Regular.Size20.EditLineHorizontal3())" IconColor="Color.Accent">TextArea</FluentNavLink>
<FluentNavLink Href="forminputtexfield" Icon="@(new Icons.Regular.Size20.ColorLine())" IconColor="Color.Accent">TextField</FluentNavLink>
<FluentNavLink Href="forminputcalendar" Icon="@(new Icons.Regular.Size20.CalendarDate())" IconColor="Color.Accent">Calendar</FluentNavLink>
<FluentNavLink Href="forminputdatetimepicker" Icon="@(new Icons.Regular.Size20.Clock())" IconColor="Color.Accent">Date & Time Picker</FluentNavLink>
</FluentNavGroup>
</FluentNavMenu>

197
BlazorFluentUI/Components/Pages/FormInputs/FormInputCalendar.razor
Unescape View File

@ -0,0 +1,197 @@
@page "/forminputcalendar"
@using Microsoft.FluentUI.AspNetCore.Components.Extensions
@using System.Globalization
@rendermode RenderMode.InteractiveServer
<FluentLabel Typo="Typography.H3">Date & Time</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
The <code>FluentDateCalendar</code> allows for setting selected and/or disabled dates and can handle event.
</FluentLabel>
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentStack Orientation="Orientation.Vertical">
<div>
<h4>Day</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay" @bind-Value="eselectedDay" @bind-PickerMonth="epickerDay"
View="CalendarViews.Days"/>
<p>Selected: @(eselectedDay?.ToString("yyyy-MM-dd"))</p>
<p>Panel: @(epickerDay.ToString("yyyy-MM-dd"))</p>
</div>
<div>
<h4>Month</h4>
<FluentCalendar DisabledDateFunc="@DisabledMonth" @bind-Value="eselectedMonth" @bind-PickerMonth="epickerMonth"
View="CalendarViews.Months"/>
<p>Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))</p>
<p>Panel: @(epickerMonth.ToString("yyyy-MM-dd"))</p>
</div
<div>
<h4>Year</h4>
<FluentCalendar DisabledDateFunc="@DisabledYear" @bind-Value="eselectedYear" @bind-PickerMonth="epickerYear"
View="CalendarViews.Years"/>
<p>Selected: @(eselectedMonth?.ToString("yyyy-MM-dd"))</p>
<p>Panel: @(epickerMonth.ToString("yyyy-MM-dd"))</p>
</div>
</FluentStack>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Customized</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentCalendar DisabledDateFunc="@DisabledDay" @bind-Value="cval">
<DaysTemplate>
@if (!context.IsInactive && (context.Date.Day == 5 || context.Date.Day == 15))
{
<div style="color:orangered; font-weight:bold">
@context.DayNumber
</div>
}
else
{
@context.DayNumber
}
</DaysTemplate>
</FluentCalendar>
<p>Selected: @(cval?.ToString("yyyy-MM-dd"))</p>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Selection</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentStack Orientation="Orientation.Vertical">
<div>
<h4>Single</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay"
@bind-Value="sselectedDay"
SelectMode="CalendarSelectMode.Single"/>
<p>Selected days: @(sselectedDay?.ToShortDateString())</p>
</div>
<div>
<h4>Range</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay"
@bind-SelectedDates="sselectedRange"
SelectMode="CalendarSelectMode.Range"/>
<p>Selected days: @(DisplaySelectedDays(sselectedRange))</p>
</div>
<div>
<h4>Range with Oneweek</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay"
@bind-SelectedDates="sselectedRangeCustomized"
SelectDatesHover="@SelectOneWeek"
SelectMode="CalendarSelectMode.Range"/>
<p>Selected days: @(DisplaySelectedDays(sselectedRangeCustomized))</p>
</div>
<div>
<h4>Multiple (max 5 days)</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay"
@bind-SelectedDates="sselectedDays"
@bind-SelectedDates:after="ValidateSelectedDays"
SelectMode="CalendarSelectMode.Multiple"/>
<FluentMessageBar Visible="@sdisplayError" Intent="MessageIntent.Error">
You can select a maximum of 5 days. Delete a day to select a new one.
</FluentMessageBar>
<p>Selected days: @(DisplaySelectedDays(sselectedDays))</p>
</div>
<div>
<h4>Multiple with 3 days</h4>
<FluentCalendar DisabledDateFunc="@DisabledDay"
@bind-SelectedDates="sselectedDaysCustomized"
SelectDatesHover="@Select3Days"
SelectMode="CalendarSelectMode.Multiple"/>
<p>Selected days: @(DisplaySelectedDays(sselectedDaysCustomized))</p>
</div>
</FluentStack>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Culture</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentGrid>
<FluentGridItem>
<FluentCalendar Culture="selectedCulture" @bind-Value="culVal"/>
<p>Selected days: @culVal?.ToString("yyyy-MM-dd")</p>
<FluentAutocomplete TOption="CultureInfo"
AutoComplete="off"
Label="Select Culture"
Width="250px"
OnOptionsSearch="OnSearch"
Placeholder="Select country"
MaximumOptionsSearch="int.MaxValue"
MaximumSelectedOptions="1"
Virtualize="true"
OptionText="@(item => $"{item.DisplayName} - {item.Name}")"
@bind-SelectedOptions="@selectedCultures"/>
</FluentGridItem>
<FluentGridItem>
<FluentCalendar @bind-Value="culVal"/>
<p>Selected days: @culVal?.ToString("yyyy-MM-dd")</p>
</FluentGridItem>
</FluentGrid>
</FluentCard>
@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<DateTime> sselectedRange = new List<DateTime>();
IEnumerable<DateTime> sselectedRangeCustomized = new List<DateTime>();
IEnumerable<DateTime> sselectedDays = new List<DateTime>();
IEnumerable<DateTime> sselectedDaysCustomized = new List<DateTime>();
private bool sdisplayError = false;
void ValidateSelectedDays()
{
if (sselectedDays.Count() > 5)
{
sselectedDays = sselectedDays.Except(new[] { sselectedDays.Last() });
sdisplayError = true;
}
else
{
sdisplayError = false;
}
}
IEnumerable<DateTime> SelectOneWeek(DateTime date)
{
return new[] { date.StartOfWeek(), date.StartOfWeek().AddDays(6) };
}
IEnumerable<DateTime> Select3Days(DateTime date)
{
return Enumerable.Range(0, 3).Select(v => date.AddDays(v));
}
private RenderFragment DisplaySelectedDays(IEnumerable<DateTime> 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<CultureInfo> selectedCultures = [new CultureInfo("fa-IR")];
CultureInfo selectedCulture => selectedCultures.FirstOrDefault() ?? CultureInfo.CurrentCulture;
CultureInfo[] Cultures = CultureInfo.GetCultures(CultureTypes.AllCultures);
void OnSearch(OptionsSearchEventArgs<CultureInfo> e)
{
e.Items = Cultures.Where(c =>
c.Name.Contains(e.Text, StringComparison.OrdinalIgnoreCase) ||
c.DisplayName.Contains(e.Text, StringComparison.OrdinalIgnoreCase));
}
}

33
BlazorFluentUI/Components/Pages/FormInputs/FromInputDateTimePicker.razor
Unescape View File

@ -0,0 +1,33 @@
@page "/forminputdatetimepicker"
@rendermode RenderMode.InteractiveServer
<FluentLabel Typo="Typography.H3">Date & Time</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
The <code>FluentDatePicker</code> allows for selecting dates from dropdown calendar.
</FluentLabel>
<FluentLabel Typo="Typography.Body">
The <code>FluentTimePicker</code> allows for picking a specific time of day.
</FluentLabel>
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<div>
<h4>DatePicker</h4>
<FluentDatePicker Label="Default" @bind-Value="eval" />
<FluentDatePicker Label="Days view" @bind-Value="eval" View="CalendarViews.Days" />
<FluentDatePicker Label="Months view" @bind-Value="eval" View="CalendarViews.Months" />
<FluentDatePicker Label="Years view" @bind-Value="eval" View="CalendarViews.Years" />
<p>Selected Date: @eval?.ToString("yyyy-MM-dd")</p>
</div>
<div>
<h4>TimePicker</h4>
<FluentTimePicker Label="Default" @bind-Value="eval"/>
<p>Selected Time: @eval?.ToString("T")</p>
</div>
</FluentCard>
@code {
private DateTime? eval = DateTime.Now;
}
Write Preview
Loading…
Cancel
Save