JQuery Datepicker

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

我在一個頁面中有兩個datePickers。我使用了兩個jQuery代碼，每個datepicker一個。
但是，它們幾乎是一樣的，唯一的區別就是ID。JQuery Datepicker

如何爲兩個datepickers保留一個jQuery代碼？（即id='datepicker'和id='datepicker2'）

來源

2011-06-21 Acubi

我懷疑它使太大的區別，但你也可以做的值設置'文件.getElementById（'startDate'）。value = dateText;'在jQuery風格中作爲'$（'＃startDate'）。val（dateText）;'。 – Rup

給一個類的輸入，從而

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

然後

$(".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; 
    } 
});

來源

2011-06-21 13:04:41 dave

可選，多好的課程名稱。 +1 – kieran

請注意，她具有不同的onSelect功能 - 您還需要以某種方式將目標元素綁定到日期選擇器上。在調用通用函數 – Rup

@Rup前單獨存儲一個'.data（）'，謝謝你沒有明白，更新，佔用不同的ID – dave

使用類和使用intialize：

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

    }); 
});

來源

2011-06-21 13:06:32

但是第一個datePicker設置了startDate的值，而不是endDate – Rup

真的，我建議dave的解決方案 –

這會工作：

<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; 
    } 
});

隨着jQuery UI的網站上說，this在onSelect回調是指與日期選擇器中使用的輸入框，這樣一個日期選擇器會提到，而另#datepicker2。

編輯

只注意到你把日期到不同的盒子，裏面這會工作：

<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; 
    } 
});

來源

2011-06-21 13:24:51 Tomgrohl

回答

相關問題