Question

我最近为我的网站找到了一个jquery datepicker。我已经安装了相关文件，但我有一个prioblem，因为我的页面上有两个日期选择器应该定位的日期字段。目前它只适用于两个字段中的第一个，即使这两个字段具有相同的ID和名称（“日期”）。 datepicker使用的javascript位于

之下

<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"date",
        dateFormat:"%Y-%m-%d",
        isStripped:false,
        cellColorScheme:"armygreen",
        /*selectedDate:{                This is an example of what the full configuration offers.
            day:5,                      For full documentation about these settings please see the full version of the code.
            month:9,
            year:2006
        },*/
        yearsRange:[1978,2020],
        limitToToday:false,
        //cellColorScheme:"beige",

        imgPath:"img/",
        weekStartDay:1
    });
};

我不知道如何在此代码中向目标行添加另一个目标理想情况下，ID类似于定位“dateA”和“dateB”。

有什么想法吗？抱歉，如果我是愚蠢的！约翰

Answer 1

确保您使用的是JQueryUI的日期选择器，因为它是最可靠的。

如果您不熟悉JQueryUI，请访问http://jqueryui.com/demos/（这将展示它的功能）。

要查看datepicker的实时演示，请转到http://jqueryui.com/demos/datepicker/。 请务必查看选项/事件/方法！。

至于代码......

将这些脚本放在<head>中，这将为您提供 JQuery ＆amp;的脚本。 jQueryUI的：

<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#datepicker").datepicker({
            altField: "#result1, #result2",
            altFormat: "mm/dd/yy"
            //altFormat: "DD, d MM, yy" //another format
        });
    });
</script>
</head>

对于身体，我使用了以下内容：

<p>
Date: 
<input type="text" id="datepicker"> 
<input type="text" id="result1"> 
<input type="text" id="result2">
</p>

为了直观地看到我做了什么，我做了一个快速演示。随意使用它！

http://jsfiddle.net/6UnTh/23/

要自定义主题，请访问http://jqueryui.com/themeroller/并下载必要的文件（否则请使用我在<head>中提供的文件。）

希望这有帮助！确保使用JQueryUI提供的其他选项/方法！快乐的编码！

链接： JQuery（http://docs.jquery.com/Main_Page）
JQuery UI（http://jqueryui.com/demos/）

编辑:(我已经更新了演示！）：

http://jsfiddle.net/6UnTh/27/

Answer 2

<link rel="stylesheet" type="text/css" media="all" href="../css/jsDatePick_ltr.min.css" />
        <script type="text/javascript" src="../js/jsDatePick.min.1.3.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                new JsDatePick({
                    useMode:2,
                    target:"inputField1",
                    dateFormat:"%d-%M-%Y"

                });
                                new JsDatePick({
                    useMode:2,
                    target:"inputField2",
                    dateFormat:"%d-%M-%Y"

                });
                                new JsDatePick({
                    useMode:2,
                    target:"inputField3",
                    dateFormat:"%d-%M-%Y"

                });
            };
        </script>

<input type="text" size="12" id="inputField1" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField2" name="txt_ordate" class="ErrorField">
<input type="text" size="12" id="inputField3" name="txt_ordate" class="ErrorField">

使用datepicker选择多个目标

2 个答案: