DatePicker - minor fixes, added methods for back ind forward click in header (selecting year, month..)
This commit is contained in:
markosteger
parent
04309b1514
commit
fa33cc5189
@ -21,16 +21,21 @@
|
||||
{
|
||||
case Selecting.Years:
|
||||
{
|
||||
<div class="@NavBarClass">
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||
{
|
||||
int y = i;
|
||||
<a href="#" @onclick="@(()=>SetYear(y))">
|
||||
<div class="chip-group-content d-inline-flex bg-core m-1 b-1 b-r-3 text-light" style="width:30%;">
|
||||
<div class="chip-group-content d-inline-flex bg-core @YearChipClass(y) m-1 b-1 b-r-3 text-light" style="width:30%;">
|
||||
<div class="chip-leading-icon"></div>
|
||||
<div class="chip-label">@i.ToString()</div>
|
||||
<div class="chip-cta-icon"></div>
|
||||
@ -46,15 +51,22 @@
|
||||
}
|
||||
case Selecting.Months:
|
||||
{
|
||||
<div class="@NavBarClass">
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
||||
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||
{
|
||||
int m = i;
|
||||
<a href="#" @onclick="@(()=>SetMonth(m))">
|
||||
<a href="#" @onclick="@(()=>SetMonth(m))" @ont>
|
||||
|
||||
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
|
||||
<div class="chip-leading-icon"></div>
|
||||
@ -72,10 +84,17 @@
|
||||
}
|
||||
case (Selecting.Days):
|
||||
{
|
||||
<div class="@NavBarClass">
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
|
||||
</div>
|
||||
|
||||
<div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
|
||||
|
||||
<!--<div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>-->
|
||||
<div class="chip-group-content d-inline-flex">
|
||||
<div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick())"><i class='bx bx-chevron-right'></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@for (int i = 0; i < 7; i++)
|
||||
@ -93,16 +112,19 @@
|
||||
{
|
||||
<br />
|
||||
}
|
||||
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<!-- Bottom bar -->
|
||||
<div>
|
||||
|
||||
@if (ShowBottomBar)
|
||||
{
|
||||
<!-- Bottom bar -->
|
||||
<div class="p-2" style="@NavBarStyle">
|
||||
<Button Class="btn-sm" OnClick="(()=>Shown=!Shown)">X</Button>
|
||||
<Button Class="btn-sm" OnClick="(async () => await SetDate(SelectedDate, true))">OK</Button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -32,6 +32,9 @@ public partial class DatePicker
|
||||
[Parameter]
|
||||
public bool UseDateRange { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public bool ShowBottomBar { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public string Format { get; set; } = "dd.MM.yyyy";
|
||||
|
||||
@ -50,13 +53,14 @@ public partial class DatePicker
|
||||
}
|
||||
private bool Shown { get; set; } = false;
|
||||
|
||||
public async Task SetDate(DateTime Date)
|
||||
public async Task SetDate(DateTime Date, bool HideOnSet=false)
|
||||
{
|
||||
SelectedDate = Date;
|
||||
SetStartStop();
|
||||
if (CloseOnDateSelect)
|
||||
Shown = false;
|
||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||
if (HideOnSet) Shown = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
@ -168,17 +172,17 @@ public partial class DatePicker
|
||||
public string MonthChipClass(int month)
|
||||
{
|
||||
if (month.CompareTo(SelectedDate.Month) == 0)
|
||||
return "bg-info text-light";
|
||||
return "bg-info text-white";
|
||||
else
|
||||
return "bg-core text-dark";
|
||||
return "bg-core text-light";
|
||||
}
|
||||
|
||||
public string YearChipClass(int year)
|
||||
{
|
||||
if (year.CompareTo(SelectedDate.Year) == 0)
|
||||
return "bg-info text-light";
|
||||
return "bg-info text-white";
|
||||
else
|
||||
return "bg-core text-dark";
|
||||
return "bg-core text-light";
|
||||
}
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
@ -196,12 +200,51 @@ public partial class DatePicker
|
||||
return new CssBuilder("text-justify")
|
||||
.AddClass("text-md-justify")
|
||||
//.AddClass("bg-warning")
|
||||
.AddClass("p-2")
|
||||
.AddClass("text-small")
|
||||
.AddClass("text-dark")
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
|
||||
private string NavBarStyle
|
||||
{
|
||||
get
|
||||
{
|
||||
return new StyleBuilder("display","flex")
|
||||
.AddStyle("flex-direction","row")
|
||||
.AddStyle("flex-wrap","nowrap")
|
||||
.AddStyle("justify-content","space-between")
|
||||
.Build();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task NavBarClick(bool forward = true)
|
||||
{
|
||||
int multiplier = 1;
|
||||
if (!forward) multiplier = -1;
|
||||
switch (Selecting)
|
||||
{
|
||||
case Selecting.Years:
|
||||
{
|
||||
SelectedDate=SelectedDate.AddYears(8 * multiplier);
|
||||
break;
|
||||
}
|
||||
case Selecting.Months:
|
||||
{
|
||||
SelectedDate = SelectedDate.AddYears(1 * multiplier);
|
||||
break;
|
||||
}
|
||||
case Selecting.Days:
|
||||
{
|
||||
SelectedDate = SelectedDate.AddMonths(1*multiplier);
|
||||
break;
|
||||
}
|
||||
}
|
||||
SetStartStop();
|
||||
await InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public enum Selecting
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user