JQUERY UI Datepicker won't close when selecting selected date

Question

I have a datepicker in js (using Jquery UI), that works just fine. When i click on a date, the datepicker closes. But, when I click the date that is already selected, the datepicker won t close.

(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');
            });
        }
    };
}}}}();

I'm expecting that the datepicker will close whenever i click to select a date, even if that date is already selected. Clicking on the selected date isn t doing anything.

I tried making a new var that checks for the class of the selected element (I got the class by inspecting the element and it s something like "ui-state-active ui-state-hover") and made a function that hides the picker when the element is clicked, but in didn't work.

Teezy7 Teezy7 · Accepted Answer · 2018-11-13T10:24:51

self explanatory examples here follow conventions https://jqueryui.com/datepicker/ if you are going through the datepicker route through angular avoid jquery ui use https://www.npmjs.com/package/ng-pick-datetime then use moments to handle the date objects coming back

JQUERY UI Datepicker won't close when selecting selected date

1 Answers