我想顯示在日期，月份和年份在jquery

Question

分開的文本框我想改變所有類的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> 

Answer 1

我只會潛入問題是直接導致您所描述的問題。但值得一提的是，您應儘可能避免日期計算/解析/格式化的手動迴轉，並堅持內置語言功能和經過良好測試的庫。

問題1：

您選擇目前還沒有找到你的投入。選擇器#customerRequiredDate > .da_day找到具有類da_day的元素，該元素是ID爲customerRequiredDate的元素的直接子元素。您希望更改的元素不是ID爲的元素的子元素。有多種方式可以調整標記和選擇器來查找所需的特定元素，但是在對我的代碼進行的修改中（如下所示），我只簡單地給出td確實包含的輸入ID爲customerRequiredDateInputs並且已更改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>

Answer 2

您正在使用指定直接孩子的>選擇器。 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); 

我試圖保持這個簡單越好，因爲它是明確的（無犯罪），您AREN」熟悉選擇器是如何工作的，所以你可以參考jQuery文檔，並且很容易學習如何使用.next()和。 find()在這工作。

更先進的選擇的一個例子是：

$('#customerRequiredDate + td > .da_day').val(day); 
$('#customerRequiredDate + td > .da_month').val(month); 
$('#customerRequiredDate + td > .da_year').val(year); 

的+指示以下的元素，所以它與指定類獲取元素（S），這是一個TD的直接孩子，這遵循#customerRequiredDate。

最後，由於您要更改的元素是輸入，因此您需要使用.val()而不是.text()。