我在js中使用了一个datepicker(使用Jquery UI),效果很好。当我点击日期时,日期选择器关闭。但是,当我点击已经选择的日期时,日期选择器不会关闭。
(function () {
'use strict';
angular
.module('selectDate')
.directive('datepicker', DatepickerDirective)
DatepickerDirective.$inject = [];
function DatepickerDirective() {
return {
restrict: 'A',
scope: {
ngModel: '=',
ngDisabled: '='
},
require: 'ngModel',
link: function ($scope, $elem) {
var input = $elem.find('input'),
picker = $elem.find('.picker'),
container = $elem.is('.control-group') ? $elem : $elem.closest('.control-group'),
label = $('label[for="' + input.attr('id') + '"]'),
close = $('<i class="icon-x"></i>'),
bodyListener = function () {
picker.hide();
},
openListener = function ($e) {
if (!$scope.ngDisabled) {
picker.show();
$('body').unbind('click', bodyListener).on('click', bodyListener);
input.blur();
}
$e.stopPropagation();
$e.preventDefault();
};
input.on('click', openListener);
label.on('click', openListener);
picker.on('click', function (e) {
e.stopPropagation();
});
close.on('click', function (e) {
$scope.$apply(function () {
$scope.ngModel = '';
});
e.stopPropagation();
});
container.addClass('date');
if (!$elem.hasClass('no-clear')) {
var target = $elem.is('.input') ? $elem : $elem.find('.controls');
target.append(close);
} else {
$elem.find('.controls').append('<i class="icon-8"></i>');
}
$scope.$watch('ngModel', function (val) {
picker.hide();
if (val) {
close.show();
} else {
close.hide();
}
});
$scope.$watch('ngDisabled', function (val) {
input.prop('disabled', val)[(val ? 'add' : 'remove') + 'Class']('disabled');
});
}
};
}}}}();
我希望每当我点击选择日期时,即使已经选择了该日期,也会关闭日期选择器。点击所选日期不做任何事情。
我尝试创建一个新的var来检查所选元素的类(我通过检查元素获得了类,它类似于“ui-state-active ui-state-hover”)并创建了一个函数单击元素时隐藏选择器,但是没有工作。
答案 0 :(得分:0)
这里的自我解释示例遵循约定 https://jqueryui.com/datepicker/ 如果您正在通过角度进行日期选择器路线,请避免使用jQuery UI 采用 https://www.npmjs.com/package/ng-pick-datetime 然后利用片刻来处理返回的日期对象