JQuery UI，單頁上的多個日期選擇器

我正在爲屬性創建PHP網站。我不熟悉jQuery和jQuery UI，但似乎無法在其他任何地方找到答案。JQuery UI，單頁上的多個日期選擇器

請看到這個畫面拍攝（full size）：如圖所示

Screen shot

對於每一個「接受」和「到期」框中我想一個jQuery日期選擇框出現和格式。

爲了測試這個，我試着創建一個例子。

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script> 

<script> 
    $(function() { 
     $("#datepicker").datepicker({ dateFormat: 'yy-mm-dd' }); 
     $("#datepicker2").datepicker({ dateFormat: 'yy-mm-dd' }); 
    }); 
</script> 
<style> 
.ui-datepicker { 
    font-size: 80%; 
} 
</style> 

<p>Date: <input id="datepicker" type="text" /></p> 
<p>Date2: <input id="datepicker2" type="text" /></p>

哪些工作正常，但我如何得到一個日期選擇器來爲任何文本框而不必重複JS很多次。

對於比方說，50個特性，有可能是在頁面上200個輸入框帶有日期需要在填寫。

下面是從屏幕截圖一些示例代碼。

<tr> 
    <td>Property ID</td> 
    <td>House Number</td> 
    <td>Address Line 1</td> 
    <td>Gas Expiry</td> 
    <td>Gas Received</td> 
    <td>Electric Expiry</td> 
    <td>Electric Received</td> 
    <td>Property Active</td> 
    <td>Update</td> 
</tr> 

<tr> 
    <td>4</td> 
    <td>6</td> 
    <td>East Street</td> 
    <td><input name="gas_expiry[4]" type="text" id="gas_expiry[4]" value="2011-08-03" /></td> 
    <td><input name="gas_received[4]" type="text" id="gas_received[4]" value="" /></td> 
    <td><input name="electric_expiry[4]" type="text" id="electric_expiry[4]" value="" /></td> 

    <td><input name="electric_received[4]" type="text" id="electric_received[4]" value="" /></td> 
    <td> 
    <select name="active[4]" id="active[4]"> 
     <option value="0" selected="selected">No</option> 
     <option value="1">Yes</option> 
    </select> 
    </td> 
    <td><input name="edit[]" type="checkbox" id="edit[]" value="4" /></td> 

</tr>

大概是一些非常簡單的東西，我很感激任何幫助。

來源

2011-02-04 Matt

我要做的就是創建一個日曆CSS類，並連接到該CSS類，像這樣的每一個成員的行爲：

$(".calendar").datepicker({ dateFormat: 'yy-mm-dd' });

來源

2011-02-04 16:08:43 JMP

傳說，非常感謝你的工作！ – Matt 2011-02-04 16:11:41

另一件事JMP - 如何更改對齊方式？例如：http://i56.tinypic.com/2u5c6bp.png覆蓋盒子本身，是否可以將其移動到右側，使其不覆蓋盒子？ – Matt 2011-02-04 16:19:18

這個SO應該可以幫助你定位：http：// stackoverflow。com/questions/662220 /如何改變彈出位置的jQuery日期選擇器控制 – JMP 2011-02-04 16:26:15

您應該建立class屬性爲每個文本框

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

然後

$(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });

或者，如果你只有日期文本框，您可以將日期選擇爲所有文本框的

$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });

來源

2011-02-04 16:09:53 Distdev

對於任何網頁上的文本框：

$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });

來源

2011-02-04 16:10:49 acme

另一種方法，僅供參考，將

$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });

來源

2011-02-04 16:15:48

獲得對不同輸入框的功能datepickers同一頁的自定義帖子最簡單而且不會弄亂jquery-ui.css和jquery-ui.theme.css或jQuery ui庫的任何其他代碼：

<input class="datepicker" name="first_intake" id="first_intake" value="" size="30" type="date"> 
<input class="datepicker" name="second_intake" id="first_intake" value="" size="30" type="date">

在頁腳我發起的日期選擇器的功能，因爲我使用WordPress，這頁是在管理後臺，但你可以使用JavaScript片段，如果你不使用WordPress：

<?php 
function my_admin_footer() { ?> 
    <script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    jQuery('#first_intake.datepicker').datepicker({ 
     dateFormat : 'd M, yy' 
    }); 
    jQuery('#second_intake.datepicker').datepicker({ 
     dateFormat : 'd M, yy' 
    }); 
    }); 
</script> 
<?php 
} 
add_action('admin_footer', 'my_admin_footer'); 
?>

來源

2014-08-23 21:43:14

JQuery UI，單頁上的多個日期選擇器

回答

相關問題