diff --git a/README.md b/README.md index cdbf590..36fb408 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,10 @@ Until the issue https://github.com/aspnet/Blazor/issues/1315 is resolved, insert ````C# @addTagHelper *, BlazorNodaTimeDateTimePicker ```` +When using the component, you must add a using statement for NodaTime: +```` +@using NodaTime +```` ### Inline To display a simple inline DatePicker, use the following code: diff --git a/src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml b/src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml index ff53e00..2d1052f 100644 --- a/src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml +++ b/src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml @@ -38,7 +38,7 @@

- +
Selected Date: @selectedDate1 diff --git a/src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml b/src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml index ebc5cb3..9f2d83e 100644 --- a/src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml +++ b/src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml @@ -158,8 +158,11 @@ [Parameter] protected string CloseText { get; set; } = "Close"; /// The to display on initialization. Defaults to . [Parameter] protected ViewMode InitialViewMode { get; set; } = ViewMode.Days; + /// The granularity of date selection. Defaults to . + [Parameter] protected ViewMode MinimumSelectionMode { get; set; } = ViewMode.Days; /// Whether to show the week number in = . Default is [Parameter] protected bool DisplayWeekNumber { get; set; } = false; + /// The text to display on the Week number heading, if is set to true [Parameter] protected string WeekAbbreviation { get; set; } = "Wk"; /// The content to display in the Previous button. Defaults to the Less Than character (<) [Parameter] protected RenderFragment PrevContent { get; set; } @@ -301,7 +304,7 @@ { State.Log(nameof(OnParametersSet)); - State.ViewMode = InitialViewMode; + State.ViewMode = InitialViewMode < MinimumSelectionMode ? MinimumSelectionMode : InitialViewMode; switch (State.ViewMode) { @@ -353,30 +356,6 @@ Cleared?.Invoke(); } - #region Days - - void RenderDays() - { - State.Log(nameof(RenderDays)); - - var startOfWeekOfMonth = State.MonthToDisplay.StartOfWeek(FirstDayOfWeek); - - var endOfMonth = State.MonthToDisplay.EndOfMonth(); - var endOfWeekOfMonth = endOfMonth.EndOfWeek(FirstDayOfWeek); - - Days = GetDaysBetween(startOfWeekOfMonth, endOfWeekOfMonth); - } - - void DayClicked(UIMouseEventArgs eventArgs, LocalDate date) - { - State.Log(nameof(DayClicked)); - - if (!State.IsDayDisabled(date)) - State.SetSelectedDate(date); - } - - #endregion - static IEnumerable GetDaysBetween(LocalDate start, LocalDate end) { if (start > end) @@ -445,6 +424,30 @@ string CenturyText => State.MonthToDisplay.GetCenturyString(); + #region Days + + void RenderDays() + { + State.Log(nameof(RenderDays)); + + var startOfWeekOfMonth = State.MonthToDisplay.StartOfWeek(FirstDayOfWeek); + + var endOfMonth = State.MonthToDisplay.EndOfMonth(); + var endOfWeekOfMonth = endOfMonth.EndOfWeek(FirstDayOfWeek); + + Days = GetDaysBetween(startOfWeekOfMonth, endOfWeekOfMonth); + } + + void DayClicked(UIMouseEventArgs eventArgs, LocalDate date) + { + State.Log(nameof(DayClicked)); + + if (!State.IsDayDisabled(date)) + State.SetSelectedDate(date); + } + + #endregion + #region Months bool[] disabledMonths; @@ -461,6 +464,9 @@ } } + /// Callback for when a Month has been selected. + /// + /// void MonthClicked(UIMouseEventArgs eventArgs, int month) { State.Log(nameof(MonthClicked)); @@ -468,10 +474,19 @@ if (disabledMonths[month - 1] == false) { State.SetDisplayMonth(month); - State.PreviousViewMode(); + if (MinimumSelectionMode == ViewMode.Months) + { + State.SetSelectedMonth(month); + } + else + { + State.PreviousViewMode(); + } } } + /// Increments the MonthToDisplay value by one month. + /// void NextMonth(UIMouseEventArgs eventArgs) { State.Log(nameof(NextMonth)); @@ -481,6 +496,8 @@ OnUpdated(); } + /// Decrements the MonthToDisplay value by one month. + /// void PreviousMonth(UIMouseEventArgs eventArgs) { State.Log(nameof(PreviousMonth)); @@ -490,6 +507,8 @@ OnUpdated(); } + /// Displays the Month selection mode, i.e. a list of months of the year. + /// void SelectMonth(UIMouseEventArgs eventArgs) { State.Log(nameof(SelectMonth)); @@ -526,8 +545,15 @@ if (disabledYears[year] == false) { State.SetDisplayYear(year); - RenderMonths(); - State.PreviousViewMode(); + if (MinimumSelectionMode == ViewMode.Years) + { + State.SetSelectedYear(year); + } + else + { + RenderMonths(); + State.PreviousViewMode(); + } } } @@ -583,8 +609,15 @@ if (disabledDecades[decade] == false) { State.SetDisplayYear(decade); - RenderYears(); - State.PreviousViewMode(); + if (MinimumSelectionMode == ViewMode.Decades) + { + State.SetSelectedYear(decade); + } + else + { + RenderYears(); + State.PreviousViewMode(); + } } } diff --git a/src/BlazorNodaTimeDateTimePicker/DatePickerState.cs b/src/BlazorNodaTimeDateTimePicker/DatePickerState.cs index 74e841f..d9fc7af 100644 --- a/src/BlazorNodaTimeDateTimePicker/DatePickerState.cs +++ b/src/BlazorNodaTimeDateTimePicker/DatePickerState.cs @@ -96,6 +96,32 @@ internal void SetSelectedDate(LocalDate selectedDate) MonthToDisplayChanged(); } + internal void SetSelectedMonth(int month) + { + Log(nameof(SetSelectedMonth)); + + var selectedDate = new LocalDate(MonthToDisplay.Year, month, 1); + + SelectedDate = selectedDate; + MonthToDisplay = selectedDate; + + StateChanged(); + SelectedDateChanged(); + } + + internal void SetSelectedYear(int year) + { + Log(nameof(SetSelectedMonth)); + + var selectedDate = new LocalDate(year, 1, 1); + + SelectedDate = selectedDate; + MonthToDisplay = selectedDate; + + StateChanged(); + SelectedDateChanged(); + } + internal void SetSelectedDateToday() { Log(nameof(SetSelectedDateToday)); @@ -238,7 +264,7 @@ internal void NextCentury() } internal void PreviousCentury() - { + { Log(nameof(PreviousCentury)); MonthToDisplay = MonthToDisplay.PlusYears(-100); @@ -257,7 +283,7 @@ internal bool IsDayDisabled(LocalDate date) if (EnabledDates != null) { if (EnabledDates.Contains(date) == false) - { + { return true; } } diff --git a/src/BlazorNodaTimeDateTimePicker/Enums.cs b/src/BlazorNodaTimeDateTimePicker/Enums.cs index 0953750..22f62ab 100644 --- a/src/BlazorNodaTimeDateTimePicker/Enums.cs +++ b/src/BlazorNodaTimeDateTimePicker/Enums.cs @@ -1,18 +1,18 @@ namespace BlazorNodaTimeDateTimePicker { - /// - /// Represents the type of view to display. - /// + /// Represents the type of view to display. public enum ViewMode { - /// /// Displays days of the month/// - Days = 0, - /// /// Displays the months in a single year/// - Months = 1, - /// /// Displays the years of a single decade/// - Years = 2, - /// /// Displays the decades of a single century/// - Decades = 3 + /// Displays days of the month + Days, + /// Displays weeks of the month + Weeks, + /// Displays the months in a single year + Months, + /// Displays the years of a single decade + Years, + /// Displays the decades of a single century + Decades } internal enum TimeViewMode diff --git a/src/BlazorNodaTimeDateTimePicker/TimePicker.cshtml b/src/BlazorNodaTimeDateTimePicker/TimePicker.cshtml index 6a44ed4..7751009 100644 --- a/src/BlazorNodaTimeDateTimePicker/TimePicker.cshtml +++ b/src/BlazorNodaTimeDateTimePicker/TimePicker.cshtml @@ -75,7 +75,7 @@
@functions { - TimePickerState State = new TimePickerState(); + TimePickerState State = new TimePickerState(); /// Any CSS classes to be applied to the wrapper element. [Parameter] protected string Class { get; set; } /// Any CSS styles to be applied to the wrapper element.