隐藏 jQuery 日期选择器答案

【问题标题】：Hiding the jQuery datepicker隐藏 jQuery 日期选择器
【发布时间】：2013-11-23 13:59:47
【问题描述】：

我想在单击小图像时呈现日期选择器，选择日期，使用所选日期根据所选日期填充一组年、月和日的选择元素。我找出了 onSelect 部分并将所选日期应用于选择元素中的选项。

我的问题是日期选择器没有关闭日期选择。它留在那里。如果我调用 hide() 方法，它也会隐藏图像（span 元素的一部分）。这是我的 HTML 代码：

<span id="pickupCalendar"><img src="/images/calendar.png"></img></span>

这是脚本：

$("#pickupCalendar").click(function () {
    $("#pickupCalendar").datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, inst) {
            //code to fill the other elements with the selected date goes here
            $("#pickupCalendar").datepicker().hide(); //<-- hides the image (span element along with the datepicker)
        }
    });
});

【问题讨论】：

为什么span里面有图片？为什么要在其点击处理程序中定义日期选择器？能提供一个关于jsfiddle的demo吗？
因为我知道日期选择器可以附加到 span 元素。这是我用按钮替换图像的小提琴。 jsfiddle.net/Ysxv3

标签： javascript jquery html datepicker

【解决方案1】：

我会更改 HTML 标记，以便更轻松地定位元素。

<span id="pickupCalendar"></span><button>Button</button>

    $("button").click(function () {
        $("#pickupCalendar").show();
        $("#pickupCalendar").datepicker({
            dateFormat: 'dd-mm-yy',
            onSelect: function (dateText, inst) {
               //code to fill the other elements with the selected date goes here
               $("#pickupCalendar").datepicker().hide(); 
            }
        });
    });

FIDDLE

【讨论】：

太棒了！我修改了没有创建后续日期选择器的版本。这是我们的解决方案：jsfiddle.net/Ysxv3/4 刚刚看到您进行了更改。谢谢指导！ :)
是的，只需根据您的上下文调整概念！很高兴我能帮上忙。
我仍然想知道为什么该元素会被隐藏。 “破坏”的作用类似。
你是说img元素？因为你躲藏在你的跨度之内。如果隐藏一个 html 元素，其中的所有元素也会被隐藏。
所以通过调用 hide() 我们在附加日期选择器的父 html 元素上调用它。有没有办法给日期选择器分配一个 id 然后单独隐藏它？

【解决方案2】：

你可以试试这个吗？

$("#pickupCalendar").click(function () {
    $("#pickupCalendar").datepicker({
        dateFormat: 'dd-mm-yy',
        onSelect: function (dateText, inst) {
            //code to fill the other elements with the selected date goes here
            $("#pickupCalendar").datepicker().hide(); 
            $("#pickupCalendar img").hide();
        }
    });
});

【讨论】：

嗯，这行不通，也行不通。请注意小提琴。