我想在jquery中的单独文本框中显示日期作为日期,月份和年份

时间:2016-05-20 14:57:11

标签: jquery jquery-selectors

我想更改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>

2 个答案:

答案 0 :(得分: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);

我试图尽可能简单地保持这一点,因为很明显(没有冒犯)你不熟悉选择器如何工作,所以你可以参考jQuery文档并很容易地学习如何{{1 }和。.next()在此工作。

更高级选择器的一个例子是:

find()

$('#customerRequiredDate + td > .da_day').val(day); $('#customerRequiredDate + td > .da_month').val(month); $('#customerRequiredDate + td > .da_year').val(year); 表示以下元素,因此它获取具有指定类的元素,该元素是TD的直接子元素,其后跟+

最后,由于您要更改的元素是输入,因此您需要使用#customerRequiredDate代替.val()

答案 1 :(得分:1)

我只会深入研究直接导致您描述的问题的问题。值得一提的是,您应尽可能避免手动旋转进行日期计算/解析/格式化,并坚持使用内置语言功能和经过良好测试的库。

问题1:

您的选择器未找到您的输入。选择器#customerRequiredDate > .da_day查找具有类da_day的元素,该元素是ID为customerRequiredDate的元素的直接子元素。您希望更改的元素不是ID为customerRequiredDate的元素的子元素。您可以通过多种方式调整标记和选择器以查找所需的特定元素,但在我对代码的修改中(下方),我只是简单地给出了所做的td 包含输入ID customerRequiredDateInputs并更改JS中的选择器以使用它。 (IMO,最好提供您的input元素ID并直接定位它们。)

问题2:

要更改输入值,您需要使用.val()而不是.text()

修改后的代码:

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;