JQuery Datepicker

Question

<script type="text/javascript"> 
    $(function() { 
     $("#datepicker").datepicker({ 
      showOn: "button", 
      buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
      buttonImageOnly: true, 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText, inst) { 
       document.getElementById('startDate').value = dateText 
      } 
     }); 
    }); 
</script> 
<script type="text/javascript"> 
    $(function() { 
     $("#datepicker2").datepicker({ 
      showOn: "button", 
      buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
      buttonImageOnly: true, 
      dateFormat: 'yy-mm-dd', 
      onSelect: function(dateText, inst) { 
       document.getElementById('endDate').value = dateText 
      } 
     }); 
    }); 
</script> 
<div class="demo"> 
    <div class="date"> 
     <label class="label">Start Date</label> 
     <input type="text" id="datepicker" /> 
    </div> 
    <div class="date"> 
     <label class="label">End Date:</label> 
     <input type="text" id="datepicker2" /> 
    </div> 
</div> 

1つのページに2つのdatePickerがあります。私は2つのjQueryコードを使用しました。
しかし、それらはほとんど同じで、唯一の違いはIDです。

両方のdatepickerに1つのjQueryコードを保存するにはどうすればよいですか？ （すなわちid='datepicker'とid='datepicker2'）

Answer 1

クラスを使用し、使用してintialize

$(".pickable").datepicker({ 
    showOn: "button", 
    buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
    buttonImageOnly: true, 
    dateFormat: 'yy-mm-dd', 
    onSelect: function (dateText, inst) { 
     $(this).value = dateText; 
    } 
}); 

Answer 2

次に入力にそう

<input type="text" class="pickable" id="datepickerblah" /> 

をクラスを与える：

<input type="text" id="datepicker" class="mydatepicker" /> 
<input type="text" id="datepicker2" class="mydatepicker" /> 

$(".mydatepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
     buttonImageOnly: true, 
        dateFormat: 'yy-mm-dd', 
        onSelect: function(dateText, inst) { 
         document.getElementById('endDate').value = dateText 
        } 

    }); 
}); 

Answer 3

これは動作します：

<input type="text" id="datepicker" class="datepicker" /> 
<input type="text" id="datepicker2" class="datepicker" /> 

$(".datepicker").datepicker({ 
    showOn: "button", 
    buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
    buttonImageOnly: true, 
    dateFormat: 'yy-mm-dd', 
    onSelect: function(dateText, inst) { 

     this.value = dateText; 
    } 
}); 

#datepicker2

にonSelectコールバックでthisは、日付ピッカーで使用される入力ボックスを意味するので、1つの日付ピッカーがを指すであろう、そして他の、jQueryのUIのウェブサイト上で述べたように。私はそれが大きな違いになりますが、あなたはまた、値がドキュメント `設定行うことができ疑う

<input type="text" id="datepicker" class="datepicker startdate" /> 
<input type="text" id="datepicker2" class="datepicker enddate" /> 

$(".datepicker").datepicker({ 
    showOn: "button", 
    buttonImage: "jqueryLibrary/css/ui-lightness/images/Calendar2.jpg", 
    buttonImageOnly: true, 
    dateFormat: 'yy-mm-dd', 
    onSelect: function(dateText, inst) { 
     var elem = "startDate"; 
     if($(this).hasClass("enddate") { 
      elem = "endDate" 
     } 
     document.getElementById(elem).value = dateText; 
    } 
});