Jquery UI Datepicker如何

Question

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

Answer 1

这部分：

<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调用，它是我上面提到的“on page load”函数的一部分。 它们有效地运行.datepicker（）方法两次 - 一次在ID为“from”的元素上，一次在ID为“to”的元素上（具有稍微不同的选项）。

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

Answer 2

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

$(document).ready(function () {
     // your datepicker code
});

Answer 3

在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'
}

所以你只需要添加一个逗号和日期格式，就像你发布到日期选择器的初始化对象的第一个例子一样。

Jquery UI Datepicker如何

问题描述

3 个解决方案

解决方案1
2 2013-07-05 21:00:00

解决方案2
1 2013-07-05 20:56:15

解决方案3
1 2013-07-05 21:00:31

Jquery UI Datepicker如何

问题描述

3 个解决方案

解决方案1 2 2013-07-05 21:00:00

解决方案2 1 2013-07-05 20:56:15

解决方案3 1 2013-07-05 21:00:31

解决方案1
2 2013-07-05 21:00:00

解决方案2
1 2013-07-05 20:56:15

解决方案3
1 2013-07-05 21:00:31