features/rewrite/grid #13
@ -949,11 +949,7 @@
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<<<<<<< HEAD
|
||||
<div class="modal fade @ModalShown" tabindex="-1">
|
||||
=======
|
||||
<div class="modal fade " tabindex="-1"> <!--@NavClosed-->
|
||||
>>>>>>> features/rewrite/styles
|
||||
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
</Grid>
|
||||
|
||||
<p>Izbran datum je: @date</p>
|
||||
=======
|
||||
|
||||
<FormWizard Id="Wizard1">
|
||||
<FormWizardStep Name="Step1">
|
||||
Step1
|
||||
@ -43,7 +43,6 @@ CloseOnDateSelect=true
|
||||
</DatePicker>
|
||||
|
||||
<p>Selected date is @date.ToString()</p>
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
|
||||
@code {
|
||||
DateTime date = DateTime.Today;
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
@using System.Globalization;
|
||||
|
||||
|
||||
|
||||
@if (loaded)
|
||||
{
|
||||
<div id="picker">
|
||||
|
||||
<!-- 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> *@
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<input type="text" value="@SelectedDate.ToString(Format)" required="required" /><span class="highlight"></span><span class="bar"></span>
|
||||
<label class="label-animated">Select date</label>
|
||||
@ -17,7 +10,7 @@
|
||||
<div class="input-error-text">At least 6 characters required</div>
|
||||
<span class="input-glyph-wraper">
|
||||
<span class="input-glyph">
|
||||
<span class="input-glyph button" @onclick="(() => Shown = !Shown)">
|
||||
<span class="input-glyph button" @onclick="TogglePicker">
|
||||
<Glyph SVG="@Icons.Material.Filled.CalendarMonth" class="icon-root svg-icon" />
|
||||
</span>
|
||||
<span class="input-glyph error">
|
||||
@ -29,232 +22,101 @@
|
||||
|
||||
|
||||
@if (Shown)
|
||||
{
|
||||
{
|
||||
<!-- DatePicker header -->
|
||||
<div class="picker-container">
|
||||
<div id="picker-header">
|
||||
@* <div class="text-medium">
|
||||
@SelectedDate.Year.ToString()
|
||||
</div> *@
|
||||
<div class="picker-header-label">Select date</div>
|
||||
<div class="picker-header-title">
|
||||
@SelectedDate.ToString("ddd, " + Format)
|
||||
<div id="picker-header">
|
||||
|
||||
<div class="picker-header-label">Select date</div>
|
||||
<div class="picker-header-title">
|
||||
@SelectedDate.ToString("ddd, " + Format)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picker-divider"></div>
|
||||
<!-- DatePicker body -->
|
||||
<div id="picker-body">
|
||||
@switch (Selecting)
|
||||
{
|
||||
case Selecting.Years:
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<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="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++)
|
||||
<div class="picker-divider"></div>
|
||||
<!-- DatePicker body -->
|
||||
<div id="picker-body">
|
||||
@switch (Selecting)
|
||||
{
|
||||
case Selecting.Years:
|
||||
{
|
||||
int y = i;
|
||||
<a href="#" @onclick="@(()=>SetYear(y))">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
if (SelectedDate.Year - i % 3 == 0)
|
||||
=======
|
||||
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
{
|
||||
int y = i;
|
||||
@* <a href="#" @onclick="@(()=>SetYear(y))">
|
||||
<div class="chip-group-content d-inline-flex bg-core py-1 m-1 b-1 b-r-3 text-dark" 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 />
|
||||
} *@
|
||||
<button @onclick="@(()=>SetYear(y))" type="button" class="item">@i.ToString()</button>
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
case Selecting.Months:
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<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="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))" @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>
|
||||
<div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
|
||||
<div class="chip-cta-icon"></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
if (i % 3 == 0)
|
||||
=======
|
||||
|
||||
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
{
|
||||
int m = i;
|
||||
@* <a href="#" @onclick="@(()=>SetMonth(m))">
|
||||
|
||||
<div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) py-1 m-1 b-1 b-r-3 text-dark" 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 />
|
||||
} *@
|
||||
<button @onclick="@(()=>SetMonth(m))" type="button" class="item">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
|
||||
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
case (Selecting.Days):
|
||||
{
|
||||
<<<<<<< HEAD
|
||||
<div class="@NavBarClass" style="@NavBarStyle">
|
||||
<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="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 class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" />
|
||||
</button>
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
</div>
|
||||
<div class="picker-grid-col-7 gap-3">
|
||||
@for (int i = 0; i < 7; i++)
|
||||
|
||||
{
|
||||
|
||||
@* <div class="@DayNamesRowClass">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div> *@
|
||||
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
=======
|
||||
|
||||
@foreach (var Date in ShowingDates)
|
||||
{
|
||||
<button class="item @DateChipStyle(Date)" @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> *@
|
||||
|
||||
|
||||
@Date.Day.ToString()
|
||||
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</button>
|
||||
@if (CalendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = SelectedDate.Year - 7; i < SelectedDate.Year + 8; i++)
|
||||
{
|
||||
@* <br /> *@
|
||||
int y = i;
|
||||
<button @onclick="@(()=>SetYear(y))" type="button" class="item @YearChipClass(y)">@i.ToString()</button>
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
case Selecting.Months:
|
||||
{
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</button>
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-grid-col-3 gap-3">
|
||||
@for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
|
||||
{
|
||||
int m = i;
|
||||
<button @onclick="@(()=>SetMonth(m))" type="button" class="item @MonthChipClass(i)">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</button>
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
case (Selecting.Days):
|
||||
{
|
||||
<div class="picker-menu">
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowLeft" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick(false))" />
|
||||
</button>
|
||||
<div class="text-semibold" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM yyyy")</div>
|
||||
<button class="btn btn-icon-alt ">
|
||||
<Glyph SVG="@Icons.Material.Filled.KeyboardArrowRight" class="icon-root svg-icon icon-size-md" Click="(()=>NavBarClick())" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="picker-grid-col-7 gap-3">
|
||||
@for (int i = 0; i < 7; i++)
|
||||
|
||||
{
|
||||
<div class="days">@CalendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
|
||||
}
|
||||
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
</div>
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
@if (ShowBottomBar)
|
||||
{
|
||||
<!-- 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>
|
||||
<!-- Bottom bar -->
|
||||
<div class="btn-content justify-flex-end my-0">
|
||||
<button type="button" class="btn btn-sm btn-secondary">Cancel</button>
|
||||
<button type="button" class="btn btn-sm btn-core">OK</button>
|
||||
@foreach (var Date in ShowingDates)
|
||||
{
|
||||
<button class="item @DateChipClass(Date)" @onclick="@(()=>SetDate(Date))">
|
||||
@Date.Day.ToString()
|
||||
</button>
|
||||
CalendarStart = CalendarStart.AddDays(1);
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<!-- Bottom bar -->
|
||||
<div class="btn-content justify-flex-end my-0">
|
||||
<button type="button" class="btn btn-sm btn-secondary" @onclick="(()=>ClosePicker())">Cancel</button>
|
||||
<button type="button" class="btn btn-sm btn-core" @onclick="(()=>ClosePicker(false))">OK</button>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
>>>>>>> f35b855ba7f7efe1991867b4d60a2a2959005c60
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,8 @@ public partial class DatePicker
|
||||
[Parameter]
|
||||
public DateTime SelectedDate { get; set; } = DateTime.Today;
|
||||
|
||||
private DateTime _InitialDate { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public DateTime? SelectedEndDate { get; set; } = null;
|
||||
|
||||
@ -53,14 +55,13 @@ public partial class DatePicker
|
||||
}
|
||||
private bool Shown { get; set; } = false;
|
||||
|
||||
public async Task SetDate(DateTime Date, bool HideOnSet=false)
|
||||
public async Task SetDate(DateTime Date)
|
||||
{
|
||||
SelectedDate = Date;
|
||||
SetStartStop();
|
||||
if (CloseOnDateSelect)
|
||||
Shown = false;
|
||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||
if (HideOnSet) Shown = false;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
@ -82,48 +83,6 @@ public partial class DatePicker
|
||||
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;
|
||||
@ -154,7 +113,7 @@ public partial class DatePicker
|
||||
}
|
||||
}
|
||||
|
||||
public string DateChipStyle(DateTime date)
|
||||
public string DateChipClass(DateTime date)
|
||||
{
|
||||
string result = "";
|
||||
if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "d-none";
|
||||
@ -188,6 +147,7 @@ public partial class DatePicker
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
SelectedDate = DateTime.Today;
|
||||
_InitialDate=SelectedDate;
|
||||
SetStartStop();
|
||||
loaded = true;
|
||||
await base.OnInitializedAsync();
|
||||
@ -219,6 +179,20 @@ public partial class DatePicker
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ClosePicker(bool resetDate=true)
|
||||
{
|
||||
if (resetDate)
|
||||
SelectedDate=_InitialDate;
|
||||
Shown = false;
|
||||
await SelectedDateChanged.InvokeAsync(SelectedDate);
|
||||
}
|
||||
|
||||
private void TogglePicker()
|
||||
{
|
||||
_InitialDate=SelectedDate;
|
||||
Shown = !Shown;
|
||||
}
|
||||
|
||||
private async Task NavBarClick(bool forward = true)
|
||||
{
|
||||
int multiplier = 1;
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
|
||||
<div class="btn-box text-right my-5 d-flex justify-space-between">
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished">Cancel</button>
|
||||
<button type="button" href="#" class="btn btn-secondary" aria-pressed="true" disabled="@WizardFinished" @onclick="CancelClick">Cancel</button>
|
||||
<div>
|
||||
<button type="button" @onclick="PreviousSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished"><i class='bx bx-chevron-left'></i>@PreviousBtnText</button>
|
||||
<button type="button" @onclick="NextSlide" class="btn btn-core mr-2" aria-pressed="true" disabled="@WizardFinished">@NextBtnText<i class='bx bx-chevron-right'></i></button>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user