в календаре выбора даты виден только указатель c месяц, основанный на 1-й строке поля в таблице - PullRequest
Новая
       20

в календаре выбора даты виден только указатель c месяц, основанный на 1-й строке поля в таблице

0 голосов
/ 03 марта 2020

У меня есть табличные данные, где есть 4 поля. Поля уже заполнены датами, поступающими из базы данных.

1-е поле показывает месяц-год, например 2-2020, а остальные 3 поля даты автоматически заполняются при загрузке страницы. Теперь требуется, чтобы в 1-й строке 1-го поля было 4-2020, поэтому здесь 4 - это месяц, который является апрелем, поэтому, когда я нажимаю на остальные 3 поля выбора даты в той же строке, следует включить только апрельский месяц для выбора из даты 1-го месяца, остальные месяцы отключены. Прошлый и будущий месяц отключены в этой конкретной строке, остальные строки также такие же, как и все проверки на основе 1-го поля месяца и года.

В моем коде ниже все даты отключены. Пожалуйста, помогите мне. 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
    $(document).ready(function() {

      $('#myForm').on("submit", function(evt) {
        evt.preventDefault();
        const array = validateDates();
        console.log(array.length)
        if (array.length === 0) {
          alert("Some issue with dates");
          return;
        }
        $.ajax({
          type: "POST",
          url: "Test.jsp",
          data: {
            array: array
          },
          success: function(responseFromServer) {
            $.each(responseFromServer, function(resultMessageKey, resultMessageValue) {
              $('#content').html(resultMessageKey);
            });
          },
          error: function() {
            alert(" Ajax call Failed to Update Values  into Database ");
          }
        });
      });
      var i;
     for (i = 0; i < 3; i++) {
     monthYr = $("#mYear"+i).val();
     var pDate1 = $("#pDate"+i).val();
     //alert(pDate1);
     //alert($("#pDate"+i).val());
     //alert(monthYr);
     var j = monthYr.indexOf("-");
        if(j > 0)
     monthYr = monthYr.slice(0, j);
     //alert(monthYr);
       $("#pDate"+i).datepicker({
                minDate:$("#pDate"+i).val(),
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {$("#pDate"+i).datepicker("option", "minDate", selectedDate);},
                beforeShowDay: function(minDate) {
                        if(monthYr =='0'){
                            return [true];
                        }else{
                    return [(1+minDate.getMonth()) == monthYr];
                        }

    }
            });

            $("#qDate"+i).datepicker({
                minDate:$("#qDate"+i).val(),
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {
                                $("#qDate").datepicker("option", "minDate", selectedDate);
                            },
                beforeShowDay: function(minDate) {
                        if(monthYr=='0'){
                            return [true];
                        }else{
                    return [(1+minDate.getMonth()) == monthYr];
                        }
    }
        });
        $("#bDate"+i).datepicker({
                minDate:$("#bDate"+i).val(),
                dateFormat: 'dd/mm/yy',
                changeMonth: true,
                numberOfMonths: 1,
                onClose: function (selectedDate) {
                                $("#bDate").datepicker("option", "minDate", selectedDate);
                            },
                beforeShowDay: function (minDate) {
                        if(monthYr=='0'){
                            return [true];
                        }else{
                    return [(1+minDate.getMonth()) == monthYr];
                        }
    }
        });
}
    });
  </script>
  </head>
<body>
    <form action="" id="myForm" method="post">
  <table id="tableData" width="100%" name="tableData">
    <tr>
      <th>Check/UnCheck</th>
      <th>MYear</th>
      <th>P Date</th>
      <th>Q Date</th>
      <th>B Date</th>
    </tr>
    <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row0" type="text" name="mYear" id="mYear0" value="1-2020"></td>
      <td><input class="date row0" id="pDate0" name="dob" type="text" value="12/01/2020" /></td>
      <td><input class="date row0" id="qDate0" name="dob" type="text" value="15/01/2020" /></td>
      <td><input class="date row0" id="bDate0" name="dob" type="text" value="20/01/2020" /></td>
    </tr>
     <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row1" type="text" name="mYear" id="mYear1" value="2-2020"></td>
      <td><input class="date row1" id="pDate1" name="dob" type="text" value="14/02/2020" /></td>
      <td><input class="date row1" id="qDate1" name="dob" type="text" value="18/02/2020" /></td>
      <td><input class="date row1" id="bDate1" name="dob" type="text" value="22/02/2020" /></td>
    </tr>
    <tr>
      <td><INPUT type="checkbox" data-row="row" class="chkValues" name="chkBox" value="" size="50"/></td>
      <td align="left"><input class="inputText row2" type="text" name="mYear" id="mYear2" value="3-2020"></td>
      <td><input class="date row2" id="pDate2" name="dob" type="text" value="16/03/2020" /></td>
      <td><input class="date row2" id="qDate2" name="dob" type="text" value="19/03/2020" /></td>
      <td><input class="date row2" id="bDate2" name="dob" type="text" value="25/03/2020" /></td>
    </tr>
  </table>
  <input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>
...