1

私は JavaScript を学んでいる途中で、これまでのところかなりの扱いを受けています。とにかく、日付入力フィールドがあるページを作成しました。日付を選択するためにポップアップする小さなカレンダーが必要です。jquery UI の日付ピッカー ( 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() メソッドを効果的に 2 回実行します。1 回目は ID が "from" の要素に対して、もう 1 回は ID が "to" の要素に対して実行されます (オプションはわずかに異なります)。

したがって、ページの読み込み時に何かを発生させる必要がある場合は、その呼び出し (投稿で言及したもの) を「読み込み時」関数にも入れる必要があります。

于 2013-07-05T21:00:00.473 に答える
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 に答える