Javascript Jquery UI日期选择器如何_Javascript_Jquery

Javascript Jquery UI日期选择器如何

javascript jquery

Javascript Jquery UI日期选择器如何,javascript,jquery,Javascript,Jquery,我正处于学习javascript的过程中，到目前为止，我对它已经有了相当的了解。无论如何，我建立了一个页面，有一个日期输入字段，我需要一个小日历弹出选择日期。jQueryUIDatePicker看起来非常好，唯一的问题是我对jquery一无所知。我可以复制并粘贴代码，但除此之外，我知道的不多。我需要日历来选择一系列日期，比如在。我可以使用那里的源代码来输入，但问题是我还需要它采用ISO 8601格式，如yyyy-mm-dd。网站上说，要做到这一点，我使用以下代码： $( ".selector"

我正处于学习javascript的过程中，到目前为止，我对它已经有了相当的了解。无论如何，我建立了一个页面，有一个日期输入字段，我需要一个小日历弹出选择日期。jQueryUIDatePicker看起来非常好，唯一的问题是我对jquery一无所知。我可以复制并粘贴代码，但除此之外，我知道的不多。我需要日历来选择一系列日期，比如在。我可以使用那里的源代码来输入，但问题是我还需要它采用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>

首先阅读jQuery文档，尤其是文档。jQuery最基本的方面是，在DOM准备就绪之前，您无法安全地操作它。要开始，请尝试：

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

首先阅读jQuery文档，尤其是文档。jQuery最基本的方面是，在DOM准备就绪之前，您无法安全地操作它。要开始，请尝试：

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

本部分：

<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>

这是：

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

jQuery调用是我前面提到的页面加载函数的一部分。它们有效地运行了.datepicker方法两次——一次在ID为from的元素上运行，一次在ID为to的元素上运行，选项稍有不同

因此，如果您需要在页面加载时发生一些事情，您需要将您在文章中提到的调用也放入加载函数中。

这部分：

<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>

这是：

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

因此，如果您需要在页面加载时发生一些事情，那么您也需要将您在文章中提到的调用放入加载函数中。

在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添加到日期选择器的初始化对象中。

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

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

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

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

好的，这非常有见地，我现在对此有了更多的理解。但我还是不能让它工作。你是说我可以把一个dateFormat代码放在主页加载函数的任何地方吗？如果你把$.selector.datepicker{dateFormat:yy-mm-dd}；在该函数中，除了$to。。。还有…的美元。。。调用或替换它们，如果您不使用它们，那么它会将您的.datepicker方法应用于任何具有选择器类的HTML元素。不，它不会。调用$selector.datepicker{optionsObject}；对于同一个控件，两次不只是在先前实例化的日期选择器上添加选项。我不知道它会起什么作用，但我相信这是一个灰色地带，应该避免。一旦在选择器上调用.datepicker{}，您就已经对它进行了初始化，之后应该使用.datepicker'methodFromDocumentation'，'paramForMethod'来更改值。@Bikonja没有提到在同一元素上调用.datepicker两次。我认为当OP提到这两个jQuery调用时，它们只是jQueryUI文档页面中的示例。但我不想假设，所以我指示OP添加或替换现有呼叫。不过，这是一个很好的观点，如果你有，那么这三个都会导致意外的结果。好吧，这很有见地，我现在更明白了。但我还是不能让它工作。你是说我可以把一个dateFormat代码放在主页加载函数的任何地方吗？如果你把$.selector.datepicker{dateFormat:yy-mm-dd}；在该功能中

除了$to。。。还有…的美元。。。调用或替换它们，如果您不使用它们，那么它会将您的.datepicker方法应用于任何具有选择器类的HTML元素。不，它不会。调用$selector.datepicker{optionsObject}；对于同一个控件，两次不只是在先前实例化的日期选择器上添加选项。我不知道它会起什么作用，但我相信这是一个灰色地带，应该避免。一旦在选择器上调用.datepicker{}，您就已经对它进行了初始化，之后应该使用.datepicker'methodFromDocumentation'，'paramForMethod'来更改值。@Bikonja没有提到在同一元素上调用.datepicker两次。我认为当OP提到这两个jQuery调用时，它们只是jQueryUI文档页面中的示例。但是我不想假设，所以我指示OP要么添加，要么替换现有的调用。但是，这是一个很好的观点，如果你有，那么这三个调用都会导致意外的结果。