Angular 2 Material日期选择器ngModel无法显示值

Hey there! I totally get how frustrating it is when the date picker works for manual selection but won't show dates from your API—let's figure this out together.

The most common culprit here is timezone mismatches when converting your API's date string to a Date object. Angular Material's date picker relies on the local date of the Date instance, and naive conversions can throw this off. Here's how to fix it:

1. Fix Your Date Conversion Logic #

If your API returns a date string like "2024-05-20" (without time), using new Date("2024-05-20") will parse it as UTC midnight. For timezones ahead of UTC (like UTC+8), this translates to the previous day's local time, which the date picker can't recognize properly.

Instead, manually split the date string to create a Date object that matches your local timezone:

// Example API date string
const apiDate = "2024-05-20";
const [year, month, day] = apiDate.split("-").map(Number);

// Months are 0-indexed in JS Date!
this.boundDate = new Date(year, month - 1, day);

2. Use Moment.js for More Reliable Date Handling #

If you're dealing with varying date formats or timezone complexities, switching to MatMomentDateModule (which uses Moment.js) can simplify things a lot:

First, install the dependencies:

npm install moment @angular/material-moment-adapter

Then update your module to import the adapter:

import { MatMomentDateModule } from "@angular/material-moment-adapter";

@NgModule({
  imports: [
    // ... your other imports (MatDatepickerModule, MatInputModule, etc.)
    MatMomentDateModule
  ]
})
export class YourModule { }

Now convert your API date string with Moment.js, which handles timezones and formats seamlessly:

import * as moment from "moment";

const apiDate = "2024-05-20";
// You can bind either a Moment object or a Date object here
this.boundDate = moment(apiDate).toDate();

3. Verify Your Binding is Valid #

Quick sanity check: log the bound date in your component to make sure it's a valid Date object (not null/undefined):

ngOnInit() {
  console.log(this.boundDate);
  // Should output something like: Mon May 20 2024 00:00:00 GMT+0800 (China Standard Time)
}

These steps should resolve the issue—most cases boil down to the date object's timezone not aligning with what the Material date picker expects.

内容的提问来源于stack exchange，提问作者stackUser44