[英]I want to display date as date, month and year in seperate text boxes in jquery
我想更改所有類的customerRequiredDate id的文本。 我正在嘗試以這種方式,但是沒有在不同的文本框中設置日期,月份和年份。
customerRequiredDate=calcdate(5);
day=customerRequiredDate.substr(8,2);
month=customerRequiredDate.substr(5,2);
year=customerRequiredDate.substr(0,4);
$('#customerRequiredDate > .da_day').text(day);
$('#customerRequiredDate > .da_month').text(month);
$('#customerRequiredDate > .da_year').text(year);
function calcdate(leaddays) {
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var c = 1;
for (var i =0; i<leaddays; i++) {
var nd = new Date();
nd.setMonth(nd.getMonth());
nd.setDate(nd.getDate() + c);
var mn = nd.getMonth()+1;
var dy = nd.getDate();
var yy = nd.getFullYear();
var day = nd.getDay();
c++;
if (( day == 0) || (day == 6)) { // omit Sun and Sat
i--;
}
else {
if(dy<10) {
dy="0" +dy;
}
if(mn<10) {
mn="0" +mn;
}
var d = yy + "/" + mn+ "/" + dy;
}
}
return d;
}
我的HTML是:
<tr>
<td class="column-data" id="customerRequiredDate">
Customer Required Date:
</td>
<td class="column-data">
<input type="text" name="day" class="da_day" value="{$da_day}" size="2"/>
<input type="text" name="month" class="da_month" value="{$da_month}" size="2"/>
<input type="text" name="year" class="da_year" value="{$da_year}" size="4"/>
(dd-mm-yyyy)
</td>
</tr>
您正在使用>
選擇器,用於指定直接子級。 customerRequiredDate
沒有任何子代,因此它將不起作用。
對於您擁有的元素結構,您需要類似以下內容:
$('#customerRequiredDate').next('td').find(".da_day").val(day);
$('#customerRequiredDate').next('td').find(".da_month").val(month);
$('#customerRequiredDate').next('td').find(".da_year").val(year);
我試圖使它盡可能簡單,因為很明顯(不冒犯)您不熟悉選擇器的工作原理,因此您可以參考jQuery文檔並非常輕松地學習.next()
和。 find()
在此工作。
更高級的選擇器的一個示例是:
$('#customerRequiredDate + td > .da_day').val(day);
$('#customerRequiredDate + td > .da_month').val(month);
$('#customerRequiredDate + td > .da_year').val(year);
+
表示以下元素,因此它將獲取具有指定類的元素,該類是TD的直接子代,緊隨#customerRequiredDate
。
最后,由於要更改的元素是輸入,因此需要使用.val()
而不是.text()
。
我將只介紹直接導致您描述的問題的問題。 但是,值得一提的是,您應該避免手動旋轉來進行日期計算/解析/格式化,並堅持使用內置的語言功能和經過良好測試的庫。
問題1:
您的選擇器找不到您的輸入。 選擇器#customerRequiredDate > .da_day
查找類為da_day
的元素,該元素是ID為customerRequiredDate
的元素的直接子元素。 您希望更改的元素不是ID為customerRequiredDate
的元素的子元素。 您可以通過多種方式調整標記和選擇器以查找所需的特定元素,但是在對代碼進行修改(如下)時,我只是給了確實包含輸入ID的customerRequiredDateInputs
的td
並更改了選擇器在JS中使用它。 (IMO,最好給您的input
元素ID並直接將它們作為目標。)
問題2:
要更改輸入的值,您需要使用.val()
而不是.text()
修改后的代碼:
customerRequiredDate=calcdate(5); day=customerRequiredDate.substr(8,2); month=customerRequiredDate.substr(5,2); year=customerRequiredDate.substr(0,4); $('#customerRequiredDateInputs > .da_day').val(day); $('#customerRequiredDateInputs > .da_month').val(month); $('#customerRequiredDateInputs > .da_year').val(year); function calcdate(leaddays) { var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; var c = 1; for (var i =0; i<leaddays; i++) { var nd = new Date(); nd.setMonth(nd.getMonth()); nd.setDate(nd.getDate() + c); var mn = nd.getMonth()+1; var dy = nd.getDate(); var yy = nd.getFullYear(); var day = nd.getDay(); c++; if (( day == 0) || (day == 6)) { // omit Sun and Sat i--; } else { if(dy<10) { dy="0" +dy; } if(mn<10) { mn="0" +mn; } var d = yy + "/" + mn+ "/" + dy; } } return d; }
<table> <tr> <td class="column-data" id="customerRequiredDate"> Customer Required Date: </td> <td class="column-data" id="customerRequiredDateInputs"> <input type="text" name="day" class="da_day" value="" size="2"/> <input type="text" name="month" class="da_month" value="" size="2"/> <input type="text" name="year" class="da_year" value="" size="4"/> (dd-mm-yyyy) </td> </tr> </table> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.