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.
|
|
|
|
|
@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;
|
|
|
|
|
|
}
|
