From e8e81d740a4805e015eec9f252cc1ac9b6009d30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matija=20Ko=C5=BEelj?= Date: Mon, 6 Mar 2023 15:26:28 +0100 Subject: [PATCH] DatePicker - concept, waiting for proper css styling for final edit --- .../Pages/Index.razor | 9 +- .../Components/DatePicker.razor | 109 ++++++++++ .../Components/DatePicker.razor.cs | 203 ++++++++++++++++++ .../Components/ToggleGlyphButton.razor.cs | 1 - .../Connected.Components.csproj | 2 +- 5 files changed, 320 insertions(+), 4 deletions(-) create mode 100644 src/Connected.Components/Components/DatePicker.razor create mode 100644 src/Connected.Components/Components/DatePicker.razor.cs diff --git a/src/Connected.Components.Showcase.Runner/Pages/Index.razor b/src/Connected.Components.Showcase.Runner/Pages/Index.razor index 8522ce8..8ba8fdd 100644 --- a/src/Connected.Components.Showcase.Runner/Pages/Index.razor +++ b/src/Connected.Components.Showcase.Runner/Pages/Index.razor @@ -18,13 +18,18 @@ Step4 + + +

Selected date is @date.ToString()

@value - @code { - public string value = string.Empty; + DateTime date = DateTime.Today; + } \ No newline at end of file diff --git a/src/Connected.Components/Components/DatePicker.razor b/src/Connected.Components/Components/DatePicker.razor new file mode 100644 index 0000000..c71fa15 --- /dev/null +++ b/src/Connected.Components/Components/DatePicker.razor @@ -0,0 +1,109 @@ +@using System.Globalization; +@if (loaded) +{ +
+ +
+ @if (Shown) + { + +
+
+ @Date.Year.ToString() +
+
+ @Date.ToString("ddd, " + Format) +
+
+ +
+ @switch (Selecting) + { + case Selecting.Years: + { +
+
+
Selecting = Selecting.Months)>@Date.ToString("yyyy")
+
+
+ @for (int i = Date.Year - 7; i < Date.Year + 8; i++) + { + int y = i; + +
+
+
@i.ToString()
+
+
+ + + if (Date.Year - i % 3 == 0) + { +
+ } + } + break; + } + case Selecting.Months: + { +
+
+
Selecting = Selecting.Years)>@Date.ToString("MMMM yyyy")
+
+
+ @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++) + { + int m = i; + + +
+
+
@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)
+
+
+ + + if (i % 3 == 0) + { +
+ } + } + break; + } + case (Selecting.Days): + { +
+
+
Selecting = Selecting.Months)>@Date.ToString("MMMM yyyy")
+
+
+ + @for (int i = 0; i < 7; i++) + { +
@calendarStart.AddDays(i).ToString("ddd")
+ } + @foreach (var Date in Dates) + { + +
+ @Date.Day.ToString() +
+ + @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday)) + { +
+ } + + calendarStart = calendarStart.AddDays(1); + } + break; + } + } +
+ +
+ +
+ } +
+} diff --git a/src/Connected.Components/Components/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker.razor.cs new file mode 100644 index 0000000..f287ef0 --- /dev/null +++ b/src/Connected.Components/Components/DatePicker.razor.cs @@ -0,0 +1,203 @@ +using Connected.Utilities; +using Microsoft.AspNetCore.Components; + +namespace Connected.Components; +public partial class DatePicker +{ + private bool loaded = false; + + private Selecting Selecting = Selecting.Days; + public DateTime calendarStart { get; set; } + public DateTime calendarEnd { get; set; } + + //private DateTime Today = DateTime.Today; + + [Parameter] + public bool CloseOnDateSelect { get; set; } = false; + + [Parameter] + public DateTime Date { get; set; } = DateTime.Today; + + [Parameter] + public EventCallback DateChanged { get; set; } + + private List Dates = new List(); + + [Parameter] + public string Format { get; set; } = "dd.MM.yyyy"; + + private bool _readonly = false; + [Parameter] + public bool Editable + { + get + { + return !_readonly; + } + set + { + _readonly = !value; + } + } + private bool Shown { get; set; } = false; + + public async Task SetDate(DateTime Date) + { + this.Date = Date; + SetStartStop(); + if (CloseOnDateSelect) + Shown = false; + await DateChanged.InvokeAsync(this.Date); + StateHasChanged(); + } + + public async Task SetMonth(int month) + { + Date = new DateTime(Date.Year, month, Date.Day); + Selecting = Selecting.Days; + SetStartStop(); + await DateChanged.InvokeAsync(this.Date); + StateHasChanged(); + } + + public async Task SetYear(int year) + { + Date = new DateTime(year, Date.Month, Date.Day); + Selecting = Selecting.Months; + SetStartStop(); + await DateChanged.InvokeAsync(this.Date); + StateHasChanged(); + } + + private string DayNamesRowClass + { + get + { + return new CssBuilder() + .AddClass("chip-leading-icon") + .AddClass("d-inline-block") + .AddClass("m-1") + .AddClass("bg-danger") + .AddClass("text-small") + .AddClass("text-white") + .Build(); + } + } + private string ChipFirstRowStyle + { + get + { + return new StyleBuilder() + .AddStyle("width", "30px") + .AddStyle("height", "30px") + .AddStyle("text-align", "center") + .Build(); + } + } + /* + @for (int i=0;i<7; i++) + { +
@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)
+ } + @while (calendarStart.CompareTo(calendarEnd) < 0) + { +
@calendarStart.Day.ToString()
 + @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday)) + { +
+ } + calendarStart = calendarStart.AddDays(1); + } + + */ + + public void SetStartStop() + { + calendarStart = Date; + while (calendarStart.Day != 1) + { + calendarStart = calendarStart.AddDays(-1); + } + while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday)) + { + calendarStart = calendarStart.AddDays(-1); + } + calendarEnd = Date; + while (calendarEnd.Month == Date.Month) + { + calendarEnd = calendarEnd.AddDays(1); + } + while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday)) + { + calendarEnd = calendarEnd.AddDays(1); + } + DateTime start = calendarStart; + if (Dates is null) Dates = new(); + Dates.Clear(); + while (start.CompareTo(calendarEnd) < 0) + { + Dates.Add(start); + start = start.AddDays(1); + } + } + + public string DateChipStyle(DateTime date) + { + string result = ""; + if (date.Month.CompareTo(Date.Month) < 0 || date.Month.CompareTo(Date.Month) > 0) return "bg-core text-light"; + if (date.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info"; + if (date.Month.CompareTo(Date.Month) == 0) + { + if (date.Date.CompareTo(Date.Date) == 0) + return result+" bg-info text-light"; + else + return result+" bg-core text-dark"; + } + return result; + } + + public string MonthChipClass(int month) + { + if (month.CompareTo(Date.Month) == 0) + return "bg-info text-light"; + else + return "bg-core text-dark"; + } + + public string YearChipClass(int year) + { + if (year.CompareTo(Date.Year) == 0) + return "bg-info text-light"; + else + return "bg-core text-dark"; + } + + protected override async Task OnInitializedAsync() + { + Date = DateTime.Today; + SetStartStop(); + loaded = true; + await base.OnInitializedAsync(); + } + + private string NavBarClass + { + get + { + return new CssBuilder("text-justify") + .AddClass("text-md-justify") + //.AddClass("bg-warning") + .AddClass("text-small") + .AddClass("text-dark") + .Build(); + } + } + +} + +public enum Selecting +{ + Days, + Months, + Years +} diff --git a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs index af86160..9878734 100644 --- a/src/Connected.Components/Components/ToggleGlyphButton.razor.cs +++ b/src/Connected.Components/Components/ToggleGlyphButton.razor.cs @@ -75,7 +75,6 @@ public partial class ToggleGlyphButton: Button #region Styling - /// /// Generated class list for button based on user parameters /// diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj index da165bb..93ee4f7 100644 --- a/src/Connected.Components/Connected.Components.csproj +++ b/src/Connected.Components/Connected.Components.csproj @@ -20,7 +20,7 @@ - +