javascript - 根据选择，日期应显示从和到之间的一些特定差异

Question

我有下拉按钮。根据选择，from 和 to date 之间应该有区别。如果我选择第一个选项，则应该相差 10 天，例如从:16/11/2017 到:26/11/2017，如果我选择第二个选项，则相差 30 天。我试过这样:

<select class="form-control" name="slct" id="slct" required style="font-
family : Verdana; font-size: 20px; height: 40px;" onchange="getResult()">                                                                                           
                                <option value="">Select</option>
                                <option value="10">select 1</option>
                                <option value="30">select 2</option>
                                <option value="60">select 3</option>
                            </select>   
    <table style="margin-top:10px;">
                    <tr>
                    <div class="form-group"> 
                    <td><label for="from" style="margin-left:30px">From:
    </label>
                    <?php echo  "<input type='date' class='form-control' 
   name='dte' id='dat' value='" . date('Y-m-d') . "' required />" ?>&emsp;
   </td>
                    <td><label for="from">To:</label>
                    <input type="date" name="to" id="todate" value="" 
   required />&emsp;</td>
                    </div>
                    </tr></table>
   <script>
                    function getResult() {
                    var dateval = $("#frmdate").val();
                    var offset = $("#slct").value();
                    if (dateval != "" && offset != "") {
                    var dat = $("#frmdate").datepicker("getDate");
                    dat.setDate(dat.getDate() + parseInt(offset));
                    $("#todate").text($.datepicker.formatDate("yy-mm-dd", 
                       dat));
                    }
                    }
     </script>

但是没有显示结果。我怎样才能得到它？在这里，我在选择之前显示今天的日期。但是我想在选择后显示今天的日期。请建议我选择后如何显示。

Answer 1

您可以通过获取“开始”日期值并使用一些 JavaScript 函数添加日期并设置格式来实现这一点。

首先检查选择值，然后将天数相应地添加到“todate”。这是执行此操作的 JavaScript:

function getResult() {
    var startDate = document.getElementById('dat').value;  //Get from date 
    if(document.getElementById('slct').value == "10"){
        var endDate = document.getElementById('todate').value = formatDate(addDays(startDate, 10));
    }
    else if(document.getElementById('slct').value == "30"){
        var endDate = document.getElementById('todate').value = formatDate(addDays(startDate, 30));
    }
    else if(document.getElementById('slct').value == "60"){ 
        var endDate = document.getElementById('todate').value = formatDate(addDays(startDate, 60));
    }
}

//Function to add days https://stackoverflow.com/a/19691491/5612132
function addDays(date, days) {
     var result = new Date(date);
     result.setDate(result.getDate() + days);
     return result;
}

//Format date https://stackoverflow.com/questions/23593052/format-javascript-date-to-yyyy-mm-dd
function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) month = '0' + month;
    if (day.length < 2) day = '0' + day;

    return [year, month, day].join('-');
}

这里是我在 SO 上找到的一些函数，用于添加日期和格式化日期。

Add days

Format date