Почему дата не увеличивается на значения onchange - PullRequest
Новая
       11

Почему дата не увеличивается на значения onchange

0 голосов
/ 22 ноября 2018

У меня есть три поля ввода, где я хочу отобразить значения, нажав на кнопку. Я получаю значения в этом поле.проблема в том, что если они увеличивают поле, то на основании этого моя дата также должна увеличиваться.у меня есть два поля даты, во-первых, следует увеличить, указав значение для этих трех полей ввода.во-вторых, это сделает диапазон этих общих значений.вот мой код. 

window.sum = () => document.getElementById('get_my_value').value =
	Array.from(
		document.querySelectorAll('#txt1,#txt2,#txt3')
	).map(e => parseInt(e.value) || 0)
	.reduce((a, b) => a + b, 0)

function increaseValueFirst() {
	// body... 
	var value = parseInt(document.getElementById('txt1').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt1').value = value;

}

function decreaseValueFirst() {
	// body... 
	var value = parseInt(document.getElementById('txt1').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt1').value = value;
}

function increaseValueSec() {
	// body... 
	var value = parseInt(document.getElementById('txt2').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt2').value = value;

}

function decreaseValueSec() {
	// body... 
	var value = parseInt(document.getElementById('txt2').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt2').value = value;
}

function increaseValueThird() {
	// body... 
	var value = parseInt(document.getElementById('txt3').value, 10);
	value = isNaN(value) ? 0 : value;
	value++;
	document.getElementById('txt3').value = value;

}

function decreaseValueThird() {
	// body... 
	var value = parseInt(document.getElementById('txt3').value, 10);
	value = isNaN(value) ? 0 : value;
	value < 1 ? value = 1 : '';
	value--;
	document.getElementById('txt3').value = value;
}
function dateRangeSelector() {
	var days = 1;
	var date = new Date($("#start_date").val()),
		days = parseInt($("#get_my_value").val(), 10);
	console.log("days", days);

	if (!isNaN(date.getTime())) {
		date.setDate(date.getDate() + days);

		$("#end_date").val(date.toInputFormat());
	} else {
		alert("Invalid Date");
	}
}


Date.prototype.toInputFormat = function () {
	var yyyy = this.getFullYear().toString();
	var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
	var dd = this.getDate().toString();
	return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]); // padding
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
   $( function() {
     $( "#start_date" ).datepicker();  
   } );
   $( function() {
     $( "#end_date" ).datepicker();
   } );
</script>

<div class="row top-buffer">
                        <div class="form-group">
                           <div class="col-sm-2">
                              <label>Choose Date</label>
                              <input type="text" class="form-control" id="start_date" name="start_date"onchange="dateRangeSelector()" value="select date">
                           </div>
                           <div class="col-sm-1">
                              <label>Night</label>
                              <input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()">
                           </div>
                           <div class="col-sm-2">
                              <label>Returning Date</label>
                              <input type="text" class="form-control" id="end_date" name="end_date" value="Returning Date">
                           </div>
                        </div>
                     </div>
                     
            <div class="form-group">
   <div class="col-xs-8">
      <!-- here code is responsible for incrementing the values -->
      <table class="table">
         <thead>
            <tr>
               <th scope="col">Serial No</th>
               <th scope="col">Hotels</th>
               <th scope="col">(+) Nights</th>
               <th scope="col">(-) Nights</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <th scope="row">1</th>
               <td><input type="text" id="txt1" value="1"min="1" onkeyup="sum()" /></td>
               <td>
                  <input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueFirst(); sum();">
               </td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueFirst(); sum();"></td>
            </tr>
            <tr>
               <th scope="row">2</th>
               <td><input type="text" id="txt2" value="1"min="1" onkeyup="sum()" style="margin-right:10px;" /></td>
               <td><input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueSec(); sum();"></td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueSec(); sum();"></td>
            </tr>
            <tr>
               <th scope="row">2</th>
               <td><input type="text" id="txt3" value="1"min="1" onkeyup="sum()" /></td>
               <td><input type="button" value="+" id="additionofcitynights" value="additionofcitynights" class="thisuseforaddandminus" onclick="increaseValueThird(); sum();"></td>
               <td><input type="button" value="-" id="substractionofcitynights" value="substractionofcitynights" class="thisuseforaddandminus" onclick="decreaseValueThird(); sum();"></td>
            </tr>
         </tbody>
      </table>
   </div>
</div>

Как вы видели, есть четыре поля ввода, в которых значения увеличиваются нажатием кнопки.три из них только для их цели и правый верхний вычислит их всех.Проблема в том, что дату следует увеличивать, принимая значение этого правого верхнего поля ввода, которое называется ночь.а второе, которое будет отображать дату возврата, означает вычисление всех значений поля ввода ночи и на основе первой даты составляет диапазон последней даты.в то время как вы задаете значения в правом верхнем поле ввода самостоятельно, вы получите вывод, но это не станет возможным при увеличении нажатием кнопки.

...