选择所选日期时,JQUERY UI Datepicker不会关闭

时间:2018-01-26 09:35:53

标签: javascript angularjs jquery-ui datepicker

我在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”)并创建了一个函数单击元素时隐藏选择器,但是没有工作。

1 个答案:

答案 0 :(得分:0)

这里的自我解释示例遵循约定 https://jqueryui.com/datepicker/ 如果您正在通过角度进行日期选择器路线,请避免使用jQuery UI 采用 https://www.npmjs.com/package/ng-pick-datetime 然后利用片刻来处理返回的日期对象