DatePicker - concept, waiting for proper css styling for final edit
This commit is contained in:
Matija Koželj
parent
1e0cc64150
commit
e8e81d740a
@ -18,13 +18,18 @@
|
|||||||
Step4
|
Step4
|
||||||
</FormWizardStep>
|
</FormWizardStep>
|
||||||
</FormWizard>
|
</FormWizard>
|
||||||
|
<DatePicker
|
||||||
|
CloseOnDateSelect=true
|
||||||
|
@bind-Date=@date>
|
||||||
|
|
||||||
|
</DatePicker>
|
||||||
|
|
||||||
<TextInput @bind-Value="@value"></TextInput>
|
<TextInput @bind-Value="@value"></TextInput>
|
||||||
|
<p>Selected date is @date.ToString()</p>
|
||||||
|
|
||||||
@value
|
@value
|
||||||
|
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
public string value = string.Empty;
|
DateTime date = DateTime.Today;
|
||||||
|
|
||||||
}
|
}
|
||||||
109
src/Connected.Components/Components/DatePicker.razor
Normal file
109
src/Connected.Components/Components/DatePicker.razor
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
@using System.Globalization;
|
||||||
|
@if (loaded)
|
||||||
|
{
|
||||||
|
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
||||||
|
<!-- DatePicker input !can be edited manualy -->
|
||||||
|
<div class="inline-block"><input type="text" value="@Date.ToString(Format)" /><i class='bx bx-calendar' @onclick="(() => Shown = !Shown)"></i></div>
|
||||||
|
@if (Shown)
|
||||||
|
{
|
||||||
|
<!-- DatePicker header -->
|
||||||
|
<div id="picker_header" class="bg-info" style="height:80px;">
|
||||||
|
<div class="text-medium p-1">
|
||||||
|
@Date.Year.ToString()
|
||||||
|
</div>
|
||||||
|
<div class="text-large p-1">
|
||||||
|
@Date.ToString("ddd, " + Format)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- DatePicker body -->
|
||||||
|
<div id="picker_body" class="bg-white" style="height:auto;">
|
||||||
|
@switch (Selecting)
|
||||||
|
{
|
||||||
|
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)>@Date.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>
|
||||||
|
@for (int i = Date.Year - 7; i < Date.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-leading-icon"></div>
|
||||||
|
<div class="chip-label">@i.ToString()</div>
|
||||||
|
<div class="chip-cta-icon"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
if (Date.Year - i % 3 == 0)
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
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="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@Date.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>
|
||||||
|
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||||
|
{
|
||||||
|
int m = i;
|
||||||
|
<a href="#" @onclick="@(()=>SetMonth(m))">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
|
||||||
|
<div class="chip-cta-icon"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
if (i % 3 == 0)
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
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="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@Date.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>
|
||||||
|
|
||||||
|
@for (int i = 0; i < 7; i++)
|
||||||
|
{
|
||||||
|
<div class="@DayNamesRowClass" style="width:30px; height:30px; text-align:center; padding-top:5px;">@calendarStart.AddDays(i).ToString("ddd")</div>
|
||||||
|
}
|
||||||
|
@foreach (var Date in Dates)
|
||||||
|
{
|
||||||
|
<a href="#" @onclick="@(()=>SetDate(Date))">
|
||||||
|
<div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">
|
||||||
|
@Date.Day.ToString()
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
@if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
|
||||||
|
calendarStart = calendarStart.AddDays(1);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<!-- Bottom bar -->
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
203
src/Connected.Components/Components/DatePicker.razor.cs
Normal file
203
src/Connected.Components/Components/DatePicker.razor.cs
Normal file
@ -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<DateTime> DateChanged { get; set; }
|
||||||
|
|
||||||
|
private List<DateTime> Dates = new List<DateTime>();
|
||||||
|
|
||||||
|
[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++)
|
||||||
|
{
|
||||||
|
<div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||||
|
}
|
||||||
|
@while (calendarStart.CompareTo(calendarEnd) < 0)
|
||||||
|
{
|
||||||
|
<a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
|
||||||
|
@if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||||
|
{
|
||||||
|
<br />
|
||||||
|
}
|
||||||
|
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
|
||||||
|
}
|
||||||
@ -75,7 +75,6 @@ public partial class ToggleGlyphButton: Button
|
|||||||
|
|
||||||
#region Styling
|
#region Styling
|
||||||
|
|
||||||
|
|
||||||
/// <summary>
|
/// <summary>
|
||||||
/// Generated class list for button based on user parameters
|
/// Generated class list for button based on user parameters
|
||||||
/// </summary>
|
/// </summary>
|
||||||
|
|||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
<None Include="compilerconfig.json" />
|
<None Include="compilerconfig.json" />
|
||||||
<None Include="Components\DatePicker\DatePicker.razor" />
|
<None Include="Components\DatePicker.razor" />
|
||||||
</ItemGroup>
|
</ItemGroup>
|
||||||
|
|
||||||
<ItemGroup>
|
<ItemGroup>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user