Как установить вторую дату поля ввода в соответствии с первой введенной датой

Question

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

$('#one').change(function() { 
    var currentval = $('#one').val();
    var my =  currentval.split('-');
    var dy = parseInt(my[0])+1+'-'+my[1]+'-'+parseInt(my[2]-1);
 $('#two').val(dy);

<input type="date" class="form-control" id="one" name="one"placeholder="Please enter the value"> 

<input type="date" class="form-control" id="two" name="two"placeholder="Please enter the value">

Вот моя дата. если я выберу первую дату, например 02/03/2020, вторая дата должна быть такой же, как 01/03/2021

Answer 1

Я сделал с HTML5 input type="date" с помощью JavaScript, чтобы проверить leap year на Количество дней в феврале и установить значения в фактическом формате в следующее поле ввода с помощью min attribute.

Надеюсь, приведенный ниже фрагмент поможет вам.

$(document).ready(function () {
  $('#one').on('change input', function() { 
    var datearray = $(this).val().split("-");
    var d = parseInt(datearray[2]) - 1;
    var day = ('0' + d).slice(-2);
    var month = ('0' + parseInt(datearray[1])).slice(-2);
    var year = datearray[0];
    // Chek Leap Year
    var leapYear = ((parseInt(year)+1) % 100 === 0) ? ((parseInt(year)+1) % 400 === 0):((parseInt(year)+1) % 4 === 0); 
    //Without Leap Year Feb(28 days)
    if (day=="00" && month=="03" && leapYear!=true) {
      day = "28";
      month = "02";
    }
    //With Leap Year Feb(29 days)
    else if(day=="00" && month=="03" && leapYear==true){
      day = "29";
      month = "02";
    }
    //For 1st Day + 1st Month to set same year last month
    else if(day=="00" && month=="01"){
      day = "31";
      month = "12";
      year = (parseInt(year)-1)
    }
    // For 1st day selection in Feb
    else if(day=="00" && month=="02"){
      day = "31";
      month = "01";
    }
    // For 1st day selection in April
    else if(day=="00" && month=="04"){
      day = "31";
      month = "03";
    }
    // For 1st day selection in May
    else if(day=="00" && month=="05"){
      day = "30";
      month = "04";
    }
    // For 1st day selection in June
    else if(day=="00" && month=="06"){
      day = "31";
      month = "05";
    }
    // For 1st day selection in July
    else if(day=="00" && month=="07"){
      day = "30";
      month = "06";
    }
    // For 1st day selection in Aug
    else if(day=="00" && month=="08"){
      day = "31";
      month = "07";
    }
    // For 1st day selection in Sep
    else if(day=="00" && month=="09"){
      day = "31";
      month = "08";
    }
    // For 1st day selection in Oct
    else if(day=="00" && month=="10"){
      day = "30";
      month = "09";
    }
    // For 1st day selection in Nov
    else if(day=="00" && month=="11"){
      day = "31";
      month = "10";
    }
    // For 1st day selection in Dec
    else if(day=="00" && month=="12"){
      day = "30";
      month = "11";
    }
    var minDate = ((parseInt(year)+1)+"-"+month+"-"+ day);
    $('#two').val(minDate); 
    $('#two').attr('min', minDate); 
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container my-3">
  <div class="row justify-content-center">
    <div class="col-sm-6 com-md-4">
      <input type="date" class="form-control" id="one" name="one"placeholder="Please enter the value">
    </div>
    <div class="col-sm-6 com-md-4">
      <input type="date" class="form-control" id="two" name="two"placeholder="Please enter the value">
    </div>
  </div>
</div>

Answer 2

В вашем коде только синтаксическая ошибка. Вы должны закрыть $('#one').on('change', function(){ /*your code*/});. Либо Вы можете достичь этого, используя bootstrap -Datepicker Library

//Date picker
    $('#startDatePicker').datepicker({
        format: 'MM dd, yyyy',
        autoclose: true,
        endDate: "today",
        maxDate: "today",
        todayBtn: "linked"
    }).on('changeDate', function () {
        var tmp = date2 = $('#startDatePicker').datepicker('getDate');
        date2.setDate(date2.getDate());
        $('#endDatePicker').datepicker('setStartDate', date2);
        date2.setDate(tmp.getDate() + 365);
        $('#endDatePicker').datepicker('setDate', date2);
    });
    $('#endDatePicker').datepicker({
        format: 'MM dd, yyyy',
        autoclose: true,
        todayBtn: "linked"
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<div class="form-group col-sm-3">
    <label for="startDatePicker">Start Date</label>
    <input type="text" name="startDate" class="form-control" value="" readonly id="startDatePicker" />
</div>
<div class="form-group col-sm-3">
    <label for="endDatePicker">End Date</label>
    <input type="text" name="endDate" class="form-control" value="" readonly id="endDatePicker" />
</div>

Answer 3

У вас есть синтаксическая ошибка. Вы не закрыли скобки.

Второе, что вам нужно добавить 0 для цифр меньше 9.

Пожалуйста, посмотрите этот пример

$('#one').change(function() { 
    var currentval = $('#one').val();
    var my =  currentval.split('-');
    var temp = my[2]-1;
    var dy = parseInt(my[0])+1+'-'+(my[1])+'-'+(('0' +temp).slice(-2));
    $('#two').val(dy);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" class="form-control" id="one" name="one"placeholder="Please enter the value"> 

<input type="date" class="form-control" id="two" name="two"placeholder="Please enter the value">

ПРИМЕЧАНИЕ: Тип ввода date не будет работать во всех браузерах. Вместо этого вы должны использовать любой jquery плагин выбора даты.