javascript - 如何使用 HTML 5 日期输入增加月份 - 将结果输出到 DOM

标签 javascript jquery html

我需要帮助从 HTML5 日期输入中获取值,并使用它来从该日期值增加月份。

在这一行失败:var result2 = myDate2.addMonths(1);

当我删除包含所有内容的函数时,它将每个增量输出到控制台,但当我包装在函数中时会中断,以便我可以创建单击事件。

有人可以帮我解决这个问题吗?我确信有一种更有效的方法来做到这一点。

我还需要将记录的数据(即 result1)输出到 HTML Div,替换文本“ToCalculate”。

提前致谢。

<DOCTYPE HTML>
<html>
<head>
<script>

    function calculateDate() {

    Date.isLeapYear = function (year) { 
        return (((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0)); 
    };

    Date.getDaysInMonth = function (year, month) {
        return [31, (Date.isLeapYear(year) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
    };

    Date.prototype.isLeapYear = function () { 
        return Date.isLeapYear(this.getFullYear()); 
    };

    Date.prototype.getDaysInMonth = function () { 
        return Date.getDaysInMonth(this.getFullYear(), this.getMonth());
    };

    Date.prototype.addMonths = function (value) {
        var n = this.getDate();
        this.setDate(1);
        this.setMonth(this.getMonth() + value);
        this.setDate(Math.min(n, this.getDaysInMonth()));
        return this;
    };


    var myDate = document.getElementById("intro-date").value;
    var result1 = myDate;
    console.log(result1);

    var myDate2 = result1;
    var result2 = myDate2.addMonths(1);
    console.log(result2);

    var myDate3 = result2;
    var result3 = myDate3.addMonths(1);
    console.log(result3);

    var myDate4 = result3;
    var result4 = myDate4.addMonths(1);
    console.log(result4);

    var myDate5 = result4;
    var result5 = myDate5.addMonths(1);
    console.log(result5);

    var myDate6 = result5;
    var result6 = myDate6.addMonths(1);
    console.log(result6);

    var myDate7 = result6;
    var result7 = myDate7.addMonths(1);
    console.log(result7);

    var myDate8 = result7;
    var result8 = myDate8.addMonths(1);
    console.log(result8);

    var myDate9 = result8;
    var result9 = myDate9.addMonths(1);
    console.log(result9);

    var myDate10 = result9;
    var result10 = myDate10.addMonths(1);
    console.log(result10);

    var myDate11 = result10;
    var result11 = myDate11.addMonths(1);
    console.log(result11);

    };
    </script>
</head>
<body>
<form name="GestationForm">
    <input type="date" id="intro-date">

    Value one: <div id="value-one">Calculated</div>
    <input type="submit" value="click" onclick="calculateDate()">
</form>
<div id="results">
<div id="month1">FIRST MONTH
    <div id="calculate1">To Calculate
    </div>
</div>
<div id="month2">SECOND MONTH
    <div id="calculate2">To Calculate
    </div>
</div>
<div id="month3">THIRD MONTH
    <div id="calculate3">To Calculate
    </div>
</div>
<div id="month4">FOURTH MONTH
        <div id="calculate4">To Calculate
    </div>
</div>
<div id="month5">FIFTH MONTH
        <div id="calculate5">To Calculate
    </div>
</div>
<div id="month6">SIXTH MONTH
            <div id="calculate6">To Calculate
    </div>
</div>
<div id="month7">SEVENTH MONTH
            <div id="calculate7">To Calculate
    </div>
</div>
<div id="month8">EIGHT MONTH
            <div id="calculate8">To Calculate
    </div>
</div>
<div id="month9">NINTH MONTH
            <div id="calculate9">To Calculate
    </div>
</div>
<div id="month10">TENTH MONTH
            <div id="calculate10">To Calculate
    </div>
</div>
<div id="month11">ELEVENTH MONTH
            <div id="calculate11">To Calculate
    </div>
</div>
</div>

最佳答案

您已向 Date 类声明了一个 addMonths 函数。并且..变量myDate是字符串而不是日期。

因此您需要将 myDate 变量声明为 Date。

var myDate = new Date(document.getElementById("intro-date").value);

编辑:

您还需要将输入元素类型从提交更改为按钮

<input type="button" value="click" onclick="calculateDate()">

<强> Fiddle

关于javascript - 如何使用 HTML 5 日期输入增加月份 - 将结果输出到 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34984764/

相关文章:

html - 删除拉脱维亚字母中的粗体

JavaScript 未在 Rails 测试环境中加载

MyClass.prototype = {} 和 MyClass.prototype.method 之间的 Javascript 区别

javascript - jquery 根据数据属性显示/隐藏多个元素

jQuery addClass 到所有其他 html div 类

html - 我的标题图片没有响应

javascript - 如何在 jQuery 中使用多个组查找分隔符?

javascript - 如何在 Firebase 数据库 update() 方法上动态指定 'key' 名称?

javascript - Kendo UI (jquery) 模板在属性名称位于字符串中时获取值

javascript - rails : updating partial dosen't execute inline javascript from the partial