如何设置Angular UI Bootstrap Datepicker默认设置空字段？答案

【问题标题】：How to set Angular UI Bootstrap Datepicker to set empty field by default?如何设置Angular UI Bootstrap Datepicker默认设置空字段？
【发布时间】：2016-11-18 09:33:35
【问题描述】：

我正在使用 Angular UI Bootstrap Datepicker 工作一个日期选择器。我的挑战是默认将日期选择器的输入字段设置为空字段。

让我向你展示我使用的输入字段。

<td>
  <div>
    <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

  </div>
</td>

还有我的脚本

  $scope.personalDetails.forEach(function(personalDetail){
    personalDetail.date = new Date(personalDetail.date);
  });

  $scope.open = function($event, personalDetail) {
    $event.preventDefault();
    $event.stopPropagation();

    personalDetail.isOpen = true;
  };

我在带有 ng-repeat 的 html 表中使用它。但我需要将日期字段显示为空，直到我设置相应的日期。请帮助我。

【问题讨论】：

您将控件绑定到字段personalDetail.date，因此它将显示该值中存在的任何日期。设置 value="" 可能不起作用。

标签： angularjs angular-ui-bootstrap bootstrap-datepicker

【解决方案1】：

<td>
  <div>
    <input class="form-control" type="text" datepicker-popup="dd/MM/yyyy" id='txtDate' ng-model="personalDetail.date" is-open="personalDetail.isOpen" close-text="Close" ng-click="open($event, personalDetail)" name="datefilter" value="" />

  </div>
</td>

你的控制器应该是

$scope.personalDetails.forEach(function(personalDetail){
    //personalDetail.date = new Date(personalDetail.date);//sets the value to the control
    personalDetail.date = !personalDetail.date || new Date(personalDetail.date).toISOString() == new Date('1/1/1900').toISOString() 
        ? '' // Date is null, undeclared, or default value
        : new Date(personalDetail.date);
  });

  $scope.open = function($event, personalDetail) {
    $event.preventDefault();
    $event.stopPropagation();

    personalDetail.isOpen = true;
  };

【讨论】：

@anilchean :) 很高兴为您提供帮助。！顺便说一句，你能分享你的 fb id 吗？
值得一提的是，如果您需要在带有验证的表单中使用 datepicker 指令，就会出现问题。 Angular UI datepicker 不接受正确的空模型，因此表单将导致无效。当我的日期选择器是 optional 并且未初始化为表单内的日期时，我遇到了这个问题。
这对我有用，但在我实际设置范围属性之前，我正在检查日期值是否为 NULL 或默认值 (1/1/1900)。 $scope.myDate = !$scope.myDate ||新日期($scope.myDate).toISOString() == 新日期('1/1/1900').toISOString() ？ '' : 新日期($scope.myDate);
@wloescher 我没有收到你的问题。
@Aravind - 不是问题，只是在您的答案中添加一些附加信息（通过检查默认日期值）。

【解决方案2】：

改变

personalDetail.date = new Date(personalDetail.date);

到

personalDetail.date = "";

点赞$scope.personalDetail={ date: "" }

【讨论】：