I would like to suggest adding a seamless typing feature in the Kendo Vue DateInput component, enabling automatic navigation between each section (day, month, year, hour, minute) without requiring separators or manual navigation.
✳️ Expected Behavior:
When typing a date and/or time, such as 20/04/1997 14:35, the cursor should automatically move to the next segment when the expected number of digits is reached:
For dates:
- Typing 20 → cursor jumps to month.
- Typing 04 → cursor jumps to year.
- Typing 1997→ date completed.
For times:
- Typing 14 → cursor jumps to minutes.
- Typing 35 → time completed.
👉 User flow example:
20 -> (day filled, move to month) 04 -> (month filled, move to year) 1997 -> (year filled, move to hour)
14 -> (hour filled, move to minute) 35 -> (minute filled)
✅ This would apply to all DateInput modes:
- Date only.
- Time only.
- DateTime combined.
❌ Current Situation in Kendo Vue DateInput:
- Manual use of arrows or mouse to move between segments.
- Need to type separators (
/,:, etc.) explicitly. - No automatic focus jump when a section is completed.
✅ Requested Feature:
- A prop to enable/disable automatic segment navigation in DateInput.
- Applies to both date and time segments, depending on the configured format.
🛑 Why it matters:
- Faster and more fluid typing experience.
- Matches native behaviors found in <input type="date">or
<input type="time">in many browsers. - Important for data-heavy environments (administrative forms, back-office systems, repetitive entry).
- Accessibility-friendly: reduces the need for manual cursor manipulation.
⚙️ Additional context:
After discussing this with your team, I understand that this behavior is not currently planned and custom implementations are challenging to achieve.
Still, exposing this behavior as an optional prop would allow those who need this fluid UX to benefit from it, without affecting existing users.
Thank you very much for considering this suggestion!
