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

Question

基本上我的数据库中有一列是日期类型但可以为空。我有一个使用 Angular/Bootstrap 的表单，允许用户输入日期（如果他们愿意但他们不必输入），为此我使用 Bootstraps form-control class 并为输入提供一种日期类型。

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

我已经通过控制台跟踪了它，当它到达我的模型绑定时我 100% 肯定日期值为空 ()，所以我想不出在这种情况下该怎么做，如果有任何指点，我将不胜感激。

关于拉取数据：

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

在视图中：

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

Answer 1

正如 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 收到返回的数据时执行类似的操作。

Edit/note: 如果是日期输入字段，在 angular 1.3+ 中使用此方法可能会遇到问题。

Answer 2

Angular 需要让任何 input[date] 成为 valid javascript Date 对象，否则它将默认为一个空字符串，然后默认为 12/31/1969。 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" />

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

How do you display "mm/dd/yyyy" instead of "12/31/1969" in date input fields when date is null?

javascript

date

angularjs

angular-ui-bootstrap