gpt4 book ai didi

javascript - Jquery UI 日期选择器如何

转载 作者:行者123 更新时间:2023-11-30 10:29:52 25 4
gpt4 key购买 nike

我正在学习 javascript,到目前为止我已经掌握了它。无论如何,我构建了一个具有日期输入字段的页面,我需要一个小日历来弹出以从中选择日期。 jquery UI datepicker ( http://jqueryui.com/datepicker ) 看起来很不错,唯一的问题是我对 jquery 一无所知。我可以复制并粘贴代码,但除此之外,我不太了解。我需要日历来选择日期范围(例如 http://jqueryui.com/datepicker/#date-range )。我可以使用那里的源代码将其放入,但问题是我还需要它采用 ISO 8601 格式(如 yyyy-mm-dd)。该网站说要做到这一点,我使用以下代码:

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });

好的,很好,我该把它放在哪里?这是网站的源代码,我应该把它放在哪里?

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />


</body>
</html>

最佳答案

这部分:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

...告诉浏览器在开始加载/呈现页面内容之前加载 jQuery 和 jQuery UI 库。

这个:

<script>
$(function() {

});
</script>

...是一个 jQuery 函数,在页面加载完成后执行。

这个:

$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});

还有这个:

$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});

是 jQuery 调用,是我上面提到的“页面加载”功能的一部分。他们有效地运行了两次 .datepicker() 方法——一次在 ID 为“from”的元素上,一次在 ID 为“to”的元素上(选项略有不同)。

因此,如果您需要在页面加载时发生某些事情,您还需要将该调用(您在帖子中提到的调用)放入“加载时”函数中。

关于javascript - Jquery UI 日期选择器如何,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17496647/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com