在自定义按钮单击时隐藏/显示日期选择器

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/