1

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

3 回答 3

2

这部分：

<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”的元素上（选项略有不同）。

因此，如果您需要在页面加载时发生某些事情，您还需要将该调用（您在帖子中提到的那个）放入“加载”功能中。

于 2013-07-05T21:00:00.473 回答
1

首先阅读 jQuery 文档，特别是文档就绪文档。jQuery 最基本的方面是在 DOM 准备好之前您不能安全地操作它。首先，尝试：

$(document).ready(function () {
     // your datepicker code
});
于 2013-07-05T20:56:15.163 回答
1

在 Javascript 中，您经常会遇到这样的语法 - 使用匿名对象初始化控件（在下一部分中由最外面的花括号表示）。

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

在匿名对象（大括号）中，您可以添加您喜欢的任何属性，但您需要查看特定控件读取哪些属性的文档。在这种情况下，defaultDate、changeMonth和numberOfMonths是onClose属性。您可能想要添加另一个，dateFormat如您已经发现的那样。匿名对象的语法是

{
    property1Name: 'property string value',
    property2Name: 5, // int value
    property3Name: 'third value'
}

因此，您只需将您发布的第一个示例中的逗号和 dateFormat 添加到您的日期选择器的初始化对象中。

于 2013-07-05T21:00:31.253 回答