Skip to content

Conversation

@shantoislamdev
Copy link
Contributor

Summary

Fix DateTimeInput component in both Lit and Angular renderers to use 1-indexed months (01-12) instead of 0-indexed months (00-11) for the HTML date input value.
Fixes #566

Problem

The DateTimeInput component incorrectly formatted the value attribute for <input type="date"> by using date.getMonth() directly (which is 0-indexed).

Impact:

  • Browsers reject partial or invalid dates like 2025-00-01.
  • The input field appears empty instead of showing the pre-filled date.
  • Affects both Lit and Angular implementations.

Solution

Updated the date formatting logic in both renderers:

  1. Lit: renderers/lit/src/0.8/ui/datetime-input.ts - Line: 137-138
  2. Angular: renderers/angular/src/lib/catalog/datetime-input.ts - Line 97-98

Change:

- const month = this.#padNumber(date.getMonth());
+ const month = this.#padNumber(date.getMonth() + 1);

Testing

  • All test passed ✅

Checklist

  • I have signed the Google CLA
  • My code follows the project's style guidelines
  • I have tested my changes locally

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request correctly fixes a bug where DateTimeInput components were using 0-indexed months, causing date inputs to appear empty. The fix is applied consistently to both the Lit and Angular renderers by adding 1 to the result of date.getMonth(). The changes are clear, correct, and include explanatory comments. The code quality is good, and I have no further suggestions for improvement.

@shantoislamdev shantoislamdev changed the title Fix/date month indexing fix(lit, angular): correct DateTimeInput month indexing [Issue #566] Jan 28, 2026
@selamw1
Copy link

selamw1 commented Feb 9, 2026

While this PR fixes the primary date formatting bug, it doesn’t yet address the parsing of time-only values. JavaScript's Date constructor is unreliable when parsing 'HH:MM' strings (often resulting in Invalid Date).

To resolve this, we should add an early exit in formatInputValue. If the inputType is 'time' and the value is already a valid time string, we should return it directly to bypass the Date object logic.

Suggested Changes (to be applied to both Lit and Angular components):

// If it's a time-only input, return the value directly to avoid unreliable Date parsing
if (this.getInputType() === 'time' && /^\d{2}:\d{2}(:\d{2})?$/.test(value)) {
  return value;
}

const date = value ? new Date(value) : null;
// ... rest of the logic

What are your thoughts on this approach?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

Bug: DateTimeInput generates invalid HTML date values (0-indexed month)

2 participants