[英]jQuery DatePicker not working in AngularJs modal
I am not able to open jQuery Date Picker in Model. 我无法在模型中打开jQuery Date Picker。 Date picker in outside model working fine but inside model not working.
外部模型中的日期选择器工作正常,但内部模型中的日期选择器无法正常工作。 Here is the code:-
这是代码:-
demo.html demo.html
<button class="btn" ng-click="open()">Open me!</button>
<script type="text/ng-template" id="myModalContent.html">
<section class="popupBody">
<form ng-submit="add()" name="deals_form">
<input type="text" id="dt1">
<input type="text" id="dt2">
</form>
</section>
</script>
<script type="text/javascript">
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
</script>
AngularJS controller: demo.js AngularJS控制器:demo.js
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
modalInstance.result.then(function(selected) {
$scope.selected = selected;
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
var ModalInstanceCtrl = function($scope, $modalInstance, $timeout) {
$scope.open = function() {
$timeout(function() {
$scope.opened = true;
});
};
$scope.ok = function() {
$modalInstance.close($scope.dt);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
Here model control is working but Datepicker is not working inside model. 在这里,模型控制有效,但Datepicker在模型内部不起作用。 Please help me in making jQuery datepicker work in Modal.
请帮助我使Modal中的jQuery datepicker起作用。
$(document).on('click',function(){
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
});
I think you lost your dom element, at the time of firing datapicker event.Go with the highest level dom id as a Scope or on Document 我认为您在触发数据选择器事件时丢失了dom元素。请使用最高级别的dom id作为范围或文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.