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

Question

基本上我的数据库中有一个日期类型的列，但可以为空。我有一个使用 Angular/Bootstrap 的表单，允许用户根据需要输入日期，但他们不必这样做，为此我使用 Bootstraps 表单控制类并为输入提供日期类型。

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

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

关于拉取数据：

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

在视图中：

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

Answer 1

Angular 需要将任何 input[date] 设为 有效 javascript Date 对象，否则它将默认为空字符串，然后默认为 1969 年 12 月 31 日。 Javascript Date 对象必须始终具有有效的Date。

如果你希望能够使用一个可以为空的Date对象，你应该将默认属性设置为undefined，然后当你绑定你的模型时，你可以先看看它是不是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" />

Answer 2

就像 isherwood 所说，如果没有一些代码上下文，这个问题就更难回答了。如果添加了一些问题，我会更新我的问题。

您必须在代码中的某处格式化日期。如果 javascript 是从日期对象格式化它，那么您只需要执行以下操作：

if(some_date === null)
    some_date = 'mm/dd/yy;
else {
    //date formatting code
}

如果您的 php 或查询为您格式化日期，那么如果您在前端执行此操作：

<input ng-attr-value="{{obj.date}}"/>

然后将其更改为：

<input ng-attr-value="{{obj.date === null ? 'mm/dd/yyyy' : obj.date}}"/>

或者，当您从 api 收到数据时，也可以做类似的事情。

编辑/注意：如果是日期输入字段，您可能会在 Angular 1.3+ 中使用此方法时遇到问题。