创建多个外部jQuery datepicker函数并有选择地调用

时间:2014-03-18 21:27:14

标签: javascript jquery jquery-ui datepicker

这是我原始帖子的跟进:Call jQuery datepicker from external file

编辑: 添加了正确的jQuery代码

我在一个文件中有一组Perl报告。大多数报告要求用户输入日期或日期范围。如果每个报告都在自己的文件中,这将很简单,但由于它不是,我需要一种方法来调用基于范围的datepicker或单日期datepicker。

这是jQuery代码:

        $(function () {
        $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 2,
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "../images/calendar.gif",
        dateFormat: "yyddmm",
        altField: "#forminp1",
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        },
        onSelect: function () {
            $(this).datepicker.val();
        }
    });

    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 2,
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "../images/calendar.gif",
        dateFormat: "yyddmm",
        altField: "#forminp2",
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        },
        onSelect: function () {
            $(this).datepicker.val();
        }
    });

    $("#single").datepicker({
        defaultDate: "+1w",
        numberOfMonths: 2,
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "../images/calendar.gif",
        altField: "#forminp1",
        changeMonth: true,
        changeYear: true,
        dateFormat: "yymmdd",
        onSelect: function () {
            $(this).datepicker.val();
        }
    });
});

为了测试,我创建了一个包含以下内容的HTML文件:

<p>Double Dates</p>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<!--test the output-->
<p>Output the result</p>
<input type="text" id="forminp1" size="30">&nbsp;<input type="text" id="forminp2" size="30">
<p>Single Date</p>
<input type="text" id="single">

除非我删除定位id ID的功能,否则日期选择器不会附加到任何single

有没有办法根据input id?

构建正确的日期选择器

0 个答案:

没有答案