跨多个字段记住 jQuery UI 日期选择器中最后选择的月份

发布于 2024-11-08 21:48:02 字数 1442 浏览 0 评论 0原文

我有一个使用标准 jQuery UI 的包含多个日期选择器文本字段的页面。我想将所有空白字段的默认日期选择器日期设置为最后选择的日期或月份，因此用户不必手动更改他们选择的每个日期选择器的月份。

我尝试通过日期选择器的 onSelect 函数将日期值存储在变量中，但不确定如何绑定 defaultDate 属性，以便它使用最后选择的日期更新所有日期选择器。

下面是基本代码。同样，如果用户将其中一个日期文本字段设置为 10/20/2011，则当他或她通过任何空白文本字段打开另一个日期选择器时，日期选择器应默认显示 10 月（而不是今天的当前日期）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>

<body>

    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" />

</body>

</html>

原文

I have a page with multiple datepicker textfields using the standard jQuery UI. I would like to set the default datepicker date to the last selected day or month for all blank fields, so the user doesn't have to manually change the month for each datepicker they select.

I have tried storing the date value in a variable via the onSelect function of the datepicker, but am unsure how to bind the defaultDate property so it updates all datepickers with whatever the last selected date was.

Below is the basic code. Again, if a user sets one of the date textfields to 10/20/2011, when he or she opens another datepicker through any of the blank textfields the datepicker should display the month of October by default (not today's current date).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/blitzer/jquery-ui.css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
</head>

<body>

    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" /> <br />
    <input type="text" class="datepicker" />

</body>

</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

宣告ˉ结束 2024-11-15 21:48:02

怎么样：

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText, inst) {
        $(".datepicker").datepicker("option", "defaultDate", dateText);
    }
});

使用 defaultDate 选项和 onSelect 事件。

这是一个工作示例： http://jsfiddle.net/MXHdj/

How about:

$(".datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function(dateText, inst) {
        $(".datepicker").datepicker("option", "defaultDate", dateText);
    }
});

Using the defaultDate option and the onSelect event.

Here's a working example: http://jsfiddle.net/MXHdj/

回复收藏 0 原文

~没有更多了~