Is it possible to/Are there plans to let the user type into the datepicker

[david-bulte]

Our users also want to have an input field to quickly type the date, ideally with an input mask. Is that something that you plan to implement or what would be your suggestion in such case?

[toozuuu]

Our users also want to have an input field to quickly type the date, ideally with an input mask. Is that something that you plan to implement or what would be your suggestion in such case?

@david-bulte Thank you for this feature request! This is definitely a valuable enhancement that would improve the user experience, especially for users who prefer keyboard input over mouse/touch interactions.

Current State

Currently, the datepicker input field is set to readonly and serves primarily as a display/trigger for the calendar popup. Users interact with dates through the calendar UI rather than by typing directly into the input field.

Implementation Plan

We plan to implement this feature in the next release. The implementation will include:

1. Editable input field - Add a new input property (e.g., [allowTyping]="true") to enable typing
2. Input mask/formatting - Implement date format parsing that respects the displayFormat input or uses locale-specific defaults
3. Parse and validate typed input - Validate against date constraints (min/max dates, disabled dates, etc.)
4. Synchronize with calendar - Ensure typed values update the calendar selection and vice versa
5. Handle edge cases - Manage invalid input, partial dates, format mismatches, etc.

Questions for You

To better understand your requirements:

• Do you have a preference for a specific input mask format, or should it follow the existing displayFormat pattern?
• Should the input mask be configurable, or follow locale conventions?
• Any other specific requirements or use cases we should consider?

We'll keep you updated on the progress and would appreciate any additional feedback you might have! 🎉

[toozuuu]

@david-bulte This feature is now implemented! 🎉

You can enable typing in the datepicker by using the [allowTyping] input property:

<ngxsmk-datepicker
[allowTyping]="true"
[displayFormat]="'MM/DD/YYYY'"
[(ngModel)]="date">
Features implemented:

• ✅ Editable input field - Set [allowTyping]="true" to enable typing
• ✅ Input mask/formatting - Automatically applies input mask based on displayFormat
• ✅ Parse and validate typed input - Validates against date constraints (min/max dates, disabled dates, etc.)
• ✅ Synchronize with calendar - Typed values update the calendar selection and vice versa
• ✅ Handles edge cases - Manages invalid input, partial dates, format mismatches

How it works:

• When allowTyping is enabled, the input field becomes editable (removes readonly attribute)
• Input mask is automatically applied based on your displayFormat (or locale defaults)
• On blur, the typed value is parsed and validated
• Invalid input reverts to the last valid date
• Valid input updates both the calendar selection and the model value

**Example:**ypescript
date = { start: null, end: null };

// In template:
<ngxsmk-datepicker
[allowTyping]="true"
[displayFormat]="'MM/DD/YYYY'"
mode="range"
[(ngModel)]="date"
[locale]="'en-US'">
The input mask will format as you type (e.g., MM/DD/YYYY will show slashes automatically).

Please update to the latest version to use this feature!

[david-bulte]

Thanks, I checked the demo but I didn't see the calendar section/button? Does the component support typing and picking a date at the same time, so a user can choose to either type or pick a date? Maybe it is just missing in the demo.

[toozuuu]

Thanks, I checked the demo but I didn't see the calendar section/button? Does the component support typing and picking a date at the same time, so a user can choose to either type or pick a date? Maybe it is just missing in the demo.

@david-bulte We've released v1.9.17 which includes the fix for Angular 21 Signal Forms compatibility. You can find all the details in the CHANGELOG.md and the release notes.

Yes, the component fully supports both typing and picking dates at the same time. Users can choose either method:

How it works:

1. Typing: When [allowTyping]="true", users can type dates directly into the input field
2. Picking: Users can click anywhere on the input field (or the calendar button) to open the calendar and pick a date
3. Both together: These features work simultaneously - users can type OR pick, whichever they prefer

About the calendar button:

In v1.9.17, we've added the showCalendarButton input property. The calendar button is hidden by default (showCalendarButton="false") for a cleaner UI. However:

• Users can still open the calendar by clicking the input field itself
• The calendar button is optional - it's just a visual indicator, not required for functionality
• In the demo's "Editable Input with Typing Support" section, we've set [showCalendarButton]="true" to show the button

If you don't see the calendar button in the demo:

The demo should show the calendar button in the "Editable Input with Typing Support" section. If you don't see it, it might be because:

1. The demo needs to be rebuilt/redeployed with the latest changes
2. You might be looking at a cached version

But even without the button, users can:

• Click the input field to open the calendar
• Type directly into the input field
• Use keyboard shortcuts (Enter/Space to open calendar)

Example usage:

<!-- Both typing and picking enabled -->
<ngxsmk-datepicker
  mode="single"
  [allowTyping]="true"
  [showCalendarButton]="true"  <!-- Optional: shows calendar icon button -->
  [displayFormat]="'MM/DD/YYYY'"
  formControlName="myDate">
</ngxsmk-datepicker>

Without the button (cleaner UI):

<ngxsmk-datepicker
  mode="single"
  [allowTyping]="true"
  <!-- showCalendarButton defaults to false -->
  [displayFormat]="'MM/DD/YYYY'"
  formControlName="myDate">
</ngxsmk-datepicker>
<!-- Users can still click the input field to open calendar -->

Summary:

✅ Typing: Fully supported with [allowTyping]="true"
✅ Picking: Always available - click input field or calendar button
✅ Both together: Yes, users can choose either method
✅ Calendar button: Optional visual indicator (default: hidden in v1.9.17)

The component is designed to give users maximum flexibility - they can type if they prefer keyboard input, or click to pick if they prefer visual selection. Both methods work seamlessly together!

---

Upgrade to v1.9.17:

npm install ngxsmk-datepicker@1.9.17

For more details, see the v1.9.17 release notes and CHANGELOG.md.