ant-design-blazor/components/date-picker/internal/DatePickerTemplate.razor
笨木头 cf959decf9 feat: add calendar (#176)
* feat: refactor datePicker, add Calendar(basic)

* feat: add calendar and demos

* fix: timePicker format error

* fix: release comments

* refactor: replace @bind-Value with Value

* refactor: replace @bind-Value with Value

* fix: conflit
2020-06-03 10:24:16 +08:00

155 lines
6.3 KiB
C#

@namespace AntDesign.Internal
@typeparam TValue
@inherits DatePickerPanelBase<TValue>
<div class="@(PrefixCls)-@(Picker)-panel">
@if (IsShowHeader)
{
@RenderPickerHeader
}
<div class="@(PrefixCls)-body">
<table class="@(PrefixCls)-content">
<thead>
@RenderTableHeader
</thead>
<tbody>
@{ var startDate = ViewStartDate; }
@for (int row = 1; row <= MaxRow; row++)
{
var startColDate = startDate;
<tr class="@(GetRowClass?.Invoke(startColDate))"
@onclick="e => OnRowSelect?.Invoke(startColDate)">
@RenderFisrtCol?.Invoke(startColDate)
@for (int col = 1; col <= MaxCol; col++)
{
var currentColDate = startDate;
string inViewCls = IsInView(currentColDate) ? $"{PrefixCls}-cell-in-view" : "";
string todayCls = IsToday(currentColDate) ? $"{PrefixCls}-cell-today" : "";
string selectedCls = IsSelected(currentColDate) ? $"{PrefixCls}-cell-selected" : "";
string disabledCls = "";
string calendarInnerCls = IsCalendar ? $"{PrefixCls}-calendar-date" : "";
string calendarInnerTodayCls = IsCalendar && IsToday(currentColDate) ? $"{PrefixCls}-calendar-date-today" : "";
if (DisabledDate != null && DisabledDate(currentColDate))
{
disabledCls = $"{PrefixCls}-cell-disabled";
}
<td title="@GetColTitle?.Invoke(currentColDate)"
class="@(PrefixCls)-cell @(inViewCls) @(todayCls) @selectedCls @disabledCls">
<div class="@(PrefixCls)-cell-inner @calendarInnerCls @calendarInnerTodayCls"
@onclick="e => OnValueSelect?.Invoke(currentColDate)">
@if (IsCalendar)
{
<div class="@(PrefixCls)-calendar-date-value">
@if (Picker == DatePickerType.Date && DateRender != null)
{
@(DateRender(currentColDate, DatePicker.CurrentDate))
}
else if (Picker == DatePickerType.Month && MonthCellRender != null)
{
@(MonthCellRender(currentColDate))
}
else
{
@RenderColValue(currentColDate)
}
</div>
<div class="@(PrefixCls)-calendar-date-content">
@if (Picker == DatePickerType.Date && CalendarDateRender != null)
{
@(CalendarDateRender(currentColDate))
}
else if (Picker == DatePickerType.Month && CalendarMonthCellRender != null)
{
@(CalendarMonthCellRender(currentColDate))
}
</div>
}
else
{
@if (Picker == DatePickerType.Date && DateRender != null)
{
@(DateRender(currentColDate, DatePicker.CurrentDate))
}
else if (Picker == DatePickerType.Month && MonthCellRender != null)
{
@(MonthCellRender(currentColDate))
}
else
{
@RenderColValue(currentColDate)
}
}
</div>
</td>
startDate = @GetNextColValue(currentColDate);
}
@{ var endColDate = startDate;}
@RenderLastCol?.Invoke(endColDate)
</tr>
}
</tbody>
</table>
</div>
</div>
@code {
[Parameter]
public RenderFragment RenderPickerHeader { get; set; }
[Parameter]
public RenderFragment RenderTableHeader { get; set; }
[Parameter]
public RenderFragment<DateTime> RenderFisrtCol { get; set; }
[Parameter]
public RenderFragment<DateTime> RenderColValue { get; set; }
[Parameter]
public RenderFragment<DateTime> RenderLastCol { get; set; }
[Parameter]
public DateTime ViewStartDate { get; set; }
[Parameter]
public Func<DateTime, string> GetColTitle { get; set; }
[Parameter]
public Func<DateTime, string> GetRowClass { get; set; }
[Parameter]
public Func<DateTime, DateTime> GetNextColValue { get; set; }
[Parameter]
public Func<DateTime, bool> IsInView { get; set; }
[Parameter]
public Func<DateTime, bool> IsToday { get; set; }
[Parameter]
public Func<DateTime, bool> IsSelected { get; set; }
[Parameter]
public Action<DateTime> OnRowSelect { get; set; }
[Parameter]
public Action<DateTime> OnValueSelect { get; set; }
[Parameter]
public bool ShowFooter { get; set; } = false;
[Parameter]
public int MaxRow { get; set; } = 0;
[Parameter]
public int MaxCol { get; set; } = 0;
}