Skip to content

Commit c71a621

Browse files
msynkmsynk
committed
add new Icon parameter to BitDatePicker #12082 
1 parent 938c99c commit c71a621

File tree

5 files changed

+92
-13
lines changed

5 files changed

+92
-13
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@namespace Bit.BlazorUI
1+
@namespace Bit.BlazorUI
22
@inherits BitInputBase<DateTimeOffset?>
33

44
<div @ref="RootElement" @attributes="HtmlAttributes"
@@ -66,7 +66,8 @@
6666
}
6767
else
6868
{
69-
<i style="@Styles?.Icon" class="bit-dtp-ico bit-icon bit-icon--@IconName @Classes?.Icon" aria-hidden="true" />
69+
var icon = BitIconInfo.From(Icon, IconName ?? "CalendarMirrored");
70+
<i style="@Styles?.Icon" class="bit-dtp-ico @icon?.GetCssClasses() @Classes?.Icon" aria-hidden="true" />
7071
}
7172
</div>
7273
</div>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.razor.cs‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
using System.Text;
1+
using System.Text;
22
using System.Globalization;
33
using System.Diagnostics.CodeAnalysis;
44

@@ -234,9 +234,29 @@ private int _minuteView
234234
public BitIconLocation IconLocation { get; set; } = BitIconLocation.Right;
235235

236236
/// <summary>
237-
/// The name of the DatePicker's icon.
237+
/// The icon to display in the DatePicker input.
238+
/// Takes precedence over <see cref="IconName"/> when both are set.
238239
/// </summary>
239-
[Parameter] public string IconName { get; set; } = "CalendarMirrored";
240+
/// <remarks>
241+
/// Use this property to render icons from external libraries like FontAwesome, Material Icons, or Bootstrap Icons.
242+
/// For built-in Fluent UI icons, use <see cref="IconName"/> instead.
243+
/// </remarks>
244+
/// <example>
245+
/// Bootstrap: Icon="BitIconInfo.Bi("calendar3")"
246+
/// FontAwesome: Icon="BitIconInfo.Fa("solid calendar")"
247+
/// Custom CSS: Icon="BitIconInfo.Css("my-icon-class")"
248+
/// </example>
249+
[Parameter] public BitIconInfo? Icon { get; set; }
250+
251+
/// <summary>
252+
/// The name of the DatePicker's icon from the built-in Fluent UI icon set.
253+
/// </summary>
254+
/// <remarks>
255+
/// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.CalendarMirrored</c>).
256+
/// Defaults to "CalendarMirrored" when not set.
257+
/// For external icon libraries, use <see cref="Icon"/> instead.
258+
/// </remarks>
259+
[Parameter] public string? IconName { get; set; }
240260

241261
/// <summary>
242262
/// The custom validation error message for the invalid value.

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,38 @@
306306
</div>
307307
</DemoExample>
308308

309-
<DemoExample Title="Style & Class" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
309+
<DemoExample Title="External Icons" RazorCode="@example15RazorCode" Id="example15">
310+
<div>Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the <b>Icon</b> parameter.</div>
311+
312+
<br />
313+
<br />
314+
315+
<div class="example-content">
316+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
317+
318+
<div>FontAwesome:</div>
319+
<br />
320+
<BitDatePicker Label="Icon (string)" Icon="@("fa-solid fa-calendar-days")" />
321+
<br />
322+
<BitDatePicker Label="BitIconInfo.Css" Icon="@BitIconInfo.Css("fa-solid fa-calendar-days")" />
323+
<br />
324+
<BitDatePicker Label="BitIconInfo.Fa" Icon="@BitIconInfo.Fa("solid calendar")" />
325+
326+
<br /><br /><br />
327+
328+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
329+
330+
<div>Bootstrap:</div>
331+
<br />
332+
<BitDatePicker Label="Icon (string)" Icon="@("bi bi-calendar3")" />
333+
<br />
334+
<BitDatePicker Label="BitIconInfo.Css" Icon="@BitIconInfo.Css("bi bi-calendar3-event")" />
335+
<br />
336+
<BitDatePicker Label="BitIconInfo.Bi" Icon="@BitIconInfo.Bi("calendar3")" />
337+
</div>
338+
</DemoExample>
339+
340+
<DemoExample Title="Style & Class" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
310341
<div>Explore styling and class customization for BitDatePicker, including component styles, custom classes, and detailed styles.</div>
311342
<br /><br />
312343
<div>Component's Style & Class:</div><br />
@@ -353,7 +384,7 @@
353384
</div>
354385
</DemoExample>
355386

356-
<DemoExample Title="RTL" RazorCode="@example16RazorCode" Id="example16">
387+
<DemoExample Title="RTL" RazorCode="@example17RazorCode" Id="example17">
357388
<div>Use BitDatePicker in right-to-left (RTL).</div>
358389
<br />
359390
<div dir="rtl">

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.cs‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DatePicker;
1+
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DatePicker;
22

33
public partial class BitDatePickerDemo
44
{
@@ -149,11 +149,20 @@ public partial class BitDatePickerDemo
149149
Href = "#icon-location-enum"
150150
},
151151
new()
152+
{
153+
Name = "Icon",
154+
Type = "BitIconInfo?",
155+
DefaultValue = "null",
156+
Description = "The icon to display in the DatePicker input using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set.",
157+
LinkType = LinkType.Link,
158+
Href = "#bit-icon-info",
159+
},
160+
new()
152161
{
153162
Name = "IconName",
154-
Type = "string",
163+
Type = "string?",
155164
DefaultValue = "CalendarMirrored",
156-
Description = "The name of the DatePicker's icon."
165+
Description = "The name of the DatePicker's icon from the built-in Fluent UI icon set. For external icon libraries, use Icon instead."
157166
},
158167
new()
159168
{

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DatePicker/BitDatePickerDemo.razor.samples.cs‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DatePicker;
1+
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.DatePicker;
22

33
public partial class BitDatePickerDemo
44
{
@@ -231,6 +231,24 @@ private void HandleValidSubmit() { }
231231
private void HandleInvalidSubmit() { }";
232232

233233
private readonly string example15RazorCode = @"
234+
<link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
235+
236+
<BitDatePicker Label=""Icon (string)"" Icon=""@(""fa-solid fa-calendar-days"")"" />
237+
238+
<BitDatePicker Label=""BitIconInfo.Css"" Icon=""@BitIconInfo.Css(""fa-solid fa-calendar-days"")"" />
239+
240+
<BitDatePicker Label=""BitIconInfo.Fa"" Icon=""@BitIconInfo.Fa(""solid calendar"")"" />
241+
242+
243+
<link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
244+
245+
<BitDatePicker Label=""Icon (string)"" Icon=""@(""bi bi-calendar3"")"" />
246+
247+
<BitDatePicker Label=""BitIconInfo.Css"" Icon=""@BitIconInfo.Css(""bi bi-calendar3-event"")"" />
248+
249+
<BitDatePicker Label=""BitIconInfo.Bi"" Icon=""@BitIconInfo.Bi(""calendar3"")"" />";
250+
251+
private readonly string example16RazorCode = @"
234252
<style>
235253
.custom-class {
236254
overflow: hidden;
@@ -391,9 +409,9 @@ private void HandleValidSubmit() { }
391409
DayPickerHeader = ""custom-day-header"",
392410
WeekNumbersHeader = ""custom-week-header"",
393411
YearMonthPickerWrapper = ""custom-year-picker"" })"" />";
394-
private readonly string example15CsharpCode = @"
412+
private readonly string example16CsharpCode = @"
395413
private DateTimeOffset? classesValue;";
396414

397-
private readonly string example16RazorCode = @"
415+
private readonly string example17RazorCode = @"
398416
<BitDatePicker Dir=""BitDir.Rtl"" />";
399417
}

0 commit comments

Comments
 (0)