web-dev-qa-db-ja.com

複数の入力に対するjQueryDatepicker

JQueryのdatepickerスクリプトがあります：

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

このスクリプトを2つの入力に対して初期化する場合、最初の入力に対してのみ機能します。両方の入力にどのように使用しますか？

<input type="text" name="MyDate1" id="datepicker">
<input type="text" name="MyDate2" id="datepicker">
javascriptjqueryjquery-uidatepickerjquery-ui-datepicker
9
Gusgus

すべてのidをclassに変更するだけです。

<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">

$(function() {
  $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});

も使用できます

$(function() {
  $( "input[name^=MyDate]" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
22
thecodeparadox

これを繰り返すのはうんざりですが、それでも、もう一度繰り返しています。 idsは一意である必要があります。だから、これを使用してください：

<input type="text" name="MyDate1" class="datepicker">
<input type="text" name="MyDate2" class="datepicker">

と

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
6
Parth Thakkar

IDが重複していることは無効です。代わりにクラスを追加する必要があります。

<input type="text" name="MyDate1" class="datepicker" id="datepicker1">
<input type="text" name="MyDate2" class="datepicker" id="datepicker2">

次に、次のことができます。

$(function() {
    $( ".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });
});
4
Ethan Brown

名前でdatepicker関数にアクセスします。

$(function() {
    $('[name="MyDate1"]').datepicker({ dateFormat: "yyyy-mm-dd" });
});
2
Ankit

Djangoテンプレートのように、入力フィールドが動的に生成される場合は、その場でクラスを追加することもできます。

<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

#idを使用して入力フィールドを取得し、クラスを追加します

$(function() {
    $( "#datepicker1, #datepicker2" ).addClass('datepicker');
    $( ".datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});
1
Staccato
<input type="text" name="MyDate1" id="datepicker1">
<input type="text" name="MyDate2" id="datepicker2">

#idを使用して入力フィールドを取得し、datepickerを適用するだけです。

$(function() {
    $( "#datepicker1, #datepicker2" ).datepicker({ dateFormat: "yy-mm-dd" });
});
0
Sudip Sur