CODEWITHSUNDEEP
javascriptjqueryhtml
Roly
Roly

Reputation: 161

Add days to date when a select dropdown value is selected JQuery/JS

I have an input field where I have a date and what I want is to add to the date on Date field the number of days selected on Limit dropdown and show the result in the label. but I dont know how to do this:

EG: ReleaseDate is '06-02-2019 16:19:01' if I select '15 days' the output should be: 06-17-2019

$(document).ready(function(){

	$('#Limit').on('change', function () {
      
      var Limit = $(this).val();

      	if(Limit=="0")
		{			
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 0 days to date on ExpDate";
		}
		else if(Limit=="8")
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 8 days to date on ExpDate";
		}
		else if(Limit=="15")
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 15 days to date on ExpDate";
		}
		else if(Limit=="30")
		{
	    document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 30 days to date on ExpDate";
		}
		else if(Limit=="45")
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 45 days to date on ExpDate";
		}
		else if(Limit=="60")
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 60 days to date on ExpDate";
		}
		else if(Limit=="90")
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
			document.getElementById('ExpDate').innerHTML+="add 90 days to date on ExpDate";
		}
		else
		{
			document.getElementById('ExpDate').innerHTML='Expiration Date:';
		}
  });
});
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
	</head>
	<body>
	<div class="col-lg-1">
    <label class="control-label" for="Name">Release Date </label>
</div>
<div class="col-lg-2">
        <input class="form-control input-sm" readonly id="Date" name="txtFecha" placeholder="Release Date" 
		value="02-06-2019 16:19:01" type="text">
</div>
	
		<div class="col-lg-2">
                                <label class="control-label" for="Name">Time Limit<span style="font-size: 150%;  color: red;">*</span></label>
                            </div>
                            <div class="col-lg-3">
                                    <select class="form-control" id="Limit" name="cbmlimit" readonly required> 
									<option value="" selected="selected"></option>
									<option value="0">0 days</option>
									<option value="8">8 days</option>
									<option value="15">15 days</option>
									<option value="30">30 days</option>
									<option value="45">45 days</option>
									<option value="60">60 days</option>
									<option value="90">90 days</option>
									</select>
									<label class="control-label" id="ExpDate" for="Name">Expiration Date:</label>
                            </div>
	</body>	
  
  </script>

</html>

Upvotes: 0

Views: 1290

Answers (2)

Austin Perez
Austin Perez

Reputation: 597

There is no need for conditionals based off of what choice is selected. Below should be what you are looking for:

	$(document).ready(function(){
	  $('#Limit').on('change', function () {
		  var Limit = $(this).val();

		  // Splits date into array of date components
		  //    [day, month, year, hours, minutes, seconds]
		  var value = $('#Date').attr("value").split(new RegExp('[-+()*/:? ]', 'g'))

		  var d = 
		  {
		  	day: value[0],
		  	month: (parseInt(value[1], 16) - 1), // Month is zero based in Date() object, so you need to subtract 1 to get proper month number
		  	year: value[2],
		  	hours: value[3],
		  	minutes: value[4],
		  	seconds: value[5]
		  }

		  // Assign individual values to Date object
		  //   new Date(year, month, day, hours, minutes, seconds)
		  var date = new Date(d.year, d.month, d.day, d.hours, d.minutes, d.seconds);
		  var days = parseInt(Limit, 10);
	    if (!isNaN(date.getTime())) {
	      date.setDate(date.getDate() + days);

	      d = 
	      {
	      	day: date.getDate(),
			  	month: date.getMonth() + 1,
			  	year: date.getFullYear(),
			  	hours: date.getHours(),
			  	minutes: date.getMinutes(),
			  	seconds: date.getSeconds()
	      }

		  	var newDate = 
		  		checkTime(d.day) + '-' +
		  		checkTime(d.month) + '-' + 
		  		d.year + ' ' + 
		  		checkTime(d.hours) + ':' + 
		  		checkTime(d.minutes) + ':' + 
		  		checkTime(d.seconds);
	  		
		  	document.getElementById('ExpDate').innerHTML='Expiration Date: ';
		  	document.getElementById('ExpDate').innerHTML += newDate;
	    }
	  });

	  function checkTime(i) {
		  if (i < 10) {
		    i = "0" + i;
		  }
		  return i;
		}
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-1">
  <label class="control-label" for="Name">Release Date </label>
</div>
<div class="col-lg-2">
  <input class="form-control input-sm" readonly id="Date" name="txtFecha" placeholder="Release Date" 
          value="02-06-2019 16:19:01" type="text">
</div>
<div class="col-lg-2">
  <label class="control-label" for="Name">Time Limit<span style="font-size: 150%;  color: red;">*</span></label>
</div>
<div class="col-lg-3">
  <select class="form-control" id="Limit" name="cbmlimit" readonly required> 
    <option value="" selected="selected"></option>
    <option value="0">0 days</option>
    <option value="8">8 days</option>
    <option value="15">15 days</option>
    <option value="30">30 days</option>
    <option value="45">45 days</option>
    <option value="60">60 days</option>
    <option value="90">90 days</option>
  </select>
  <label class="control-label" id="ExpDate" for="Name">Expiration Date:</label>
</div>

Upvotes: 1

jupeter
jupeter

Reputation: 746

my idea you need moment.js for help your issue

$(document).ready(function(){
  var currentDate = moment();  // set 'release date' with moment.js
  $('#Date').val(currentDate.format("DD-MM-YYYY hh:mm:ss"));
  var lb = $('#ExpDate');
	$('#Limit').on('change', function () {
      var Limit = $(this).val();
      lb.html(Limit);
      currentDate = moment();
      var adding = currentDate.add(Number(Limit), 'days'); // adding day(s)
      $('#Date').val(adding.format("DD-MM-YYYY hh:mm:ss")); // set to input.
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="alert row">
<div class="col-lg-1">
   <label class="control-label" for="Name">Release Date </label>
</div>
<div class="col-lg-2">
   <input class="form-control input-sm" readonly id="Date" name="txtFecha" placeholder="Release Date" 
		value="02-06-2019 16:19:01" type="text">
</div>
	
<div class="col-lg-2">
   <label class="control-label" for="Name">Time Limit<span style="font-size: 150%;  color: red;">*</span></label>
</div>
<div class="col-lg-3">
    <select class="form-control" id="Limit" name="cbmlimit" readonly required> 
      <option value="" selected="selected"></option>
      <option value="0">0 days</option>
      <option value="8">8 days</option>
      <option value="15">15 days</option>
      <option value="30">30 days</option>
      <option value="45">45 days</option>
      <option value="60">60 days</option>
      <option value="90">90 days</option>
		</select>
    <label class="control-label" for="Name">
      Expiration Date: add
      <span id="ExpDate"></span>
      days to date on ExpDate
    </label>
 </div>
 </div>

Upvotes: 0

Related Questions