More #10

README.md

@@ -14,30 +14,45 @@ It is inspired by the very successful Javascript Date/Time picker developed by [
 The easiest way to get started is to look at the Demo project, which has samples for most of the functionality.
 
 The library can be downloaded from NuGet by searching for: BlazorNodaTimeDateTimePicker in NuGet Package Manager, or by executing the following command in the Package Manager Console:
-
-    PM> Install-Package BlazorNodaTimeDateTimePicker -Version 0.0.3
-
+````shell
+PM> Install-Package BlazorNodaTimeDateTimePicker -Version 0.0.3
+````
 Until the issue https://github.com/aspnet/Blazor/issues/1315 is resolved, insert the following line into your *_ViewImports.cshtml* file:
-
-    @addTagHelper *, BlazorNodaTimeDateTimePicker
-
+````C#
+@addTagHelper *, BlazorNodaTimeDateTimePicker
+````
 ### Inline
 
 To display a simple inline DatePicker, use the following code:
-
-    <DatePicker Inline=true>
-
+````C#
+<DatePicker Inline=true>
+````
 ![DatePicker1](/docs/images/DatePicker1.png)
 
 ### Localization
 
 Display day and month names in the specified culture:
-
-    <DatePicker Inline=true FormatProvider="@(new System.Globalization.CultureInfo("fr-FR"))"/>
-
+````C#
+<DatePicker Inline=true FormatProvider="@(new System.Globalization.CultureInfo("fr-FR"))"/>
+````
 ![DatePicker1](/docs/images/DatePicker_Localization.png)
 ![DatePicker1](/docs/images/DatePicker_Localization_Months.png)
 
+### First Day of Week
+
+Specify any weekday as the first day of the week (default is Monday):
+
+````C#
+<DatePicker Inline=true FirstDayOfWeek=IsoDayOfWeek.Thursday>
+````
+![DatePicker1](/docs/images/DatePicker_FirstDayOfWeek.png)
+
+### Disabled Days of Week
+
+Disable specific days of the week:
+
+    <DatePicker Inline=true DaysOfWeekDisabled=@(new IsoDayOfWeek[] { IsoDayOfWeek.Monday, IsoDayOfWeek.Wednesday, IsoDayOfWeek.Friday }) />
+
 ## Help Wanted!
 Get in touch if you want to collaborate!!
 

src/BlazorNodaTimeDateTimePicker.Demo/Pages/Index.cshtml

@@ -8,7 +8,7 @@
 
 <div class="d-flex flex-sm-row flex-column">
 	<div class="mr-3">
-		<DatePicker Inline=true Changed=@changed1/>
+		<DatePicker Inline=true Changed=@changed1 />
 	</div>
 	<div>
 		Selected Date: <span>@selectedDate1</span>
@@ -48,7 +48,7 @@
 	<div>
 		<p>
 			Selected Date: <span>@selectedDate3</span><br />
-			First Day of Week: 
+			First Day of Week:
 			<select bind=@firstDOW3>
 				<option value="@IsoDayOfWeek.Monday">Monday</option>
 				<option value="@IsoDayOfWeek.Tuesday">Tuesday</option>
@@ -89,7 +89,7 @@
 
 <div class="d-flex flex-sm-row flex-column">
 	<div class="mr-3">
-		<DatePicker Inline=true FormatProvider=@formatProvider5/>
+		<DatePicker Inline=true FormatProvider=@formatProvider5 />
 	</div>
 	<p>
 		<select bind=@formatProvider5String>
@@ -99,9 +99,6 @@
 	</p>
 </div>
 
-<hr />
-<h3>Selected Date</h3>
-
 <hr />
 <h3>Min. Date</h3>
 
@@ -117,6 +114,49 @@
 <hr />
 <h3>Days of Week Disabled</h3>
 
+<div class="d-flex flex-sm-row flex-column">
+	<div class="mr-3">
+		<DatePicker Inline=true DaysOfWeekDisabled=@DaysOfWeekDisabled10 />
+	</div>
+	<ul class="list-unstyled">
+		<li>
+			<label>
+				<input type="checkbox" bind=monday10 /> Monday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=tuesday10 /> Tuesday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=wednesday10 /> Wednesday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=thursday10 /> Thursday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=friday10 /> Friday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=saturday10 /> Saturday
+			</label>
+		</li>
+		<li>
+			<label>
+				<input type="checkbox" bind=sunday10 /> Sunday
+			</label>
+		</li>
+	</ul>
+</div>
+
 <hr />
 <h3>Disabled Date Intervals</h3>
 
@@ -161,20 +201,20 @@
 	}
 
 	string demo2String = @"<input type=""text"" onfocus=""@focussed"" />
-	<DatePicker Visible=""datePicker2Visible"" Selected=""selected2"" />
-
-	@functions {
-	  bool datePicker2Visible = false;
-	  void focussed2(UIFocusEventArgs e)
-	  {
-		  datePicker2Visible = true;
-	  }
-	  void selected2(LocalDate localDate)
-	  {
-	    datePicker2Visible = false;
-	    StateHasChanged();
-	  }
-	}";
+<DatePicker Visible=""datePicker2Visible"" Selected=""selected2"" />
+
+@functions {
+bool datePicker2Visible = false;
+void focussed2(UIFocusEventArgs e)
+{
+  datePicker2Visible = true;
+}
+void selected2(LocalDate localDate)
+{
+datePicker2Visible = false;
+StateHasChanged();
+}
+}";
 
 	LocalDate? selectedDate3;
 	void changed3(LocalDate? localDate)
@@ -192,4 +232,32 @@
 		set => formatProvider5 = new System.Globalization.CultureInfo(value);
 	}
 	System.Globalization.CultureInfo formatProvider5 = new System.Globalization.CultureInfo("fr-FR");
+
+	bool monday10 = true;
+	bool tuesday10 = false;
+	bool wednesday10 = true;
+	bool thursday10 = false;
+	bool friday10 = true;
+	bool saturday10 = true;
+	bool sunday10 = true;
+	IEnumerable<IsoDayOfWeek> DaysOfWeekDisabled10
+	{
+		get
+		{
+			if (!monday10)
+				yield return IsoDayOfWeek.Monday;
+			if (!tuesday10)
+				yield return IsoDayOfWeek.Tuesday;
+			if (!wednesday10)
+				yield return IsoDayOfWeek.Wednesday;
+			if (!thursday10)
+				yield return IsoDayOfWeek.Thursday;
+			if (!friday10)
+				yield return IsoDayOfWeek.Friday;
+			if (!saturday10)
+				yield return IsoDayOfWeek.Saturday;
+			if (!sunday10)
+				yield return IsoDayOfWeek.Sunday;
+		}
+	}
 }