我正在学习 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/