Skip to content

Commit

Permalink
More #10
Browse files Browse the repository at this point in the history
  • Loading branch information
@nheath99
nheath99 committed Oct 6, 2018
1 parent 9bc124c commit 22da735
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 44 deletions.
21 changes: 21 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,27 @@ To display a simple inline DatePicker, use the following code:
````
![DatePicker1](/docs/images/DatePicker1.png)

## Bound to Input

To bind a DatePicker to an Input element, use straightforward Blazor event bindings:
````C#
<input type="text" onfocus=@focussed />
<DatePicker Visible=@visible Selected=@selected />

@functions {
bool visible = false;
void focussed(UIFocusEventArgs e)
{
visible = true;
}
void selected(LocalDate localDate)
{
visible = false;
StateHasChanged();
}
}
````

### Localization

Display day and month names in the specified culture:
Expand Down
4 changes: 2 additions & 2 deletions src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
Select a Date to close the DatePicker.
</p>

<input type="text" onfocus="@focussed2" value=@selectedDate2 class="form-control mb-2" />
<DatePicker Visible="datePicker2Visible" Selected="selected2" ShowClose=@true />
<input type="text" onfocus=@focussed2 value=@selectedDate2 class="form-control mb-2" placeholder="Focus to open DatePicker..." />
<DatePicker Visible=@datePicker2Visible Selected=@selected2 ShowClose=@true />

<pre>
<code class="html">
Expand Down
53 changes: 26 additions & 27 deletions src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@using NodaTime
@using NodaTime.Extensions

<DayElement potato="hello"></DayElement>
<div class="@ClassName" style="@MainStyle">
<div class="datepicker-content">
@if (State.ViewMode == ViewMode.Days)
Expand Down Expand Up @@ -28,7 +28,7 @@
@foreach (var date in Days)
{
<div class="day-wrapper">
<div class="@CssClassGenerator.Day(date, State)" onclick="@(() => DayClicked(date))">
<div class="@CssClassGenerator.Day(date, State)" onclick="@(e => DayClicked(e, date))">
@date.Day
</div>
</div>
Expand Down Expand Up @@ -65,7 +65,7 @@
@for (int i = 1; i <= 12; i++)
{
var month = i;
<div class="@CssClassGenerator.Month(month, disabledMonths[month - 1], State)" onclick="@(() => MonthClicked(month))">@MonthName(month)</div>
<div class="@CssClassGenerator.Month(month, disabledMonths[month - 1], State)" onclick="@(e => MonthClicked(e, month))">@MonthName(month)</div>
}
</div>
</div>
Expand All @@ -82,7 +82,7 @@
@for (int year = yearStart - 1; year <= yearEnd + 1; year++)
{
var y = year;
<div class="@CssClassGenerator.Year(year, disabledYears[year], State)" onclick=@(() => YearClicked(y))>
<div class="@CssClassGenerator.Year(year, disabledYears[year], State)" onclick=@(e => YearClicked(e, y))>
@year
</div>
}
Expand All @@ -102,7 +102,7 @@
@for (int decade = decadeStart - 10; decade <= decadeEnd + 10; decade += 10)
{
var d = decade;
<div class="@CssClassGenerator.Decade(decade, disabledDecades[decade], State)" onclick=@(() => DecadeClicked(d))>
<div class="@CssClassGenerator.Decade(decade, disabledDecades[decade], State)" onclick=@(e => DecadeClicked(e, d))>
@decade
</div>
}
Expand Down Expand Up @@ -151,13 +151,12 @@
get => State.SelectedDate;
set => State.SelectedDate = value;
}
[Parameter] protected LocalDate MinDate
[Parameter] protected LocalDate? MinDate
{
get => State.MinDate;
set => State.MinDate = value;
}
[Parameter]
protected LocalDate MaxDate
[Parameter] protected LocalDate? MaxDate
{
get => State.MaxDate;
set => State.MaxDate = value;
Expand Down Expand Up @@ -280,7 +279,7 @@
Days = GetDaysBetween(startOfWeekOfMonth, endOfWeekOfMonth);
}

void DayClicked(LocalDate date)
void DayClicked(UIMouseEventArgs eventArgs, LocalDate date)
{
State.Log(nameof(DayClicked));

Expand Down Expand Up @@ -372,18 +371,18 @@
}
}

void MonthClicked(int month)
void MonthClicked(UIMouseEventArgs eventArgs, int month)
{
State.Log(nameof(MonthClicked));

if (disabledMonths[month - 1] == false)
{
State.SetDisplayMonth(month);
State.PreviousViewMode();
}
}

void NextMonth()
void NextMonth(UIMouseEventArgs eventArgs)
{
State.Log(nameof(NextMonth));

Expand All @@ -392,7 +391,7 @@
OnUpdated();
}

void PreviousMonth()
void PreviousMonth(UIMouseEventArgs eventArgs)
{
State.Log(nameof(PreviousMonth));

Expand All @@ -401,7 +400,7 @@
OnUpdated();
}

void SelectMonth()
void SelectMonth(UIMouseEventArgs eventArgs)
{
State.Log(nameof(SelectMonth));

Expand Down Expand Up @@ -430,7 +429,7 @@
}
}

void YearClicked(int year)
void YearClicked(UIMouseEventArgs eventArgs, int year)
{
State.Log(nameof(YearClicked));

Expand All @@ -442,23 +441,23 @@
}
}

void NextYear()
void NextYear(UIMouseEventArgs eventArgs)
{
State.Log(nameof(NextYear));

State.NextYear();
OnUpdated();
}

void PreviousYear()
void PreviousYear(UIMouseEventArgs eventArgs)
{
State.Log(nameof(PreviousYear));

State.PreviousYear();
OnUpdated();
}

void SelectYear()
void SelectYear(UIMouseEventArgs eventArgs)
{
State.Log(nameof(SelectYear));

Expand Down Expand Up @@ -487,7 +486,7 @@
}
}

void DecadeClicked(int decade)
void DecadeClicked(UIMouseEventArgs eventArgs, int decade)
{
State.Log(nameof(DecadeClicked));

Expand All @@ -499,23 +498,23 @@
}
}

void NextDecade()
void NextDecade(UIMouseEventArgs eventArgs)
{
State.Log(nameof(NextDecade));

State.NextDecade();
OnUpdated();
}

void PreviousDecade()
void PreviousDecade(UIMouseEventArgs eventArgs)
{
State.Log(nameof(PreviousDecade));

State.PreviousDecade();
OnUpdated();
}

void SelectDecade()
void SelectDecade(UIMouseEventArgs eventArgs)
{
State.Log(nameof(SelectDecade));

Expand All @@ -527,15 +526,15 @@

#region Centuries

void NextCentury()
void NextCentury(UIMouseEventArgs eventArgs)
{
State.Log(nameof(NextCentury));

State.NextCentury();
OnUpdated();
}

void PreviousCentury()
void PreviousCentury(UIMouseEventArgs eventArgs)
{
State.Log(nameof(PreviousCentury));

Expand All @@ -545,21 +544,21 @@

#endregion

void TodayClicked()
void TodayClicked(UIMouseEventArgs eventArgs)
{
State.Log(nameof(TodayClicked));

State.SetSelectedDateToday();
}

void ClearClicked()
void ClearClicked(UIMouseEventArgs eventArgs)
{
State.Log(nameof(ClearClicked));

State.ClearSelectedDate();
}

void CloseClicked()
void CloseClicked(UIMouseEventArgs eventArgs)
{
State.Log(nameof(CloseClicked));

Expand Down
36 changes: 21 additions & 15 deletions src/BlazorNodaTimeDateTimePicker/DatePickerState.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ public DatePickerState()
internal bool Inline { get; set; }
internal IsoDayOfWeek FirstDayOfWeek { get; set; } = IsoDayOfWeek.Monday;

internal LocalDate MinDate { get; set; } = LocalDate.MinIsoValue;
internal LocalDate MaxDate { get; set; } = LocalDate.MaxIsoValue;
internal LocalDate? MinDate { get; set; }
internal LocalDate? MaxDate { get; set; }
internal IEnumerable<LocalDate> DisabledDates { get; set; }
internal IEnumerable<LocalDate> EnabledDates { get; set; }
internal IEnumerable<IsoDayOfWeek> DaysOfWeekDisabled { get; set; }
Expand Down Expand Up @@ -311,14 +311,20 @@ internal bool IsMonthDisabled(int month, int year)
}

// If Month/Year is before MinDate, month is disabled
if ((MinDate.Year > year) ||
(MinDate.Year == year && MinDate.Month > month))
return true;
if (MinDate.HasValue)
{
if ((MinDate.Value.Year > year) ||
(MinDate.Value.Year == year && MinDate.Value.Month > month))
return true;
}

// If Month/Year is after MaxDate, month is disabled
if ((MaxDate.Year < year) ||
(MaxDate.Year == year && MinDate.Month < month))
return true;
if (MaxDate.HasValue)
{
if ((MaxDate.Value.Year < year) ||
(MaxDate.Value.Year == year && MinDate.Value.Month < month))
return true;
}

// If EnabledDates contains any value falling within Month/Date, month is enabled
if (EnabledDates != null && EnabledDates.Any(x => x.Year == year && x.Month == month))
Expand All @@ -335,11 +341,11 @@ internal bool IsYearDisabled(int year)
return false;

// If Year is before MinDate, year is disabled
if (MinDate.Year > year)
return true;
if (MinDate.HasValue && MinDate.Value.Year > year)
return true;

// If Year is after MaxDate, year is disabled
if (MaxDate.Year < year)
if (MaxDate.HasValue && MaxDate.Value.Year < year)
return true;

return false;
Expand All @@ -352,13 +358,13 @@ internal bool IsDecadeDisabled(int decade)
if (DaysEnabledFunction != null)
return false;

var minDateDecade = MinDate.Year.Decade();
var maxDateDecade = MaxDate.Year.Decade();
var minDateDecade = MinDate?.Year.Decade();
var maxDateDecade = MaxDate?.Year.Decade();

if (minDateDecade > decade)
if (minDateDecade.HasValue && minDateDecade > decade)
return true;

if (maxDateDecade < decade)
if (maxDateDecade.HasValue && maxDateDecade < decade)
return true;

return false;
Expand Down

0 comments on commit 22da735

Please sign in to comment.