AngularJS中如何将null日期转为空输入框而非1/1/1970

这个问题的核心原因很明确：当你用new Date(null)创建日期对象时，JavaScript会把null解析成时间戳0，对应1970年1月1日。要实现null日期时输入框为空，只需要在赋值给ng-model前判断日期值是否为null，避免创建无效的Date对象即可。

步骤1：修改控制器的赋值逻辑 #

在showInEdit函数中，给cdate和edate赋值时，先检查原始日期值是否存在，不存在就直接赋值为null，而不是强制创建Date对象：

$scope.showInEdit = function (member) {
    console.log(member);
    $scope.selectedRow = member;
    $scope.syskey = member.Sys_Key;
    $scope.life = '' + member.Life_Key + '';
    // 处理证书日期：仅当值存在时才创建Date对象，否则赋值为null
    $scope.cdate = member.Date_Issue ? new Date(member.Date_Issue) : null;
    // 处理过期日期：同理
    $scope.edate = member.Date_Expiry ? new Date(member.Date_Expiry) : null;
};

步骤2：确认视图输入框的行为 #

你的输入框代码不需要额外修改：

<div class="form-group has-error"> 
    <label class="title_lable">Date Of Certificate:</label> 
    <input type="date" class="form-control input-sm" ng-model="cdate"> 
</div>

当cdate为null时，AngularJS的type="date"输入框会自动显示为空，完全符合你的需求。

额外优化：表格显示的兼容性 #

你的表格代码里已经用了date过滤器，AngularJS的date过滤器会自动处理null/undefined值，返回空字符串，所以表格部分的显示是正常的。如果想让逻辑更清晰，也可以手动添加条件判断：

<td>{{d.Date_Issue ? (d.Date_Issue | date : "dd/MM/yyyy") : ''}}</td>
<td>{{d.Date_Expiry ? (d.Date_Expiry | date : "dd/MM/yyyy") : ''}}</td>

不过这一步不是必须的，默认的过滤器行为已经能满足需求。

这样修改后，当从Web API获取的日期为null时，输入框就会显示为空，而不是1970年的默认日期了。

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