Question

我有两种输入类型的月份。我想要发生的是当我向第一个字段输入日期时，第二个字段将自动填充相同的月份和一年。我怎样才能使用javascript实现这一目标？谢谢。

Start date: <input type='month' name='fromdate'> to <input type='month' name='deadline'>

注意：我需要使用输入类型月份，请不要向我推荐我使用jquery的datepicker，因为它使用的是文本框。

Answer 1

以下是您可以通过该代码获得所需目的的代码

<script>
function getDateAhead()
{
    var str = document.getElementById('fromDate').value;
    var res = str.split("-");
    var newdate = (parseInt(res[0])+1)+"-"+res[1]
    console.log(str);
    console.log(newdate);
    document.getElementById('toDate').value = newdate;
}
</script>
<input type="month" id="fromDate" onChange="getDateAhead()"/>
<input type="month" id="toDate"/>

<强>更新

<script>
function getDateAhead()
{
    var str = document.getElementById('fromDate').value;
    var res = str.split("-");
var year = parseInt(res[0])+1;    
var month = parseInt(res[1])-1;
    if (month <= 9 && month > 0 )
    {
        month = "0"+month;
    }
    else if (month == 0)
    {
        month = "12";  
        year = year - 1;
    }
    var newdate = year+"-"+month;
    console.log(str);
    console.log(newdate);
    document.getElementById('toDate').value = newdate;
}
</script>
<input type="month" id="fromDate" onChange="getDateAhead()"/>
<input type="month" id="toDate"/>

正在使用 Demo

Answer 2

这个JS使用日期对象来计算deadline。截止日期始终是下一年的上个月的最后一天。 deadline包含一个完整日期对象，其中包含进一步使用的截止日期。

document.getElementsByName('fromDate')[0].addEventListener('change', function (e) {
    var fromDate = new Date(e.target.value);
    var deadline = new Date(fromDate.getFullYear(), fromDate.getMonth(), fromDate.getDate()-1);
    document.getElementsByName('deadline')[0].value = deadline.getFullYear() + '-' + ((deadline.getMonth()+1).toString().length < 2 ? '0' + (deadline.getMonth()+1).toString() : deadline.getMonth()+1);
});

<强> JSfiddle

使用Javascript基于另一个输入类型月动态地将一年添加到输入类型月份

2 个答案: