More to #37

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:

src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml

@@ -38,7 +38,7 @@
 </p>
 <div class="d-flex flex-sm-row flex-column">
 	<div class="mr-3 order-1 order-sm-0">
-		<DatePicker Inline=true SelectedDateChanged=changed1 />
+		<DatePicker Inline=true SelectedDateChanged=changed1 MinimumSelectionMode=ViewMode.Decades />
 	</div>
 	<div class="order-0 order-sm-1">
 		Selected Date: <span>@selectedDate1</span>

src/BlazorNodaTimeDateTimePicker/DatePicker.cshtml

@@ -158,8 +158,11 @@
 	[Parameter] protected string CloseText { get; set; } = "Close";
 	/// <summary>The <see cref="ViewMode"/> to display on initialization. Defaults to <see cref="ViewMode.Days"/>.</summary>
 	[Parameter] protected ViewMode InitialViewMode { get; set; } = ViewMode.Days;
+	/// <summary>The granularity of date selection. Defaults to <see cref="ViewMode.Days"/>.</summary>
+	[Parameter] protected ViewMode MinimumSelectionMode { get; set; } = ViewMode.Days;
 	/// <summary>Whether to show the week number in <see cref="ViewMode"/> = <see cref="ViewMode.Days"/>. Default is <see cref="false"/></summary>
 	[Parameter] protected bool DisplayWeekNumber { get; set; } = false;
+	/// <summary>The text to display on the Week number heading, if <see cref="DisplayWeekNumber"/> is set to true</summary>
 	[Parameter] protected string WeekAbbreviation { get; set; } = "Wk";
 	/// <summary>The content to display in the Previous button. Defaults to the Less Than character (&lt;)</summary>
 	[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<LocalDate> 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,17 +464,29 @@
 		}
 	}
 
+	/// <summary>Callback for when a Month has been selected.</summary>
+	/// <param name="eventArgs"></param>
+	/// <param name="month"></param>
 	void MonthClicked(UIMouseEventArgs eventArgs, int month)
 	{
 		State.Log(nameof(MonthClicked));
 
 		if (disabledMonths[month - 1] == false)
 		{
 			State.SetDisplayMonth(month);
-			State.PreviousViewMode();
+			if (MinimumSelectionMode == ViewMode.Months)
+			{
+				State.SetSelectedMonth(month);
+			}
+			else
+			{
+				State.PreviousViewMode();
+			}
 		}
 	}
 
+	/// <summary>Increments the MonthToDisplay value by one month.</summary>
+	/// <param name="eventArgs"></param>
 	void NextMonth(UIMouseEventArgs eventArgs)
 	{
 		State.Log(nameof(NextMonth));
@@ -481,6 +496,8 @@
 		OnUpdated();
 	}
 
+	/// <summary>Decrements the MonthToDisplay value by one month.</summary>
+	/// <param name="eventArgs"></param>
 	void PreviousMonth(UIMouseEventArgs eventArgs)
 	{
 		State.Log(nameof(PreviousMonth));
@@ -490,6 +507,8 @@
 		OnUpdated();
 	}
 
+	/// <summary>Displays the Month selection mode, i.e. a list of months of the year.</summary>
+	/// <param name="eventArgs"></param>
 	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();
+			}
 		}
 	}
 

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;
 					}
 				}

src/BlazorNodaTimeDateTimePicker/Enums.cs

@@ -1,18 +1,18 @@
 namespace BlazorNodaTimeDateTimePicker
 {
-	/// <summary>
-	/// Represents the type of view to display.
-	/// </summary>
+	/// <summary>Represents the type of view to display.</summary>
 	public enum ViewMode
 	{
-		/// <summary>/// Displays days of the month/// </summary>
-		Days = 0,
-		/// <summary>/// Displays the months in a single year/// </summary>
-		Months = 1,
-		/// <summary>/// Displays the years of a single decade/// </summary>		
-		Years = 2,
-		/// <summary>/// Displays the decades of a single century/// </summary>
-		Decades = 3
+		/// <summary>Displays days of the month</summary>
+		Days,
+		/// <summary>Displays weeks of the month</summary>
+		Weeks,
+		/// <summary>Displays the months in a single year</summary>
+		Months,
+		/// <summary>Displays the years of a single decade</summary>		
+		Years,
+		/// <summary>Displays the decades of a single century</summary>
+		Decades
 	}
 
 	internal enum TimeViewMode

src/BlazorNodaTimeDateTimePicker/TimePicker.cshtml

@@ -75,7 +75,7 @@
 </div>
 
 @functions {
-		TimePickerState State = new TimePickerState();
+	TimePickerState State = new TimePickerState();
 	/// <summary>Any CSS classes to be applied to the wrapper element.</summary>
 	[Parameter] protected string Class { get; set; }
 	/// <summary>Any CSS styles to be applied to the wrapper element.</summary>