移植于http://foundation-datepicker.peterbeno.com
移植于http://foundation-datepicker.peterbeno.com
dt:<span>@(dt?.ToString("yyyy-MM-dd"))</span><br>
<DatePicker Color="Color.Danger" @bind-Value="dt" Options="opt"></DatePicker>
@code {
DateTime? dt;
DatePickerOptions opt = new()
{
StartDate = DateTime.Now.AddDays(-2),
EndDate = DateTime.Now.AddDays(30),
DatesDisabled = new[] {DateTime.Now.AddDays(1), DateTime.Now.AddDays(2)}
};
}
dt:<span>@(timeSpan) </span><br>
<DatePicker @bind-Value="timeSpan" Options="opt"></DatePicker>
@code {
TimeSpan? timeSpan;
DatePickerOptions opt = new()
{
Format = @"hh\:mm",
StartView = 0,
PickTime = true
};
}
Name | type | default | description |
---|---|---|---|
Format | string | 'yyyy-MM-dd' | the date format, combination of yyyy-MM-dd HH:mm |
Language | string | 'zh-CN' | en | zh-CN |
WeekStart | integer | 0 | day of the week start. 0 for Sunday - 6 for Saturday |
StartView | integer | month | set the start view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0 |
MinView|MaxView | integer | set a limit for view mode. Accepts: 'decade' = 4, 'year' = 3, 'month' = 2, 'day' = 1, 'hour' = 0 | |
PickTime | boolean | false | enables hour and minute selection views, equivalent of minView = 0, else minView = 2 |
InitialDate | date string | null | sets initial date. The same effect can be achieved with value attribute on input element. |
StartDate | date | -Infinity | disables all dates before given date |
EndDate | date | Infinity | disables all dates after given date |
KeyboardNavigation | boolean | true | with input fields, allows to navigate the datepicker with arrows. However, it disables navigation inside the input itself, too |
DaysOfWeekDisabled | Array of integers | [] | disables all dates matching the given days of week (0 = Sunday, 6 = Saturday) |
DatesDisabled | Array of date | [] | disables the specified dates |
文档