Based on selection, dates should show some specific difference between from and to

Question

I have dropdown button. Based on selection, there should be an difference between from and to date. If I select 1st option, there should be difference of 10 days like from:16/11/2017 to:26/11/2017 and if I select 2nd option, difference is 30 days. I tried like this:

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

But the result is not shown. How can I get that? here I am displaying today's date before selection. But I want to display today's date after selection. Please suggest me how to display after selection.

Abdoulie Kassama · Accepted Answer · 2017-11-16T09:01:03.487

You can achieve this by getting the "from" date value and using some JavaScript functions to add days and format it.

First check the select value then add the number of days to the "todate" accordingly. Here is the JavaScript to do that:

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('-');
}

Here I some functions I found on SO to add days and format date.

Add days

Format date

Based on selection, dates should show some specific difference between from and to

1 Answers1