我正在尝试使用 ui-bootstrap 组件在模态中创建日期选择器。日期选择器必须发回格式化为 unix 时间戳的日期。
如果日期选择器不在模式内(=选择日期时时间戳更新),这工作正常:http ://plnkr.co/edit/xQFmVgJojiq6aG9U8f4H?p=preview
然后,我把指令放在一个模式中:http ://plnkr.co/edit/9zHQQPGAcomT5Vha33j3?p=preview
这是控制器:
.controller('MyCtrl', [ '$scope', '$modal', function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'tplModal.html',
controller: 'MyModalCtrl'
});
};
}])
.controller('MyModalCtrl', [ '$scope', '$modalInstance', function ($scope, $modalInstance) {
$scope.required= {};
$scope.disabled = function(date, mode) {
return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
};
$scope.minDate = new Date();
$scope.$watch('dt', function() {
if ($scope.dt) $scope.required.timestamp = Math.floor($scope.dt.getTime() / 1000);
console.log('timestamp: ', $scope.required.timestamp, '/ dt: ', $scope.dt);
});
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
和模态的html模板:
<div class="modal-body">
<div ng-model="dt">
<datepicker min="minDate" show-weeks="false"></datepciker>
</div>
<div>
dt <span class="uneditable-input span2">{{dt | date:'dd.MM.yyyy' }}</span>
dt <span class="uneditable-input span2">{{ dt }}</span>
timestamp <span class="uneditable-input span2">{{ required.timestamp }}</span>
</div>
</div>
在第二个版本中,日期更改时时间戳不会更新(就像 $watch 不工作一样)。
你知道如何进行这项工作吗?