Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 73 additions & 0 deletions docs/docs/components/fields/masked/datefield.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,79 @@ For example, assuming that today is `September 15, 2012`, this is how various in
| <div align="center">`12/6`</div> | Two numbers separated by any valid delimiter is interpreted as MM/DD, so this would be December 6, 2012. <br />Note: All characters except for letters and digits are considered valid delimiters. | Same as YMD | Two numbers separated by any delimiter is interpreted as DD/MM, so this would be June 12, 2012. |
| <div align="center">`3/4/5`</div> | April 5, 2012 | March 4, 2005 | April 3, 2005 |


## Textual date parsing {#textual-date-parsing}

By default, the `MaskedDateField` only accepts numeric input for dates. However, you can enable **textual date parsing** to allow users to enter month and day names in their input. This feature is particularly useful for creating more natural date entry experiences.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove "experiences" at the end, and just end with "entry".


To enable textual parsing, use the `setTextualDateParsing()` method:

```java
dateField.setTextualDateParsing(true);
```

### Month name substitution {#month-name-substitution}

When textual parsing is enabled, you can use special modifiers in your mask to accept month names instead of numeric values:

- **`%Ms`** - Accepts short month names (Jan, Feb, Mar, etc.)
- **`%Ml`** - Accepts long month names (January, February, March, etc.)

Month names can appear in any position within the mask, and the field will still accept numeric input as a fallback.

#### Examples

| Mask | Input | Result |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In all of the tables, please remove the check emojis at the end

| ---- | ----- | ------ |
| `%Ms/%Dz/%Yz` | `Sep/01/25` | ✅ Valid - Parses as September 1, 2025 |
| `%Ml/%Dz/%Yz` | `September/01/25` | ✅ Valid - Parses as September 1, 2025 |
| `%Dz/%Ml/%Yz` | `01/September/25` | ✅ Valid - Parses as September 1, 2025 |
| `%Ms/%Dz/%Yz` | `09/01/25` | ✅ Valid - Numeric fallback still works |

All 12 months are supported in both short (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec) and long (January, February, etc.) forms.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a good candidate for a tip


### Day name decoration {#day-name-decoration}

Day-of-week names can be included in the input for better readability, but they are **decorative only** and are stripped during parsing. They don't affect the actual date value.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'they're' instead of 'they are'.


- **`%Ds`** - Accepts short day names (Mon, Tue, Wed, etc.)
- **`%Dl`** - Accepts long day names (Monday, Tuesday, Wednesday, etc.)

:::warning Day Names Require Numeric Day
When using day-of-week names (`%Ds` or `%Dl`), your mask **must also include** `%Dz` or `%Dd` to specify the actual day number. Without a numeric day component, the input will be invalid.
:::

#### Examples

| Mask | Input | Result |
| ---- | ----- | ------ |
| `%Ds %Mz/%Dz/%Yz` | `Mon 09/01/25` | ✅ Valid - Day name is decorative |
| `%Dl %Mz/%Dz/%Yz` | `Monday 09/01/25` | ✅ Valid - Day name is decorative |
| `%Mz/%Dz/%Yz %Ds` | `09/01/25 Tue` | ✅ Valid - Day name at the end |
| `%Dl/%Mz/%Yz` | `Monday/09/25` | ❌ Invalid - Missing `%Dz` |
| `%Mz/%Dl/%Yz` | `09/Monday/25` | ❌ Invalid - Missing `%Dz` |

All 7 weekdays are supported in both short (Mon, Tue, Wed, Thu, Fri, Sat, Sun) and long (Monday, Tuesday, etc.) forms.

### Additional parsing rules {#additional-parsing-rules}

Textual date parsing includes several helpful features:

- **Case-insensitive:** Input like `MONDAY 09/01/25`, `monday 09/01/25`, or `Monday 09/01/25` all work the same way.
- **Locale-aware:** Month and day names are recognized based on the field's locale setting. For example:
- French locale: `septembre/01/25` is recognized as September
- German locale: `Montag 09/01/25` is recognized with Monday as the day name

### When disabled (default)

If textual date parsing is **not** enabled (the default behavior), text names will not be recognized:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'isn't' instead of 'is not'.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'won't' instead of 'will not'.


| Mask | Input | Result |
| ---- | ----- | ------ |
| `%Ms/%Dz/%Yz` | `Sep/01/25` | ❌ Invalid - Names not recognized |
| `%Ms/%Dz/%Yz` | `09/01/25` | ✅ Valid - Numeric input works |


## Setting min/max constraints {#setting-minmax-constraints}

You can restrict the allowed date range in a `MaskedDateField` using the `setMin()` and `setMax()` methods:
Expand Down
Loading