Question

我试图获取一个日期，它在bootstrap ui datepicker的输入中显示为纯文本。因此我使用跨度。现在我想得到跨度的文本，但它不起作用。实际上，我得到undefined。你有一些技巧吗？

HTML

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />                  
<span ng-model="textDate">{{dt | date:'dd.MM.yyyy' }}</span>

JS

$scope.$watch('dt', function() {        
   var tD = $scope.textDate.value;
   console.log(tD);
});

Answer 1

将$ filter注入您的控制器/服务并将日期提取为字符串，如此

$scope.getDate = function() {
return $filter('date')($scope.dt, 'dd.MM.yyyy');
}

Plunkr here

旁注：假设dt已经有双向绑定，我认为$watch更改是必要的。相反，您可以直接在需要字符串值的地方使用$filter('date')($scope.dt, 'dd.MM.yyyy')。

Answer 2

Angular的ngModel在一个范围内不会工作，因为它是只读的。你需要某种输入来与ng-model进行双向绑定。为此，您可以使用绑定到输入字段上使用的模型的getter / setter。这是一个例子：

<input type="text" name="userName"
           ng-model="vm.dt"
           ng-model-options="{ getterSetter: true }" />
<span ng-bind="vm.dt()"></span>

添加ng-model-options="{ getterSetter: true }"会将模型暴露给getter / setter，这是一个你可以简单地调用你的span的函数。另外，我建议使用controllerAs语法来避免范围问题。请注意，vm是input和span周围控制器的别名。

有关详细信息，请查看ngModel上的文档。

以编程方式将Datepicker中的日期作为文本

2 个答案: