AngularJS日期格式困惑：表单预填日期异常问题咨询

Hey Dave, let’s work through these two date headaches you’re dealing with—they’re super common in AngularJS, so you’re definitely not alone here.

1. Why isn’t the form showing anything when you assign the string directly? #

AngularJS’s date input controls (like <input type="date"> with ng-model) expect a Date object as the bound value, not a raw string. When you set $scope.selectedDate = c.data.Appt.enrolled.start_date, you’re passing a string, which the form can’t parse into a displayable date. That’s why your input stays empty.

2. Why is the date showing one day early when using new Date()? #

This is almost always a timezone offset issue. Here’s what’s happening:

• When you pass a date string like "2018-04-24" to new Date(), JavaScript assumes it’s a UTC midnight timestamp.
• If your local timezone is ahead of UTC (e.g., UTC+8), that UTC midnight translates to the previous day in your local time (e.g., 2018-04-23 16:00:00 in UTC+8).
• The date input displays your local time’s date portion, hence the "one day early" problem.

Fixes to Try #

Option 1: Build the Date using UTC values

Avoid timezone shifts by explicitly constructing the date from UTC components. Split your date string and use Date.UTC to create a Date object that aligns with the intended date:

const dateString = c.data.Appt.enrolled.start_date;
const [year, month, day] = dateString.split('-');
// Remember: JavaScript months are 0-indexed (Jan=0, Apr=3)
$scope.selectedDate = new Date(Date.UTC(year, month - 1, day));

Option 2: Extract UTC date parts from the parsed Date

If your backend returns a date string with timezone info (e.g., "2018-04-24T00:00:00Z"), pull the UTC year/month/day to build a local Date that matches the original date:

const utcDate = new Date(c.data.Appt.enrolled.start_date);
$scope.selectedDate = new Date(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate());

Option 3: Verify your input control setup

Double-check that your form input is using type="date" and that ng-model is correctly bound to your $scope.selectedDate variable. Angular’s date input relies on this binding to render the date properly.

Quick Recap #

• Always bind a Date object to ng-model for date inputs, not a string.
• Timezone offsets are the #1 culprit for off-by-one date errors—use UTC-based construction to avoid them.

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