Skip to content

Commit df3bdf1

Browse files
mckaragozmckaragoz
committed
Completed Component
1 parent 75859b5 commit df3bdf1

12 files changed

Lines changed: 1116 additions & 420 deletions

File tree

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

Lines changed: 390 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: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
@namespace MudExtensions.Docs.Pages
33

44
<ExamplePage Component="typeof(MudDateTimePicker<>)">
5-
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample1" Title="Usage" Description="MudDateTimePicker automatically converts wheel values to DateTime?.">
5+
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample1" Title="Usage" Description="MudDateTimePicker handles date and time selection itself.">
66
<DateTimePickerExample1 />
77
</ExampleCard>
8-
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample2" Title="MinDate & MaxDate" Description="You can restrict available date with MinDate and MaxDate parameters.">
8+
<ExampleCard ComponentName="DateTimePicker" ExampleName="DateTimePickerExample2" Title="Generic Types" Description="MudDateTimePicker supports DateTime and DateTimeOffset.">
99
<DateTimePickerExample2 />
1010
</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>
1114
</ExamplePage>

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

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,12 @@
44
<MudGrid>
55
<MudItem xs="12" sm="8">
66
<MudDateTimePicker @bind-Value="_date" Editable="_editable" Label="Date" Clearable="_clearable" AmPm="_amPm"
7-
ShowToolbar="_showToolbar" Variant="_variant" Color="_color"
8-
Format="@_dateFormat"
9-
TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter" />
7+
ShowToolbar="_showToolbar" Variant="_variant" Color="_color" DateFormat="@_dateFormat" />
108
</MudItem>
119

1210
<MudItem xs="12" sm="4">
1311
<MudStack Spacing="2">
14-
<MudSelect @bind-Value="_dateView" Variant="Variant.Outlined" Label="Date View">
15-
@foreach (DateView item in Enum.GetValues<DateView>())
16-
{
17-
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
18-
}
19-
</MudSelect>
20-
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
12+
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant" Margin="Margin.Dense">
2113
@foreach (Variant item in Enum.GetValues<Variant>())
2214
{
2315
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
@@ -26,26 +18,23 @@
2618
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
2719
<MudSwitchM3 @bind-Value="_clearable" Color="Color.Secondary" Label="Clearable" />
2820
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
29-
<MudSwitchM3 @bind-Value="_showHeader" Color="Color.Secondary" Label="Show Header" />
3021
<MudSwitchM3 @bind-Value="_amPm" Label="AmPm" Color="Color.Secondary" />
31-
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
22+
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color" Margin="Margin.Dense">
3223
@foreach (Color item in Enum.GetValues<Color>())
3324
{
3425
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
3526
}
3627
</MudSelect>
37-
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" />
28+
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" Margin="Margin.Dense" />
3829
<MudButton OnClick="@(() => _date = DateTime.Now)">Set Today</MudButton>
3930
</MudStack>
4031
</MudItem>
4132
</MudGrid>
4233

4334
@code {
4435
private DateTime? _date = DateTime.Now;
45-
private DateView _dateView = DateView.Date;
4636
private bool _editable = false;
4737
private bool _showToolbar = true;
48-
private bool _showHeader = true;
4938
private Color _color = Color.Primary;
5039
private string? _dateFormat;
5140
private bool _clearable = false;

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

Lines changed: 8 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3,61 +3,23 @@
33

44
<MudGrid>
55
<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"
8-
Format="@_dateFormat"
9-
TransformOrigin="Origin.TopCenter" AnchorOrigin="Origin.BottomCenter">
10-
<PickerActions>
11-
<MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
12-
<MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
13-
<MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">OK</MudButton>
14-
</PickerActions>
15-
</MudDateTimePicker>
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="_date3" Editable="_editable" Label="DateOnly" Clearable="_clearable" Variant="Variant.Outlined" Color="Color.Primary" />
169
</MudItem>
1710

1811
<MudItem xs="12" sm="4">
19-
<MudStack Spacing="4">
20-
<MudSelect @bind-Value="_dateView" Variant="Variant.Outlined" Label="Date View">
21-
@foreach (DateView item in Enum.GetValues<DateView>())
22-
{
23-
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
24-
}
25-
</MudSelect>
26-
<MudSelect @bind-Value="_variant" Variant="Variant.Outlined" Label="Variant">
27-
@foreach (Variant item in Enum.GetValues<Variant>())
28-
{
29-
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
30-
}
31-
</MudSelect>
12+
<MudStack Spacing="2">
3213
<MudSwitchM3 @bind-Value="_editable" Color="Color.Secondary" Label="Editable" />
33-
<MudSwitchM3 @bind-Value="_showToolbar" Color="Color.Secondary" Label="Show Toolbar" />
34-
<MudSwitchM3 @bind-Value="_showHeader" Color="Color.Secondary" Label="Show Header" />
35-
<MudSwitchM3 @bind-Value="_submitOnClose" Color="Color.Secondary" Label="Submit On Close" />
36-
<MudSwitchM3 @bind-Value="_isAdornmentEnd" Label="Adornment End" Color="Color.Secondary" />
37-
<MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
38-
@foreach (Color item in Enum.GetValues<Color>())
39-
{
40-
<MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
41-
}
42-
</MudSelect>
43-
<MudTextField @bind-Value="_dateFormat" Variant="Variant.Outlined" Label="Date Format" />
44-
<MudButton OnClick="@(() => _date = DateTime.Now)">Set Today</MudButton>
14+
<MudSwitchM3 @bind-Value="_clearable" Color="Color.Secondary" Label="Clearable" />
4515
</MudStack>
4616
</MudItem>
4717
</MudGrid>
4818

4919
@code {
50-
private MudDateTimePicker<DateTime?> _picker;
51-
5220
private DateTime? _date = DateTime.Now;
53-
private DateView _dateView = DateView.Date;
54-
private bool _editable = false;
55-
private bool _showToolbar = true;
56-
private bool _showHeader = true;
57-
private bool _submitOnClose = true;
58-
private Color _color = Color.Primary;
59-
private string? _dateFormat;
60-
private bool _isAdornmentEnd = true;
21+
private DateTimeOffset _date2 = DateTimeOffset.UtcNow;
22+
private DateOnly _date3 = DateOnly.FromDateTime(DateTime.Now);
6123
private bool _clearable = false;
62-
private Variant _variant = Variant.Outlined;
24+
private bool _editable = false;
6325
}

‎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+
}

‎docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/SelectExtended/Examples/SelectExtendedExample1.razor‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
<MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled" Modal="@_modal" />
1313
<MudSelectExtended T="string" Label="Data Based" ItemCollection="_collection" Disabled="_disabled" Modal="@_modal" AddNullItem="true" AddedNullItemText="@_nullItemText" />
1414
</MudStack>
15-
16-
<MudDateTimePicker T="DateTimeOffset" @bind-Value="_selectedDate" />
1715
</MudItem>
1816

1917
<MudItem xs="12" sm="4">
@@ -30,6 +28,4 @@
3028
private bool _modal = true;
3129
private string[] _collection = new string[] { "Foo", "Bar", "Fizz", "Buzz" };
3230
private string? _nullItemText = "None";
33-
34-
private DateTimeOffset _selectedDate = DateTimeOffset.Now;
3531
}

0 commit comments

Comments
 (0)