Support DisabledDateFunc in FluentDatePicker (#905)

microsoft · Oct 30, 2023 · 8ee0a81 · 8ee0a81
1 parent 6bf40cd
commit 8ee0a81
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor
@@ -29,6 +29,9 @@
                           Class="fluent-datepicker-popup"
                           Style="@($"z-index: {ZIndex.DatePickerPopup}; padding: 10px;")">
         <FluentCalendar Culture="@Culture"
+                        DayFormat="@DayFormat"
+                        DisabledDateFunc="@DisabledDateFunc"
+                        DisabledSelectable="@DisabledSelectable"
                         Value="@Value"
                         ValueChanged="@OnSelectedDateAsync" />
     </FluentAnchoredRegion>

diff --git a/tests/Core/DateTime/FluentDatePickerTests.FluentCalendar_DisabledDate.verified.html b/tests/Core/DateTime/FluentDatePickerTests.FluentCalendar_DisabledDate.verified.html
@@ -0,0 +1,82 @@
+<div class="fluent-calendar" >
+  <div class="title" part="title" aria-label="February 2022" >
+    <span part="month" class="month" >February 2022</span>
+    <span part="move" class="change-month" >
+      <div class="previous-month" title="January"  >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--neutral-fill-strong-focus)" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4.2 10.73a.75.75 0 001.1 1.04l5.95-6.25v14.73a.75.75 0 001.5 0V5.52l5.95 6.25a.75.75 0 001.1-1.04l-7.08-7.42a1 1 0 00-1.44 0L4.2 10.73z"></path>
+        </svg>
+      </div>
+      <div title="March" class="next-month"  >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="var(--neutral-fill-strong-focus)" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19.8 13.27a.75.75 0 00-1.1-1.04l-5.95 6.25V3.75a.75.75 0 10-1.5 0v14.73L5.3 12.23a.75.75 0 10-1.1 1.04l7.08 7.42a1 1 0 001.44 0l7.07-7.42z"></path>
+        </svg>
+      </div>
+    </span>
+  </div>
+  <div class="days" part="days" >
+    <div class="week-days" part="week-days" >
+      <div class="week-day" part="week-day" title="Sunday" abbr="Sunday" >S</div>
+      <div class="week-day" part="week-day" title="Monday" abbr="Monday" >M</div>
+      <div class="week-day" part="week-day" title="Tuesday" abbr="Tuesday" >T</div>
+      <div class="week-day" part="week-day" title="Wednesday" abbr="Wednesday" >W</div>
+      <div class="week-day" part="week-day" title="Thursday" abbr="Thursday" >T</div>
+      <div class="week-day" part="week-day" title="Friday" abbr="Friday" >F</div>
+      <div class="week-day" part="week-day" title="Saturday" abbr="Saturday" >S</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" inactive="" aria-label="January 30" value="2022-01-30"  >30</div>
+      <div part="day" class="day" inactive="" aria-label="January 31" value="2022-01-31"  >31</div>
+      <div part="day" class="day" aria-label="February 1" value="2022-02-01"  >1</div>
+      <div part="day" class="day" aria-label="February 2" value="2022-02-02"  >2</div>
+      <div part="day" class="day" aria-label="February 3" value="2022-02-03"  >3</div>
+      <div part="day" class="day" aria-label="February 4" value="2022-02-04"  >4</div>
+      <div part="day" class="day" aria-label="February 5" value="2022-02-05"  >5</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" aria-label="February 6" value="2022-02-06"  >6</div>
+      <div part="day" class="day" aria-label="February 7" value="2022-02-07"  >7</div>
+      <div part="day" class="day" aria-label="February 8" value="2022-02-08"  >8</div>
+      <div part="day" class="day" aria-label="February 9" value="2022-02-09"  >9</div>
+      <div part="day" class="day" aria-label="February 10" value="2022-02-10"  >10</div>
+      <div part="day" class="day" aria-label="February 11" value="2022-02-11"  >11</div>
+      <div part="day" class="day" aria-label="February 12" value="2022-02-12"  >12</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" aria-label="February 13" value="2022-02-13"  >13</div>
+      <div part="day" class="day" disabled="" aria-label="February 14" value="2022-02-14"  >14</div>
+      <div part="day" class="day" selected="" aria-label="February 15" value="2022-02-15"  >15</div>
+      <div part="day" class="day" aria-label="February 16" value="2022-02-16"  >16</div>
+      <div part="day" class="day" aria-label="February 17" value="2022-02-17"  >17</div>
+      <div part="day" class="day" aria-label="February 18" value="2022-02-18"  >18</div>
+      <div part="day" class="day" aria-label="February 19" value="2022-02-19"  >19</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" aria-label="February 20" value="2022-02-20"  >20</div>
+      <div part="day" class="day" aria-label="February 21" value="2022-02-21"  >21</div>
+      <div part="day" class="day" aria-label="February 22" value="2022-02-22"  >22</div>
+      <div part="day" class="day" aria-label="February 23" value="2022-02-23"  >23</div>
+      <div part="day" class="day" aria-label="February 24" value="2022-02-24"  >24</div>
+      <div part="day" class="day" aria-label="February 25" value="2022-02-25"  >25</div>
+      <div part="day" class="day" aria-label="February 26" value="2022-02-26"  >26</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" aria-label="February 27" value="2022-02-27"  >27</div>
+      <div part="day" class="day" aria-label="February 28" value="2022-02-28"  >28</div>
+      <div part="day" class="day" inactive="" aria-label="March 1" value="2022-03-01"  >1</div>
+      <div part="day" class="day" inactive="" aria-label="March 2" value="2022-03-02"  >2</div>
+      <div part="day" class="day" inactive="" aria-label="March 3" value="2022-03-03"  >3</div>
+      <div part="day" class="day" inactive="" aria-label="March 4" value="2022-03-04"  >4</div>
+      <div part="day" class="day" inactive="" aria-label="March 5" value="2022-03-05"  >5</div>
+    </div>
+    <div class="week" >
+      <div part="day" class="day" inactive="" aria-label="March 6" value="2022-03-06"  >6</div>
+      <div part="day" class="day" inactive="" aria-label="March 7" value="2022-03-07"  >7</div>
+      <div part="day" class="day" inactive="" aria-label="March 8" value="2022-03-08"  >8</div>
+      <div part="day" class="day" inactive="" aria-label="March 9" value="2022-03-09"  >9</div>
+      <div part="day" class="day" inactive="" aria-label="March 10" value="2022-03-10"  >10</div>
+      <div part="day" class="day" inactive="" aria-label="March 11" value="2022-03-11"  >11</div>
+      <div part="day" class="day" inactive="" aria-label="March 12" value="2022-03-12"  >12</div>
+    </div>
+  </div>
+</div>
diff --git a/tests/Core/DateTime/FluentDatePickerTests.cs b/tests/Core/DateTime/FluentDatePickerTests.cs
@@ -114,4 +114,30 @@ public void FluentDatePicker_WriteInvalidDateInTextField()
         // Assert
         Assert.Null(picker.Instance.Value);
     }
+
+    [Fact]
+    public void FluentCalendar_DisabledDate()
+    {
+        // Arrange
+        using var ctx = new TestContext();
+
+        // Act
+        var picker = ctx.RenderComponent<FluentDatePicker>(parameters =>
+        {
+            parameters.Add(p => p.Culture, CultureInfo.GetCultureInfo("en-US"));
+            parameters.Add(p => p.Value, new System.DateTime(2022, 02, 15));
+            parameters.Add(p => p.DisabledDateFunc, (date) => date.Day == 14);
+        });
+
+        var textfield = picker.Find("fluent-text-field");
+
+        // Click
+        textfield.Click();
+
+        // Assert
+        var calendar = picker.FindComponent<FluentCalendar>();
+
+        // Assert
+        calendar.Verify();
+    }
 }