獲取從日期選擇日期編程爲文本

Question

我試圖得到一個日期，它是顯示在引導UI日期選擇純文本的輸入。因此，我使用跨度。 現在我想獲得跨度的文本，但它不起作用。其實，我得到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

進樣$濾入控制器/服務，並提取日期，像這樣

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

Plunkr here

側面說明一個字符串：假設dt已經有雙向綁定，我不認爲有必要對$watch進行更改。相反，您可以直接在需要字符串值的地方使用$filter('date')($scope.dt, 'dd.MM.yyyy')。

Answer 2

，因爲它是隻讀角的ngModel不會在跨度工作。您需要某種輸入來與ng模型進行雙向綁定。爲此，您可以使用綁定到輸入字段上使用的模型的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方法是，你可以在你的跨度簡單地調用一個函數。另外我會建議使用controllerAs語法來避免範圍問題。注意vm對於input和span控制器周圍的別名。

欲瞭解更多信息，請檢查ngModel的文檔。