Javascript 安格拉斯。未在datepicker中更新ng模型
我试图编写jquery,使用隐藏输入区在文本单击时打开datepicker。在多个地方也需要这样做 下面是我的htmlJavascript 安格拉斯。未在datepicker中更新ng模型,javascript,jquery,angularjs,datepicker,Javascript,Jquery,Angularjs,Datepicker,我试图编写jquery,使用隐藏输入区在文本单击时打开datepicker。在多个地方也需要这样做 下面是我的html <div class="date-format"> <input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1"/> <a href="" class="date-picker" id="date1">{{date1 | d
<div class="date-format">
<input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1"/>
<a href="" class="date-picker" id="date1">{{date1 | date: 'dd MMM yyyy a'}}</a>
</div>
<div class="date-format">
<input class="hidden-date-picker" id="hidden-date2" type="hidden" ng-model="date2"/>
<a href="" class="date-picker" id="date2">{{date2 | date: 'dd MMM yyyy a'}}</a>
</div>
从控制台输出可以清楚地看到,在从日历中选择日期时,$scope.date1正在被修改。但这种变化并没有反映在html方面 使用指令可以解决ng模型未更新的问题 你的html代码 下面的代码可以帮助您。 用于HTML
在使用$scope.$apply之后,我能够解决这个问题。但如果我去别的地方试试的话。这行不通。
var app = angular.module('index-app', []);
app.controller('index-controller', function($scope) {
$scope.date1 = new Date(2016, 0, 1);
$scope.date2 = new Date();
$('.hidden-date-picker').each(function() {
$(this).datepicker({
changeYear: 'true',
changeMonth: 'true',
startDate: '07/16/1989',
firstDay: 1,
onSelect: function(dateText, inst) {
console.log($scope.$eval($(this).attr('ng-model')));
$scope.$eval($(this).attr('ng-model')).setTime(Date.parse(dateText));
console.log($scope.date1);
}
});
});
$('.date-picker').each(function() {
$(this).click(function (e) {
$('#hidden-' + $(this).attr('id')).datepicker('show')
e.preventDefault();
});
});
});
<input class="hidden-date-picker" id="hidden-date1" type="hidden" ng-model="date1" customzdatetime />
app.directive('customzdatetime', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
element.datetimepicker({
debug: false,
format: 'DD-MM-YYYY',
maxDate: moment()
}).on('dp.change', function (e) {
ngModelCtrl.$setViewValue(e.date);
scope.$apply();
});
}
};
});
<div class="input-group date mydatepicker" data-provide="datepicker">
<input type="text" class="form-control" style="outline:none !important;" id="CancelDate"
data-ng-model="CancelDate" data-ng-required="true" placeholder="Cancel Date"
data-ng-change="onChange()"
data-ng-trim="true" readonly/>
<div class="input-group-addon custumc_con">
<i class="fa fa-calendar" aria-hidden="true"></i>
</div>
</div>
$scope.onChange = function () {
//initialize today date
var today = new Date();
//set new date as next 10th day of today
var newDate = newDate.setDate(today.getDate() + 10);
//format date and set to angular model
$scope.CancelDate = newDate.format("MM/dd/yyyy");
// set new date in datepicker of bootstrap
$('.mydatepicker').datepicker('update', $scope.CancelDate);
}