隐藏jQuery日期选择器

Hiding the jQuery datepicker

本文关键字：选择器 日期 jQuery 隐藏      更新时间：2023-09-26

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

我的问题是日期选择器在选择日期时没有关闭。它停留在那里。如果我调用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)
        }
    });
});

我会更改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

你能试试这个吗？

$("#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();
        }
    });
});
相关文章：