DatePicker: add DisabledDays parameter (#5578)

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

@@ -1879,6 +1879,15 @@ void OnDateChanged( DateTime? date )
     };
 }";
 
+        public const string DatePickerDisabledDaysExample = @"<DatePicker TValue=""DateTime?"" DisabledDays=""@disabledDays"" />
+
+@code {
+    DayOfWeek[] disabledDays = new[]  {
+        DayOfWeek.Saturday,
+        DayOfWeek.Sunday,
+    };
+}";
+
         public const string DatePickerFormatBestPracticeExample = @"<Field>
     <FieldLabel>Start date</FieldLabel>
     <FieldBody>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/Code/DatePickerDisabledDaysExampleCode.html

@@ -0,0 +1,13 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">DatePicker</span> <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">DateTime?</span><span class="quot">&quot;</span> <span class="htmlAttributeName">DisabledDays</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>disabledDays</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    DayOfWeek[] disabledDays = <span class="keyword">new</span>[]  {
+        DayOfWeek.Saturday,
+        DayOfWeek.Sunday,
+    };
+}
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/DatePickerPage.razor

@@ -50,6 +50,16 @@
     <DocsPageSectionSource Code="DatePickerDisabledDatesExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Disable days">
+        If you’d like to make only certain days in a week unavailable for selection you can assign the <Code>DisabledDays</Code> parameter.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <DatePickerDisabledDaysExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="DatePickerDisabledDaysExample" />
+</DocsPageSection>
+
 <DocsPageSection>
     <DocsPageSectionHeader Title="Range example">
         Select a range of dates using the range calendar.
@@ -450,6 +460,9 @@
     <DocsAttributesItem Name="DisabledDates" Type="IEnumerable<TValue>" Default="null">
         List of disabled dates that the user should not be able to pick.
     </DocsAttributesItem>
+    <DocsAttributesItem Name="DisabledDays" Type="IEnumerable<DayOfWeek>" Default="null">
+        List of disabled days in a week that the user should not be able to pick.
+    </DocsAttributesItem>
     <DocsAttributesItem Name="Inline" Type="bool" Default="false">
         Display the calendar in an always-open state with the inline option.
     </DocsAttributesItem>

Documentation/Blazorise.Docs/Pages/Docs/Components/Dates/Examples/DatePickerDisabledDaysExample.razor

@@ -0,0 +1,10 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<DatePicker TValue="DateTime?" DisabledDays="@disabledDays" />
+
+@code {
+    DayOfWeek[] disabledDays = new[]  {
+        DayOfWeek.Saturday,
+        DayOfWeek.Sunday,
+    };
+}

Documentation/Blazorise.Docs/Pages/News/2024-07-15-release-notes-160.razor

@@ -107,6 +107,14 @@
     Added a new <Code>SetLoading</Code> so you're able to control the loading state of the DataGrid.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is4">
+    Disable days of week in DatePicker
+</Heading>
+
+<Paragraph>
+    We have added a new parameter to the <Code>DatePicker</Code> component, named <Code>DisabledDays</Code>. It is now possible to disable any days of a week to be picked by the user.
+</Paragraph>
+
 <Heading Size="HeadingSize.Is4">
     Automatic <Code>rel</Code> Attribute for Blazorise Link Component
 </Heading>

Source/Blazorise/Components/DatePicker/DatePicker.razor.cs

@@ -50,6 +50,7 @@ public override async Task SetParametersAsync( ParameterView parameters )
             var disabledChanged = parameters.TryGetValue( nameof( Disabled ), out bool paramDisabled ) && Disabled != paramDisabled;
             var readOnlyChanged = parameters.TryGetValue( nameof( ReadOnly ), out bool paramReadOnly ) && ReadOnly != paramReadOnly;
             var disabledDatesChanged = parameters.TryGetValue( nameof( DisabledDates ), out IEnumerable<TValue> paramDisabledDates ) && !DisabledDates.AreEqual( paramDisabledDates );
+            var disabledDaysChanged = parameters.TryGetValue( nameof( DisabledDays ), out IEnumerable<DayOfWeek> paramDisabledDays ) && !DisabledDays.AreEqual( paramDisabledDays );
             var selectionModeChanged = parameters.TryGetValue( nameof( SelectionMode ), out DateInputSelectionMode paramSelectionMode ) && !SelectionMode.IsEqual( paramSelectionMode );
             var inlineChanged = parameters.TryGetValue( nameof( Inline ), out bool paramInline ) && Inline != paramInline;
             var disableMobileChanged = parameters.TryGetValue( nameof( DisableMobile ), out bool paramDisableMobile ) && DisableMobile != paramDisableMobile;
@@ -79,6 +80,7 @@ public override async Task SetParametersAsync( ParameterView parameters )
                  || disabledChanged
                  || readOnlyChanged
                  || disabledDatesChanged
+                 || disabledDaysChanged
                  || selectionModeChanged
                  || inlineChanged
                  || disableMobileChanged
@@ -96,6 +98,7 @@ public override async Task SetParametersAsync( ParameterView parameters )
                     Disabled = new { Changed = disabledChanged, Value = paramDisabled },
                     ReadOnly = new { Changed = readOnlyChanged, Value = paramReadOnly },
                     DisabledDates = new { Changed = disabledDatesChanged, Value = paramDisabledDates?.Select( x => FormatValueAsString( new TValue[] { x } ) ) },
+                    DisabledDays = new { Changed = disabledDaysChanged, Value = paramDisabledDays?.Select( x => (int)x ) },
                     SelectionMode = new { Changed = selectionModeChanged, Value = paramSelectionMode },
                     Inline = new { Changed = inlineChanged, Value = paramInline },
                     DisableMobile = new { Changed = disableMobileChanged, Value = paramDisableMobile },
@@ -173,6 +176,7 @@ protected override async Task OnFirstAfterRenderAsync()
             Disabled,
             ReadOnly,
             DisabledDates = DisabledDates?.Select( x => FormatValueAsString( new TValue[] { x } ) ),
+            DisabledDays = DisabledDays?.Select( x => (int)x ),
             Localization = GetLocalizationObject(),
             Inline,
             DisableMobile,
@@ -617,6 +621,11 @@ protected override IReadOnlyList<TValue> InternalValue
     /// </summary>
     [Parameter] public IEnumerable<TValue> DisabledDates { get; set; }
 
+    /// <summary>
+    /// List of disabled days in a week that the user should not be able to pick.
+    /// </summary>
+    [Parameter] public IEnumerable<DayOfWeek> DisabledDays { get; set; }
+
     /// <summary>
     /// Display the calendar in an always-open state with the inline option.
     /// </summary>

Source/Blazorise/wwwroot/datePicker.js

@@ -42,6 +42,11 @@ export function initialize(dotnetAdapter, element, elementId, options) {
     const mutationObserver = new MutationObserver(mutationObserverCallback);
     mutationObserver.observe(document.getElementById(elementId), { attributes: true });
 
+    const disableDatesOptions = options.disabledDates || [];
+    const disableDaysOptions = options.disabledDays ? [function (date) {
+        return options.disabledDays && options.disabledDays.length > 0 && options.disabledDays.includes(date.getDay());
+    }] : [];
+
     const defaultOptions = {
         enableTime: options.inputMode === 1,
         dateFormat: options.inputMode === 1 ? 'Y-m-d H:i' : 'Y-m-d',
@@ -56,7 +61,7 @@ export function initialize(dotnetAdapter, element, elementId, options) {
         },
         time_24hr: options.timeAs24hr ? options.timeAs24hr : false,
         clickOpens: !(options.readOnly || false),
-        disable: options.disabledDates || [],
+        disable: disableDatesOptions.concat(disableDaysOptions),
         inline: options.inline || false,
         disableMobile: options.disableMobile || true,
         static: options.staticPicker,
@@ -287,8 +292,13 @@ export function updateOptions(element, elementId, options) {
             picker.set("clickOpens", !options.readOnly.value);
         }
 
-        if (options.disabledDates.changed) {
-            picker.set("disable", options.disabledDates.value || []);
+        if (options.disabledDates.changed || options.disabledDays.changed) {
+            const disableDatesOptions = options.disabledDates.value || [];
+            const disableDaysOptions = options.disabledDays.value ? [function (date) {
+                return options.disabledDays.value && options.disabledDays.value.length > 0 && options.disabledDays.value.includes(date.getDay());
+            }] : [];
+
+            picker.set("disable", disableDatesOptions.concat(disableDaysOptions));
         }
 
         if (options.selectionMode.changed) {