Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

features/rewrite/datepicker #12

Merged
koma merged 11 commits from features/rewrite/datepicker into features/rewrite/main 2023-03-06 14:29:40 +00:00
Conversation 0 Commits 11 Files Changed 6 +335 -6
6 changed files with 335 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Connected.Components.Showcase.Runner/Pages/Demo.razor
View File

@ -946,7 +946,7 @@
<div class="form-outer">
<div class="form-step @NextSlide">
<div class="form-step previous">
<div class="row">
<div class="col-12">Description for step 1</div>
@* <div class="col-12 col-md-6 ">
@ -995,9 +995,13 @@
</div>
<div class="form-step @NextSlide">
<div class="form-step">
<div class="bg-info">2</div>
</div>
<div class="form-step next">
<div class="bg-info">3</div>
</div>
</div>
@ -1014,7 +1018,6 @@
<div class="dot completed"></div>
<div class="dot @NextSlide"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>

9
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -18,13 +18,18 @@
Step4
</FormWizardStep>
</FormWizard>
<DatePicker
CloseOnDateSelect=true
@bind-SelectedDate=@date>
</DatePicker>
<TextInput @bind-Value="@value"></TextInput>
<p>Selected date is @date.ToString()</p>
@value
@code {
public string value = string.Empty;
DateTime date = DateTime.Today;
}

109
src/Connected.Components/Components/DatePicker.razor Normal file
View 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="@SelectedDate.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">
@SelectedDate.Year.ToString()
</div>
<div class="text-large p-1">
@SelectedDate.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)>@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 = 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-leading-icon"></div>
<div class="chip-label">@i.ToString()</div>
<div class="chip-cta-icon"></div>
</div>
</a>
if (SelectedDate.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)>@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>
@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)>@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>
@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 ShowingDates)
{
<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>
}

212
src/Connected.Components/Components/DatePicker.razor.cs Normal file
View File

@ -0,0 +1,212 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class DatePicker
{
private bool loaded = false;
private Selecting Selecting = Selecting.Days;
private DateTime CalendarStart { get; set; } = DateTime.Today;
private DateTime CalendarEnd { get; set; } = DateTime.Today;
//private DateTime Today = DateTime.Today;
[Parameter]
public bool CloseOnDateSelect { get; set; } = false;
[Parameter]
public DateTime SelectedDate { get; set; } = DateTime.Today;
[Parameter]
public DateTime? SelectedEndDate { get; set; } = null;
[Parameter]
public EventCallback<DateTime> SelectedDateChanged { get; set; }
[Parameter]
public EventCallback<DateTime?> SelectedEndDateChanged { get; set; }
private List<DateTime> ShowingDates = new List<DateTime>();
[Parameter]
public bool UseDateRange { get; set; } = false;
[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)
{
SelectedDate = Date;
SetStartStop();
if (CloseOnDateSelect)
Shown = false;
await SelectedDateChanged.InvokeAsync(SelectedDate);
StateHasChanged();
}
public async Task SetMonth(int month)
{
SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
Selecting = Selecting.Days;
SetStartStop();
await SelectedDateChanged.InvokeAsync(SelectedDate);
StateHasChanged();
}
public async Task SetYear(int year)
{
SelectedDate = new DateTime(year, SelectedDate.Month, SelectedDate.Day);
Selecting = Selecting.Months;
SetStartStop();
await SelectedDateChanged.InvokeAsync(SelectedDate);
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 = 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 (ShowingDates is null) ShowingDates = new();
ShowingDates.Clear();
while (start.CompareTo(CalendarEnd) < 0)
{
ShowingDates.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.CompareTo(DateTime.Today) == 0) result = "b-1 b-c-info";
if (date.Month.CompareTo(SelectedDate.Month) == 0)
{
if (date.Date.CompareTo(SelectedDate.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(SelectedDate.Month) == 0)
return "bg-info text-light";
else
return "bg-core text-dark";
}
public string YearChipClass(int year)
{
if (year.CompareTo(SelectedDate.Year) == 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();
}
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
}

1
src/Connected.Components/Components/ToggleGlyphButton.razor.cs
View File

@ -75,7 +75,6 @@ public partial class ToggleGlyphButton: Button
#region Styling
/// <summary>
/// Generated class list for button based on user parameters
/// </summary>

1
src/Connected.Components/Connected.Components.csproj
View File

@ -20,6 +20,7 @@
<ItemGroup>
<None Include="compilerconfig.json" />
<None Include="Components\DatePicker.razor" />
</ItemGroup>
<ItemGroup>