Я хочу показать дату как дату, месяц и год в отдельных текстовых полях в jquery

Question

Я хочу изменить текст всех классов идентификатора customerRequiredDate. Я пробую это таким образом, но не устанавливаю день, месяц и год в разных текстовых полях.

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, который является прямым потомком элемента с идентификатором customerRequiredDate. Элементы, которые вы хотите изменить, не являются дочерними элементами элемента с идентификатором customerRequiredDate. Существуют различные способы настройки разметки и селекторов для поиска нужного элемента, но в моих модификациях к вашему коду (ниже) я просто дал td, что содержит входы ID customerRequiredDateInputs и изменен селекторов в JS, чтобы использовать его. (ИМО, было бы лучше, чтобы дать свои идентификаторы input элементы и непосредственно нацелить их.)

Выпуск 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); 

Я пытался сохранить это простой, насколько это возможно, как это ясно (без обид), что вы Арен» t знакомы с тем, как работают селекторы, поэтому вы можете обратиться к документации jQuery и очень легко узнать, как .next() и. find() работа в этом.

Примером более продвинутых селекторов будет:

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

+ указывает на следующий элемент, поэтому он получает элемент (ы) с указанным классом, который является прямым потомком ТД, который следует #customerRequiredDate.

И, наконец, поскольку элементы, которые вы меняете, являются входами, вам необходимо использовать .val() вместо .text().