隐藏/显示自定义按钮上的日期选择器点击

Question

如何仅在点击自定义按钮时显示/隐藏日期选择器？

我的目标是在点击日期选择器以外的其他位置时隐藏日期选择器的功能。

Answer 1

考虑使用showOn按钮选项，它会在日期选择器附近启用按钮。

您可以使用show和hide datepicker方法切换可见性。

在演示中，我已经阻止了任何地方的开/关，所以它完全被处理了。

代码：

jQuery.datepicker._checkExternalClick = function () {};

$("#datepicker").datepicker({
    constrainInput: true,
    showOn: 'none',
    onSelect: function () {
        $(this).data('datepicker').inline = true;
    },
    onClose: function () {
        $(this).data('datepicker').inline = false;
    }
});

$('#toggle').click(function () {
    if ($(this).hasClass('opened')) {
        $("#datepicker").datepicker('hide');
    } else {
        $("#datepicker").datepicker('show');
    }
    $(this).toggleClass('opened');
});

演示：http://jsfiddle.net/IrvinDominin/8wLg92x1/