Skip to content

Commit 533f2ff

Browse files
mckaragozmckaragoz
authored
New Component: MudDateTimePicker (#626)
* New Component: MudDateTimePicker * ToolBar Implementations * Working Value Implementation * Completed Component * Added Basic Tests * Fix Test
1 parent 0d81549 commit 533f2ff

14 files changed

Lines changed: 2524 additions & 43 deletions

File tree

‎docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml‎

Lines changed: 402 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/DateTimePickerPage.razor‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
@page "/muddatetimepicker"
2+
@namespace MudExtensions.Docs.Pages
3+
4+
<ExamplePage Component="typeof(MudDateTimePicker<>)">
5+
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample1" Title="Usage" Description="MudDateTimePicker handles date and time selection itself.">
6+
<DateTimePickerExample1 />
7+
</ExampleCard>
8+
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample2" Title="Generic Types" Description="MudDateTimePicker supports DateTime and DateTimeOffset.">
9+
<DateTimePickerExample2 />
10+
</ExampleCard>
11+
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample3" Title="Action Buttons" Description="Submit strategy can be handled via Action Buttons and AutoClose parameter.">
12+
<DateTimePickerExample3 />
13+
</ExampleCard>
14+
</ExamplePage>

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample1.razor‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using MudBlazor.Extensions
3+
4+
<MudGrid>
5+
<MudItem xs="12" sm="8">
6+
<MudDateTimePicker @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable" AmPm="_amPm"
7+
ShowToolbar="_showToolbar" Variant="_variant" Color="_color" DateFormat="@_dateFormat" />
8+
</MudItem>
9+
10+
<MudItem xs="12" sm="4">
11+
<MudStack Spacing="2">
12+
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant" Margin="Margin.Dense">
13+
@foreach (Variant item in Enum.GetValues<Variant>())
14+
{
15+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
16+
}
17+
</MudSelect>
18+
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
19+
<MudSwitchM3 @bind-Value="_clearable" Color="Color.Secondary" Label="Clearable" />
20+
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
21+
<MudSwitchM3 @bind-Value="_amPm" Label="AmPm" Color="Color.Secondary" />
22+
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color" Margin="Margin.Dense">
23+
@foreach (Color item in Enum.GetValues<Color>())
24+
{
25+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
26+
}
27+
</MudSelect>
28+
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" Margin="Margin.Dense" />
29+
<MudButton OnClick="@(() => _date = DateTime.Now)">Set Today</MudButton>
30+
</MudStack>
31+
</MudItem>
32+
</MudGrid>
33+
34+
@code {
35+
private DateTime? _date = DateTime.Now;
36+
private bool _editable = false;
37+
private bool _showToolbar = true;
38+
private Color _color = Color.Primary;
39+
private string? _dateFormat;
40+
private bool _clearable = false;
41+
private Variant _variant = Variant.Outlined;
42+
private bool _amPm = false;
43+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample2.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using MudBlazor.Extensions
3+
4+
<MudGrid>
5+
<MudItem xs="12" sm="8">
6+
<MudDateTimePicker @bind-Value="_date" Editable="_editable" Label="DateTime" Clearable="_clearable" Variant="Variant.Outlined" Color="Color.Primary" />
7+
<MudDateTimePicker @bind-Value="_date2" Editable="_editable" Label="DateTimeOffset" Clearable="_clearable" Variant="Variant.Outlined" Color="Color.Primary" />
8+
<MudDateTimePicker @bind-Value="_date2" Editable="_editable" Label="TimeZone Istanbul" Clearable="_clearable" Variant="Variant.Outlined" Color="Color.Primary"
9+
TimeZone="@TimeZoneInfo.FindSystemTimeZoneById("Europe/Istanbul")" />
10+
<MudDateTimePicker @bind-Value="_date3" Editable="_editable" Label="DateOnly" Clearable="_clearable" Variant="Variant.Outlined" Color="Color.Primary" />
11+
</MudItem>
12+
13+
<MudItem xs="12" sm="4">
14+
<MudStack Spacing="2">
15+
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
16+
<MudSwitchM3 @bind-Value="_clearable" Color="Color.Secondary" Label="Clearable" />
17+
</MudStack>
18+
</MudItem>
19+
</MudGrid>
20+
21+
@code {
22+
private DateTime? _date = DateTime.Now;
23+
private DateTimeOffset _date2 = DateTimeOffset.UtcNow;
24+
private DateOnly _date3 = DateOnly.FromDateTime(DateTime.Now);
25+
private bool _clearable = false;
26+
private bool _editable = false;
27+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/DateTimePicker/Examples/DateTimePickerExample3.razor‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@using MudBlazor.Extensions
3+
4+
<MudGrid>
5+
<MudItem xs="12" sm="8">
6+
<MudDateTimePicker @ref="_picker" @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable"
7+
ShowToolbar="_showToolbar" Variant="_variant" Color="_color" DateFormat="@_dateFormat">
8+
<PickerActions>
9+
<MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
10+
<MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
11+
<MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">OK</MudButton>
12+
</PickerActions>
13+
</MudDateTimePicker>
14+
</MudItem>
15+
16+
<MudItem xs="12" sm="4">
17+
<MudStack Spacing="2">
18+
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
19+
@foreach (Variant item in Enum.GetValues<Variant>())
20+
{
21+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
22+
}
23+
</MudSelect>
24+
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
25+
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
26+
<MudSwitchM3 @bind-Value="_submitOnClose" Color="Color.Secondary" Label="Submit On Close" />
27+
<MudSwitchM3 @bind-Value="_isAdornmentEnd" Label="Adornment End" Color="Color.Secondary" />
28+
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
29+
@foreach (Color item in Enum.GetValues<Color>())
30+
{
31+
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
32+
}
33+
</MudSelect>
34+
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" />
35+
<MudButton OnClick="@(() => _date = DateTime.Now)">Set Today</MudButton>
36+
</MudStack>
37+
</MudItem>
38+
</MudGrid>
39+
40+
@code {
41+
private MudDateTimePicker<DateTime?> _picker = null!;
42+
43+
private DateTime? _date = DateTime.Now;
44+
private bool _editable = false;
45+
private bool _showToolbar = true;
46+
private bool _submitOnClose = true;
47+
private Color _color = Color.Primary;
48+
private string? _dateFormat;
49+
private bool _isAdornmentEnd = true;
50+
private bool _clearable = false;
51+
private Variant _variant = Variant.Outlined;
52+
}

0 commit comments

Comments
 (0)