Adding days to date jquery or JS

Question

I have a select to add days from an input on 'dd/mm/yy' format to show the result in another input, I tried to do this but this is not working.

<input type="text" id="startdate" value="15/11/17"> 

<select name="Select1" id="days">
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
</select>

<input type="text" id="fdate" value="">

$( "#days" ).change(function() {
var sta = $('#startdate').val()
var sel = parseInt($(this).val())
$('#fdate').val(sta+sel )
});

You could format the input value to a date an then use the `addDays()` method as explained in [this question](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — Filnor, Nov 15 '17 at 07:12

score 1 · Answer 1 · answered Nov 15 '17 at 07:14

Use setDate to add the days

Demo

$("#days").change(function() {
  var staItems = $('#startdate').val().split("/");
  var date = new Date(  Number(staItems[2]), Number(staItems[1])-1, Number(staItems[0]) );
  date.setDate( date.getDate() + parseInt($(this).val()) );
  $('#fdate').val( date.getDate() + "/" + (date.getMonth() + 1 ) + "/" + date.getYear() )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="startdate" value="15/11/17">

<select name="Select1" id="days">
<option value="0">0 day</option>
<option value="1">1 day</option>
<option value="2">2 days</option>
<option value="3">3 days</option>
<option value="6">6 days</option>
<option value="7">7 days</option>
<option value="8">8 days</option>
</select>

<input type="text" id="fdate" value="">

2oppin · Answer 2 · 2017-11-15T07:37:14.360

You should use Date object of javascript

$( "#days" ).change(function() {
    var sta = $('#startdate').val().split('/');
    // Note that JS treats date as  mm/dd/yy
    var date = new Date([sta[1], sta[0], sta[2]].join('/'));
    var sel = parseInt($(this).val());
    date = new Date(date.getTime() + 60*60*24*sel);
    $('#fdate').val(date.getDaty() + '/' + date.getMonth() + '/' + date.getYear());
});

Also please consider to change year displaying to full year because of same reasons Date.getYear deprecated

score 1 · Answer 3 · answered Nov 15 '17 at 07:16

1

Try this...

$( "#days" ).change(function() {

var dates = $('#startdate').val();
dates = dates.split('/');
var someDate = new Date(dates[1] +"/" + dates[0] + "/"+dates[2]);
var numberOfDaysToAdd = parseInt($(this).val());
someDate.setDate(someDate.getDate() + numberOfDaysToAdd);
var dd = someDate.getDate();
var mm = someDate.getMonth() + 1;
var y = someDate.getFullYear();

var someFormattedDate = dd + '/'+ mm + '/'+ y;
$('#fdate').val(someFormattedDate);


});

answered Nov 15 '17 at 07:16

A.D.

2,352
2
15
25

no need to transform input, 'dd/mm/yy' seems parsed properly by Date – 2oppin Nov 15 '17 at 07:22
@2oppin this user have date formate as 'dd/mm/yy' which preview an invalid date for Date constructor check please. – A.D. Nov 15 '17 at 07:24
yupp, my bad, missed that Date considers first part as a month, honestly think that it's a flaw ( – 2oppin Nov 15 '17 at 07:34

score 1 · Answer 4 · answered Nov 15 '17 at 07:18

Problems:

your start date is not parsed to a date so you can't do any operation on it
Then you are adding a string to a integer representing your days to add: '15/11/17' + 3. This is not going to work

Solution:

I highly suggest you give a look at momentJS

$('#days').change(function() {
  var sta = moment($('#startdate').val(), "MM-DD-YY");
  var sel = parseInt($(this).val());
  $('#fdate').val(sta.add(sel, 'days'));
});

score 1 · Answer 5 · answered Nov 15 '17 at 07:25

The input "#startdate" has text type, if you sum an "integer" the result it's not your target.

You need use a type date in the first input, convert his value to Date object and add a number of day with the correct function.

Here you have more info about Date object's.

score 1 · Answer 6 · answered Nov 15 '17 at 07:44

Pure js approach split date , get day, split selected value, get integer add above two create date again using the updated date update it in the input box

   document.getElementById("days").onchange = function() {
        let inputValueParts = document.getElementById("startdate").value.split("/");
        let daysToIncrement = document.getElementById("days").value.split(" ")[0];    
        let integerDate = parseInt(inputValueParts[1]);
        let integerIncrement = parseInt(daysToIncrement);
        integerDate += integerIncrement;
        let increasedDate = inputValueParts[0] + "/" + integerDate + "/" +inputValueParts[2];
        document.getElementById("fdate").value = increasedDate;
    }

Adding days to date jquery or JS

6 Answers6