0

我最近为我的网站找到了一个 jquery datepicker。我已经安装了相关文件，但是遇到了一个问题，因为我的页面上有两个日期字段应该是日期选择器的目标。目前它仅适用于两个字段中的第一个，即使两个字段具有相同的 id 和名称（“日期”）。日期选择器使用的 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
    });
};

我不知道如何将另一个目标添加到此代码中的目标行理想情况下，我喜欢它以定位“dateA”和“dateB”。

有任何想法吗？对不起，如果我很愚蠢！约翰

4

2 回答 2

0 
<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">
于 2013-03-04T10:41:04.903 回答
0

确保您使用的是 JQueryUI 的 datepicker，因为它是最可靠的。

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

要查看 datepicker 的现场演示，请访问http://jqueryui.com/demos/datepicker/。确保查看选项/事件/方法！.

至于代码...

将这些脚本放在您的 中<head>，这将为您提供JQuery和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/

于 2012-08-02T21:30:26.153 回答