You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.7 KiB
46 lines
1.7 KiB
@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>
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Conversion</FluentLabel>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
@* Default usage *@
|
|
<div>
|
|
<FluentDatePicker @bind-Value="MyDateTime" />
|
|
<FluentTimePicker @bind-Value="MyDateTime" />
|
|
<b>Date:</b> @(MyDateTime?.ToString("yyyy-MM-dd"))
|
|
<b>Time:</b> @(MyDateTime?.ToString("HH:mm"))
|
|
</div>
|
|
</FluentCard>
|
|
|
|
@code {
|
|
DateTime? eval = DateTime.Now;
|
|
|
|
DateTime? MyDateTime = DateTime.Now;
|
|
}
|
|
|