web-dev-qa-db-ja.com

jQuery datepickerを複数のインスタンスに適用する

1回のインスタンスで正常に動作するjQueryの日付ピッカーコントロールがありますが、複数のインスタンスでどのように動作するかはわかりません。

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

For Eachループがなくても正常に機能しますが、「MyRecords」コレクションに複数のアイテムがある場合は、最初のテキストボックスのみが日付ピッカーを取得します（IDに関連付けられているため意味があります）。テキストボックスにクラスを割り当てて指定しようとしました：

$('.my_class').datepicker();

ただし、すべての場所に日付ピッカーが表示されますが、最初のテキストボックスはすべて更新されます。

この作品を作る正しい方法は何ですか？

javascriptjqueryjquery-ui
70
gfrizzle

html：

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

脚本：

$('.datepick').each(function(){
    $(this).datepicker();
});

（疑似コードを少し単純化するために少しコーディングしました）

117
SeanJA

私はちょうど同じ問題を抱えていました。

日付選択を使用する正しい方法は$('.my_class').datepicker();ですが、同じIDを複数の日付ピッカーに割り当てないようにする必要があります。

10
Shuo

明らかな答えは、異なるID、各テキストボックスの個別のID、などを生成することです

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

ASP.netがわからないため、角かっこ内に一般的なCのような構文コードを追加しました。それを実際のASP.netコードに変換しても問題はありません。

次に、できるだけ多くを生成する方法を見つける必要があります

$('#my_date[i]').datepicker();

Model.MyRecords。繰り返しますが、角括弧内にカウンターがあるため、jQuery関数は次のようになります。

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>
4
evilpenguin
<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>
4
codeguru

簡単な解決策があります。

<html>
    <head>
        <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> 
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/flexcroll.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="../js/JScript.js"></script>
        <title>calendar</title>    
        <script type="text/javascript"> 
            $(function(){$('.dateTxt').datepicker(); }); 
        </script> 
    </head>
    <body>
        <p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
        <p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
        <p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
    </body>
</html>
3
Deepak Singh

実行時に生成された入力テキストボックスにdatepickerを追加する場合、既にdatepickerが含まれているかどうかを確認し、最初にクラスhasDatepickerを削除してからdatePickerを適用する必要があります。

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }
2
Harshit Singh

SeanJAの回答へのちょっとしたメモ。

興味深いことに、KnockoutJSとjQueryを一緒に次の入力を使用する場合異なるIDを使用、ただし同じデータバインド監視可能：

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

1つの（同じ）日付ピッカーを両方の入力にバインドします（それらのIDまたは名前が異なっていても）。

ViewModelの別個のオブザーバブルを使用して、各入力に個別の日付ピッカーをバインドします。

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

初期化：

$('.datepick').each(function(){
    $(this).datepicker();
});
1
user1572418

ここでの解決策は、多くの人が述べているように異なるIDを持つことです。問題は、まだ日付選択ツールの奥深くにあります。修正してください。ただし、datepickerには1つのラッパーID「ui-datepicker-div」がありません。これは、テーマの http://jqueryui.com/demos/datepicker/#option-showOptions で見られます。

このIDをクラスに変更できるオプションはありますか？この明らかな修正のためだけに、このスクリプトを分岐する必要はありません!!

0
Alex Grande

私は同じ問題を抱えていましたが、最終的にはASP Webユーザーコントロールからスクリプトを呼び出す方法に問題があることを発見しました。ClientScript.RegisterStartupScript()を使用していましたが、スクリプトに一意のキーを与えるのを忘れた（2番目の引数）両方のスクリプトに同じキーが割り当てられ、最初のボックスのみが実際に日付ピッカーに変換されていたので、テキストボックスのIDをキーに追加して一意にする：

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
0
kad81

IDの代わりにクラスの使用を変更するには

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>
0
Aehandasa

Datepickerクラスを動的に追加する際にも同様の問題がありました。私が見つけた解決策は、datepicker.jsの46行目をコメントアウトすることでした

// this.element.on('click', $.proxy(this.show, this));
0
mozgras

私の場合、<input>要素は任意のIDであり、SeanJAの回答のようにクラスを使用して日付ピッカーを適用していましたが、日付ピッカーは最初のものにのみ適用されていました。 JQueryが自動的にIDを追加し、それがすべての要素で同じであることを発見しました。これは、最初のものだけがdatepickerされた理由を説明しました。

0
jamsandwich