在一个有角度的项目中,我有一个 bootstrap-ui 日期选择器,用于提供发票支付日期的信息。
最初,在创建发票时,由于尚未付款,因此我应该有一个 ng-model 变量指示 null 或类似的东西:
$scope.invoice.Payment_Date = null
问题是,日期选择器似乎需要一个有效的日期对象才能工作。当以这种方式使用所有内容时,当我在 datepicker 中选择一个日期表示我的发票已支付时,datepicker 会指示正确的日期,例如 2016 年 2 月 15 日,星期二,但 ng-model 变量仍然为空。
如果我这样初始化变量:
$scope.invoice.Payment_Date = new Date();
然后在更改 datepicker 日期时,ng-model 会按应有的方式更新。
问题是,我可能不得不创建/更新发票而不说它已经支付,这样做,我得到一个 Payment_Date,它具有所述发票的创建/更新日期的值。
有没有办法在 datepicker 保持不变时将此变量设置为 null 或为空,但在使用时让它获得正确的 datepicker 值?
希望有人能帮忙!
编辑:这是 datepicker 的 HTML 代码:
<form name="formFacture" novalidate rc-submit="modifierFacture()">
<div class="form-group">
<label>Date de paiement : </label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd MMMM yyyy" ng-model="facture.Date_Paiement" is-open="popupDatePaiement.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Fermer" clear-text="Effacer" current-text="Aujourd'hui" readonly="readonly" ng-click="openDatePaiement()" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePaiement()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="container text-center">
<button type="submit" class="btn btn-primary">Enregistrer</button>
<div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')">Retour</div>
</div>
</form>
这是JS代码:
$scope.facture = {};
$scope.dateOptions = {
startingDay: 1
};
$scope.popupDatePaiement = {
opened: false
};
var openDatePaiement = $scope.openDatePaiement = function() {
$scope.popupDatePaiement.opened = true;
};
$scope.modifierFacture = function(){
console.log($scope.facture);
return
}
查看代码后,我发现:
- 我可以使用 datepicker 获得一个有效的日期(ng-model 有一个小错误),但是如果我两次更改日期,facture.Date_Paiement 变量将保留第一个选择,第二个选择不会转发给它。
- 如果我在日期选择器中使用“清除”按钮,facture.Date_Paiement 变量不会恢复为 null
我试过添加这一行:
$scope.Date_Paiement = null
在 openDatePaiement 函数内部,但在这种情况下,facture.Date_Paiement 始终为空。