javascript - 当日期为空时，如何在日期输入字段中显示 "mm/dd/yyyy"而不是 "12/31/1969"？

Question

本质上，我的数据库中有一个日期类型的列，但可以为空。我有一个使用 Angular/Bootstrap 的表单，允许用户输入日期(如果他们愿意但他们不必输入)，为此我使用 Bootstraps 表单控制类并为输入提供一种日期类型。

当表单加载日期为空值时，第一次保存一切正常。数据库保存得很好，一切都很好。但是，当我将记录加载到此表单中时，如果数据库显示空值，Angular/Javascript 将其显示为 12/31/1969 而不是像最初加载空值时那样显示“mm/dd/yyyy”。这会导致一个问题，因为如果用户保存此表单，它会将默认的 12/31/1969 作为实际日期并将其保存为输入。

我已经通过控制台对其进行了跟踪，我 100% 肯定日期值为 null ( ) 当它到达我的模型绑定(bind)时，所以我想不出在这种情况下该怎么做，我真的很感激任何指针。

关于拉取数据:

if (myDateFromDatabase !== null) { 
    myDateFromDatabase = new Date(myDateFromDatabase); 
}

在 View 中:

<input ng-model="myDateFromDatabase" type="date" class="form-control" />

Answer 1

Angular 需要让任何 input[date] 成为一个 valid javascript Date 对象，否则它将默认为一个空字符串，这然后将默认为 12/31/1969。 Javascript Date 对象必须始终具有有效的 Date。

如果您希望能够使用可为 null 的 Date 对象，您应该将默认属性设置为 undefined 然后当您绑定(bind)模型时，您可以查看是否它首先是 null，如果是，什么也不做。

var myDateFromDatabase = undefined; // if you get null back from database, you'll keep this undefined

然后当您获取数据并应用它时...

if (data.dateRetrieved !== null) { 
    // only make myDateFromDatabase an actual date if there is something stored
    myDateFromDatabase = new Date(data.dateRetrieved); 
}

对于默认文本，添加 placeholder 属性:

<input ng-model="myDateFromDatabase" type="date" placeholder="mm/dd/yyyy" class="form-control" />