Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Masking: Add DateMask and support Mask in DatePicker #3874

Merged
merged 5 commits into from Feb 11, 2022
Merged

Masking: Add DateMask and support Mask in DatePicker #3874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5eb7bfc
DateMask
henon Feb 1, 2022
d178274
Fixed mask examples for small screens
henon Feb 4, 2022
4bdea31
Add datemask example to docs
henon Feb 4, 2022
e384cf4
MudPicker: support Masking
henon Feb 11, 2022
f559c77
Docs: DatePicker masking examples
henon Feb 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 27 additions & 13 deletions src/MudBlazor.Docs/Pages/Components/DatePicker/DatePickerPage.razor
View file
Open in desktop
Expand Up @@ -13,25 +13,39 @@
</Description>
</SectionHeader>
<SectionContent Code="DatePickerBasicUsageExample" ShowCode="false">
<DatePickerBasicUsageExample />
<DatePickerBasicUsageExample/>
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Input Masking">
<Description>
By setting the <CodeInline>Mask</CodeInline> parameter, an editable DatePicker can be used with any suitable
<MudLink Href="/features/masking">input mask</MudLink>, preferrably a <CodeInline>DateMask</CodeInline> which
has built-in date awareness. But other masks like <CodeInline>PatternMask</CodeInline> will work as well, even
if they allow to input invalid dates. Make sure the <CodeInline>DateFormat</CodeInline> fits the mask!
</Description>
</SectionHeader>
<SectionContent Code="DatePickerMaskExample" ShowCode="false">
<DatePickerMaskExample/>
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Read Only">
<Description>If <CodeInline>ReadOnly</CodeInline> is set to true, the DatePicker can be used but the value will remain unchanged regardless of the actions performed or the values entered.</Description>
</SectionHeader>
<SectionContent Code="DatePickerReadOnlyExample" ShowCode="false">
<DatePickerReadOnlyExample />
<SectionContent Code="DatePickerReadOnlyExample" ShowCode="false" FullWidth="false">
<DatePickerReadOnlyExample/>
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="Action Buttons">
<Description>You can add buttons by using the <CodeInline>PickerActions</CodeInline> render fragment. If <CodeInline>AutoClose</CodeInline> is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.</Description>
</SectionHeader>
<SectionContent Code="DatePickerActionButtonsExample" ShowCode="false">
<DatePickerActionButtonsExample />
<DatePickerActionButtonsExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -40,7 +54,7 @@
<Description>When you set the <CodeInline>Culture</CodeInline> parameter, the DatePicker will use culture-specific month names, weekday names and even different calendars.</Description>
</SectionHeader>
<SectionContent Code="DatePickerInternationalizationExample" ShowCode="false">
<DatePickerInternationalizationExample />
<DatePickerInternationalizationExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -49,7 +63,7 @@
<Description></Description>
</SectionHeader>
<SectionContent Code="DatePickerDialogExample">
<DatePickerDialogExample />
<DatePickerDialogExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -58,7 +72,7 @@
<Description></Description>
</SectionHeader>
<SectionContent DarkenBackground="true" Code="DatePickerStaticExample">
<DatePickerStaticExample />
<DatePickerStaticExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -67,7 +81,7 @@
<Description>By default, it opens to Date, but can be set to Year or Month.</Description>
</SectionHeader>
<SectionContent Code="DatePickerViewsExample">
<DatePickerViewsExample />
<DatePickerViewsExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -76,7 +90,7 @@
<Description></Description>
</SectionHeader>
<SectionContent DarkenBackground="true" Class="demo-datetime-margin" Code="DatePickerColorExample">
<DatePickerColorExample />
<DatePickerColorExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -85,7 +99,7 @@
<Description>You can change the elevation with the <CodeInline>Elevation</CodeInline> parameter. The default value is 0 for static and 8 for inline.</Description>
</SectionHeader>
<SectionContent DarkenBackground="true" Code="DatePickerElevationExample">
<DatePickerElevationExample />
<DatePickerElevationExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -98,7 +112,7 @@
</Description>
</SectionHeader>
<SectionContent Code="DatePickerFixedValuesExample" ShowCode="false">
<DatePickerFixedValuesExample />
<DatePickerFixedValuesExample/>
</SectionContent>
</DocsPageSection>

Expand All @@ -107,7 +121,7 @@
<Description></Description>
</SectionHeader>
<SectionContent Code="DateRangePickerUsageExample" ShowCode="false">
<DateRangePickerUsageExample />
<DateRangePickerUsageExample/>
</SectionContent>
</DocsPageSection>

Expand Down
2 changes: 1 addition & 1 deletion src/MudBlazor.Docs/Pages/Components/DatePicker/Examples/DatePickerBasicUsageExample.razor
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
<MudDatePicker Label="Basic example" @bind-Date="date"/>
<MudDatePicker Label="Editable with Placeholder" Editable="true" @bind-Date="date" Placeholder="Select Date" />
<MudDatePicker Label="Only Calendar" @bind-Date="date" DisableToolbar="true" />
<MudDatePicker Label="Date Format" @bind-Date="date" DateFormat="dd/MM/yyyy" />
<MudDatePicker Label="Date Format" @bind-Date="date" DateFormat="dd.MM.yyyy" />
<MudDatePicker Label="Show week number" ShowWeekNumbers="true" @bind-Date="date" />
<MudDatePicker Label="Display two months" DisplayMonths="2" TitleDateFormat="dddd, dd MMMM" @bind-Date="date" />

Expand Down
11 changes: 11 additions & 0 deletions src/MudBlazor.Docs/Pages/Components/DatePicker/Examples/DatePickerMaskExample.razor
View file
Open in desktop
@@ -0,0 +1,11 @@
@namespace MudBlazor.Docs.Examples

<MudDatePicker Label="dd.MM.yyyy" Editable="true" @bind-Date="date1" Mask="@(new DateMask("dd.MM.yyyy"))" DateFormat="dd.MM.yyyy" Placeholder="de-AT Date" />
<MudDatePicker Label="MM/dd/yyyy" Editable="true" @bind-Date="date2" Mask="@(new DateMask("MM/dd/yyyy"))" DateFormat="MM/dd/yyyy" Placeholder="en-US Date" />
<MudDatePicker Label="yyyy-MM-dd" Editable="true" @bind-Date="date3" Mask="@(new DateMask("0000-00-00"))" DateFormat="yyyy-MM-dd" Placeholder="ISO Date" />

@code {
DateTime? date1 = null;
DateTime? date2 = DateTime.Today;
DateTime? date3 = null;
}
10 changes: 5 additions & 5 deletions src/MudBlazor.Docs/Pages/Features/Masking/Examples/CustomCharactersExample.razor
View file
Open in desktop
Expand Up @@ -2,18 +2,18 @@


<MudGrid Class="justify-space-between" Style="max-width: 800px;">
<MudItem xs="6">
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask1" Label="MAC Address" HelperText="@mask1.Mask"
@bind-Value="mac1" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="6">
<MudTextField Mask="@mask2" Label="MAC Address (with Placeholder)" HelperText="@mask2.Mask"
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask2" Label="MAC with Placeholder" HelperText="@mask2.Mask"
@bind-Value="mac2" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
MAC Address: <b>@mac1</b>
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
Cleaned MAC Address: <b>@mac2</b>
</MudItem>
</MudGrid>
Expand Down
36 changes: 36 additions & 0 deletions src/MudBlazor.Docs/Pages/Features/Masking/Examples/DateMaskExample.razor
View file
Open in desktop
@@ -0,0 +1,36 @@
@using System.Globalization
@namespace MudBlazor.Docs.Examples


<MudGrid Class="justify-space-between" Style="max-width: 800px;">
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask1" Label="ISO Date" HelperText="@mask1.Mask"
@bind-Value="isoDate" Variant="@Variant.Text" Clearable />
ISO: <b>@isoDate</b>
</MudItem>
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask2" Label="US" HelperText="@mask2.Mask"
@bind-Value="usDate" Variant="@Variant.Text" Clearable />
US: <b>@usDate</b>
</MudItem>
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask3" Label="AT" HelperText="@mask3.Mask"
@bind-Value="atDate" Variant="@Variant.Text" Clearable />
AT: <b>@atDate</b>
</MudItem>
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask4" Label="Month" HelperText="@mask4.Mask"
@bind-Value="monthAndYear" Variant="@Variant.Text" Clearable />
MM/YY: <b>@monthAndYear</b>
</MudItem>
</MudGrid>

@code {
string isoDate, usDate, atDate;
string monthAndYear;

IMask mask1 = new DateMask("yyyy-MM-dd");
IMask mask2 = new DateMask("MM/dd/yyyy");
IMask mask3 = new DateMask("TT.MM.JJJJ", 'J', 'M', 'T');
IMask mask4 = new DateMask("MM/YY", 'Y', 'M');
}
6 changes: 3 additions & 3 deletions src/MudBlazor.Docs/Pages/Features/Masking/Examples/MultiMaskExample.razor
View file
Open in desktop
Expand Up @@ -47,9 +47,9 @@
}

@* Note: MudElement is used here to limit the render-update to this html tree *@
<MudElement HtmlTag="div" @ref="element" Style="max-width: 800px;" Class="mud-width-full px-3">
<MudElement HtmlTag="div" @ref="element" Style="max-width: 800px;" Class="mud-width-full">
<MudGrid Class="justify-space-between">
<MudItem xs="6">
<MudItem xs="12" sm="6">
<MudAlert Variant="@variants["American Express"]" NoIcon Dense Class="mb-2">
American Express: starts with 34/37<br/>
<pre>34&#183;&#183; &#183;&#183;&#183;&#183;&#183;&#183; &#183;&#183;&#183;&#183;&#183;</pre>
Expand All @@ -63,7 +63,7 @@
<pre>35&#183;&#183; &#183;&#183;&#183;&#183; &#183;&#183;&#183;&#183; &#183;&#183;&#183;&#183;</pre>
</MudAlert>
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
<MudAlert Variant="@variants["VISA"]" NoIcon Dense Class="mb-2">
VISA: starts with 4<br/>
<pre>4&#183;&#183;&#183; &#183;&#183;&#183;&#183; &#183;&#183;&#183;&#183; &#183;&#183;&#183;&#183;</pre>
Expand Down
2 changes: 1 addition & 1 deletion src/MudBlazor.Docs/Pages/Features/Masking/Examples/PatternMaskExample.razor
View file
Open in desktop
Expand Up @@ -6,7 +6,7 @@
@bind-Value="creditCard" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="4">
<MudTextField Mask="@(new PatternMask("00/00"))" Label="Expires"
<MudTextField Mask="@(new DateMask("MM/YY", 'Y', 'M'))" Label="Expires"
@bind-Value="expiration" Variant="@Variant.Text" />
</MudItem>
<MudItem xs="4"/>
Expand Down
8 changes: 4 additions & 4 deletions src/MudBlazor.Docs/Pages/Features/Masking/Examples/RegexMaskExample.razor
View file
Open in desktop
Expand Up @@ -2,18 +2,18 @@


<MudGrid Class="justify-space-between" Style="max-width: 800px;">
<MudItem xs="6">
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask1" Label="Only digits (unlimited length)" HelperText="@mask1.Mask"
@bind-Value="numbers" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
<MudTextField Mask="@mask2" Label="Russian postal code" HelperText="@mask2.Mask"
@bind-Value="russianZip" Variant="@Variant.Text" Clearable />
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
Number: <b>@numbers</b>
</MudItem>
<MudItem xs="6">
<MudItem xs="12" sm="6">
Russian ZIP: <b>@russianZip</b>
</MudItem>
</MudGrid>
Expand Down
15 changes: 15 additions & 0 deletions src/MudBlazor.Docs/Pages/Features/Masking/MaskingPage.razor
View file
Open in desktop
Expand Up @@ -58,6 +58,21 @@
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="DateMask">
<Description>
<CodeInline>DateMask</CodeInline> is an auto-correcting calendar-aware date input mask with customizable format. There are some restrictions though.
Day and month must be dual digit blocks like <CodeInline>dd</CodeInline> and <CodeInline>MM</CodeInline>. The year can either be denoted by
<CodeInline>yy</CodeInline> or by <CodeInline>yyyy</CodeInline>. The characters for the day, month and year blocks are customizable. You can align
the three blocks in any order and add any delimiters you want or none at all. The day block can be left out. Year and month blocks must be used or yields undefined
results as will multiple usage of a block.
</Description>
</SectionHeader>
<SectionContent FullWidth="true" Outlined="true" Code="DateMaskExample" ShowCode="false">
<DateMaskExample />
</SectionContent>
</DocsPageSection>

<DocsPageSection>
<SectionHeader Title="RegexMask">
<Description>
Expand Down