[DatePicker] Added OnDoubleClick event and DoubleClickToDate parameter

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -2693,6 +2693,16 @@
             Fired when the display month changes.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.OnDoubleClick">
+            <summary>
+            Command executed when the user double-clicks on the date picker.
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.DoubleClickToDate">
+            <summary>
+            Gets or sets a value which will be set when double-clicking on the text field of date picker.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker.StyleValue">
             <summary />
         </member>

examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor

@@ -1,19 +1,32 @@
-<div style="display: flex; flex-direction:row;  ">
-    <div style="margin-right: 10px;">
+<p>
+    <FluentCheckbox Label="Double-click the text field to set Today's date" @bind-value="@DoubleClickToToday" />
+</p>
+<div style="display: flex; flex-direction:row; gap:10px; ">
+    <div>
         <FluentDatePicker Label="Meeting date" @bind-Value="@SelectedValue" ReadOnly />
     </div>
-    <div style="margin-right: 10px;">
-        <FluentDatePicker Label="Days view" AriaLabel="To" @bind-Value="@SelectedValue" />
+    <div>
+        <FluentDatePicker Label="Days view" AriaLabel="To" @bind-Value="@SelectedValue" DoubleClickToDate="@DoubleClickToDate" />
     </div>
-    <div style="margin-right: 10px;">
-        <FluentDatePicker Label="Months view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Months" />
+    <div>
+        <FluentDatePicker Label="Months view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Months" DoubleClickToDate="@DoubleClickToDate" />
     </div>
     <div>
-        <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" />
+        <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" DoubleClickToDate="@DoubleClickToDate" />
     </div>
 </div>
-<p>Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))</p>
+<p>
+    Selected Date: @(SelectedValue?.ToString("yyyy-MM-dd"))
+</p>
+
 @code
 {
     private DateTime? SelectedValue = DateTime.Today.AddDays(-2);
+    private DateTime? DoubleClickToDate = null;
+
+    private bool DoubleClickToToday
+    {
+        get => DoubleClickToDate.HasValue;
+        set => DoubleClickToDate = value ? DateTime.Today : null;
+    }
 }

src/Core/Components/DateTime/FluentDatePicker.razor

@@ -11,6 +11,7 @@
                  Appearance="@Appearance"
                  @bind-Value="@CurrentValueAsString"
                  @onclick="@OnCalendarOpenHandlerAsync"
+                 @ondblclick="@OnDoubleClickHandlerAsync"
                  ReadOnly="@ReadOnly"
                  Disabled="@Disabled"
                  Required="@Required"

src/Core/Components/DateTime/FluentDatePicker.razor.cs

@@ -50,6 +50,18 @@ protected override string? ClassValue
     [Parameter]
     public virtual EventCallback<DateTime> PickerMonthChanged { get; set; }
 
+    /// <summary>
+    /// Command executed when the user double-clicks on the date picker.
+    /// </summary>
+    [Parameter]
+    public EventCallback<MouseEventArgs> OnDoubleClick { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value which will be set when double-clicking on the text field of date picker.
+    /// </summary>
+    [Parameter]
+    public DateTime? DoubleClickToDate { get; set; }
+
     public bool Opened { get; set; } = false;
 
     protected override string? FormatValueAsString(DateTime? value)
@@ -91,6 +103,22 @@ protected async Task OnSelectedDateAsync(DateTime? value)
         await OnSelectedDateHandlerAsync(updatedValue);
     }
 
+    protected async Task OnDoubleClickHandlerAsync(MouseEventArgs e)
+    {
+        if (!ReadOnly)
+        {
+            if (DoubleClickToDate.HasValue)
+            {
+                await OnSelectedDateAsync(DoubleClickToDate.Value);
+            }
+
+            if (OnDoubleClick.HasDelegate)
+            {
+                await OnDoubleClick.InvokeAsync(e);
+            }
+        }
+    }
+
     protected override bool TryParseValueFromString(string? value, out DateTime? result, [NotNullWhen(false)] out string? validationErrorMessage)
     {
         if (View == CalendarViews.Years && int.TryParse(value, out var year))

tests/Core/DateTime/FluentDatePickerTests.cs

@@ -225,4 +225,65 @@ public void FluentDatePicker_ChangeValueWhenDefaultIsNull()
         // Assert
         Assert.Equal(System.DateTime.Parse("2022-03-12"), picker.Instance.Value);
     }
+
+    [Theory]
+    [InlineData(null)]
+    [InlineData("2024-06-05")]
+    public void FluentDatePicker_DoubleClickToSetDateInTextField(string plainDateTime)
+    {
+        // Arrange
+        using var ctx = new TestContext();
+        ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+        ctx.Services.AddSingleton(LibraryConfiguration);
+        System.DateTime? dt = string.IsNullOrEmpty(plainDateTime) ? null : System.DateTime.Parse(plainDateTime);
+
+        // Act
+        var picker = ctx.RenderComponent<FluentDatePicker>(parameters =>
+        {
+            parameters.Add(p => p.DoubleClickToDate, dt);
+        });
+
+        var textField = picker.Find("fluent-text-field");
+
+        // Double-Click
+        textField.DoubleClick();
+
+        // Assert
+        Assert.False(picker.Instance.Opened);
+
+        if (dt.HasValue)
+        {
+            Assert.Equal(dt.Value, picker.Instance.Value);
+        }
+        else
+        {
+            Assert.Null(picker.Instance.Value);
+        }
+    }
+
+    [Fact]
+    public void FluentDatePicker_OnDoubleClickEventTriggers()
+    {
+        // Arrange
+        using var ctx = new TestContext();
+        ctx.JSInterop.Mode = JSRuntimeMode.Loose;
+        ctx.Services.AddSingleton(LibraryConfiguration);
+        var expected = "EventWorks";
+
+        // Act
+        var actual = string.Empty;
+
+        var picker = ctx.RenderComponent<FluentDatePicker>(parameters =>
+        {
+            parameters.Add(p => p.OnDoubleClick, e => actual = expected);
+        });
+
+        var textField = picker.Find("fluent-text-field");
+
+        // Double-Click
+        textField.DoubleClick();
+
+        // Assert
+        Assert.Equal(expected, actual);
+    }
 }