DatePicker - Index update binding beacuse of the name changes
This commit is contained in:
markosteger
Matija Koželj
parent
92f42169fa
commit
978dd7ad85
@ -20,7 +20,7 @@
|
|||||||
</FormWizard>
|
</FormWizard>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
CloseOnDateSelect=true
|
CloseOnDateSelect=true
|
||||||
@bind-Date=@date>
|
@bind-SelectedDate=@date>
|
||||||
|
|
||||||
</DatePicker>
|
</DatePicker>
|
||||||
|
|
||||||
|
|||||||
@ -1,79 +0,0 @@
|
|||||||
@using System.Globalization;
|
|
||||||
@if (loaded)
|
|
||||||
{
|
|
||||||
<TextInput Value="@SelectedDate.ToString(Format)" Readonly="_readonly"></TextInput>
|
|
||||||
@if (Shown)
|
|
||||||
{
|
|
||||||
<div id="picker" class="m-2" style="width:270px; height:auto;">
|
|
||||||
<div id="picker_header" class="bg-info" style="height:80px;">
|
|
||||||
<div class="text-medium p-1">
|
|
||||||
@SelectedDate.Year.ToString()
|
|
||||||
</div>
|
|
||||||
<div class="text-large p-1">
|
|
||||||
@SelectedDate.ToString("ddd, " + Format)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="picker_body" class="bg-white" style="height:auto;">
|
|
||||||
@switch (Selecting)
|
|
||||||
{
|
|
||||||
case Selecting.Years:
|
|
||||||
{
|
|
||||||
<div class="text-justify text-md-justify">
|
|
||||||
<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.Days)>@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>
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case Selecting.Months:
|
|
||||||
{
|
|
||||||
<div class="text-justify text-md-justify">
|
|
||||||
<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)>@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>
|
|
||||||
@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="text-justify text-md-justify">
|
|
||||||
<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("MMMM")</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="chip-leading-icon d-inline-block p-1 m-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1).ToUpper()</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>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,162 +0,0 @@
|
|||||||
using Connected.Utilities;
|
|
||||||
using Microsoft.AspNetCore.Components;
|
|
||||||
|
|
||||||
namespace Connected.Components.DatePicker;
|
|
||||||
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;
|
|
||||||
|
|
||||||
private DateTime SelectedDate = DateTime.Today;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[Parameter]
|
|
||||||
public bool Shown { get; set; } = false;
|
|
||||||
|
|
||||||
public void SetMonthNavigation()
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
public void SetDate(DateTime Date)
|
|
||||||
{
|
|
||||||
SelectedDate = Date;
|
|
||||||
SetStartStop();
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void SetMonth(int month)
|
|
||||||
{
|
|
||||||
SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
|
|
||||||
SetStartStop();
|
|
||||||
StateHasChanged();
|
|
||||||
}
|
|
||||||
|
|
||||||
private string ChipFirstRowClass
|
|
||||||
{
|
|
||||||
get
|
|
||||||
{
|
|
||||||
return new CssBuilder()
|
|
||||||
.AddClass("chip-leading-icon d-inline-block p-1 bg-danger text-small text-light")
|
|
||||||
.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 = SelectedDate;
|
|
||||||
while (calendarStart.Day != 1)
|
|
||||||
{
|
|
||||||
calendarStart = calendarStart.AddDays(-1);
|
|
||||||
}
|
|
||||||
while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
|
|
||||||
{
|
|
||||||
calendarStart = calendarStart.AddDays(-1);
|
|
||||||
}
|
|
||||||
calendarEnd = SelectedDate;
|
|
||||||
while (calendarEnd.Month == SelectedDate.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(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
|
|
||||||
if (date.Month.CompareTo(SelectedDate.Month) == 0)
|
|
||||||
{
|
|
||||||
if (date.Date.CompareTo(SelectedDate.Date) == 0)
|
|
||||||
return "bg-info text-light";
|
|
||||||
else
|
|
||||||
return "bg-core text-dark";
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
public string MonthChipClass(int month)
|
|
||||||
{
|
|
||||||
if (month.CompareTo(SelectedDate.Month) == 0)
|
|
||||||
return "bg-info text-light";
|
|
||||||
else
|
|
||||||
return "bg-core text-dark";
|
|
||||||
}
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
SelectedDate = DateTime.Today;
|
|
||||||
SetStartStop();
|
|
||||||
loaded = true;
|
|
||||||
await base.OnInitializedAsync();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
public enum Selecting
|
|
||||||
{
|
|
||||||
Days,
|
|
||||||
Months,
|
|
||||||
Years
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user