DatePicker - minor fixes, added methods for back ind forward click in header (selecting year, month..)

src/Connected.Components/Components/DatePicker.razor

@@ -21,16 +21,21 @@
                 {
                     case Selecting.Years:
                         {
-                            <div class="@NavBarClass">
+                            <div class="@NavBarClass" style="@NavBarStyle">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="chip-group-content d-inline-flex">
-                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
+                                    <div class="chip-leading-icon" @onclick="(async ()=>await NavBarClick(false))"><i class='bx bx-chevron-left'></i></div>
-                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></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="@NavBarClass" style="@NavBarStyle">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <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="@NavBarClass" style="@NavBarStyle">
-                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <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>
+                @if (ShowBottomBar)
-            <!-- Bottom bar -->
+                {
-            <div>
+                    <!-- 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>

src/Connected.Components/Components/DatePicker.razor.cs

@@ -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