我想在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

您正在使用>选择器，用于指定直接子级。 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() 。

Answer 2

我将只介绍直接导致您描述的问题的问题。 但是，值得一提的是，您应该避免手动旋转来进行日期计算/解析/格式化，并坚持使用内置的语言功能和经过良好测试的库。

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