Implement use-mask-input with the DatePicker component

[casad1as]

Description

Since the Input component already supports and provides an example of using use-mask-input, I’m wondering how we should properly implement it with the DatePicker component.

I attempted to integrate use-mask-input with DatePicker on my own, but I couldn’t get it working as expected. It seems like the masking behavior doesn’t apply correctly when the DatePicker manages the input internally.

Has anyone successfully implemented use-mask-input with the DatePicker? If so, could you share an example or explain the recommended approach?

Any guidance would be greatly appreciated. Thanks!

Link to Reproduction

Steps to reproduce

1. Use the default DatePicker component: https://chakra-ui.com/docs/components/date-picker#usage
2. Apply the mask input example to DatePicker.Input: https://chakra-ui.com/docs/components/input#mask
3. Use the mask: withMask('99/99/9999')

Chakra UI Version

3.34.0

Browser

Edge

Operating System

• macOS
• Windows
• Linux

Additional Information

The Input component documentation provides an example of using use-mask-input, but when trying to apply the same approach to DatePicker.Input, the masking does not behave as expected.

It seems that the DatePicker internally controls the input, which may be interfering with the mask.