feat: add masked input components for date/time widgets #85
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add MaskedDateInput component with DD/MM/YYYY mask - Add MaskedDateTimeInput component with DD/MM/YYYY HH:mm:ss mask - Add MaskedTimeInput component with HH:mm:ss mask Features: - Input masking with auto-insert separators (using imask) - Autocomplete on Enter key and blur - Escape key commits value and moves to next focusable element - Clear value when input is empty - Optional calendar/clock popup buttons for visual selection - Required field styling - Error tooltip for invalid values Closes gisce/webclient#2291 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Marc Güell Segarra <mguellsegarra@users.noreply.github.com>
- Add onDoubleClick handler to MaskedDateInput, MaskedDateTimeInput, and MaskedTimeInput
- Double-click now commits value (same as Enter key) per issue gisce/webclient#2291
- Update MaskedDateInput.stories.tsx with comprehensive keyboard behavior demo
- Add keyboard/mouse behavior documentation to component description
Closes gisce/webclient#2291
Co-authored-by: Marc Güell Segarra <mguellsegarra@users.noreply.github.com>
…ed icon style - When pressing Enter/Escape/Double-click on an empty masked input, it now autocompletes to the current date/time instead of setting null - Changed visual style from separate button to integrated suffix icon inside the input (matching antd's DatePicker style) - Updated Storybook with "Enter on Empty" test case Closes gisce/webclient#2291 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Marc Güell Segarra <mguellsegarra@users.noreply.github.com>
…-formiga-components into claude/masked-datetime-input
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
MaskedDateInputcomponent with DD/MM/YYYY maskMaskedDateTimeInputcomponent with DD/MM/YYYY HH:mm:ss maskMaskedTimeInputcomponent with HH:mm:ss maskCloses gisce/webclient#2291
🤖 Generated with Claude Code