Управление диапазоном лет, месяцев и дат в загрузчике даты с помощью Javascript - PullRequest
Новая
       7

Управление диапазоном лет, месяцев и дат в загрузчике даты с помощью Javascript

0 голосов
/ 16 января 2019

Я работаю над приложением, в котором использую загрузчик Datepicker для отображения даты. На дату у меня подтверждается тем, что я показываю только 18 лет текущего года (это означает, что любой год младше 18 лет не показан). Например, поскольку мы находимся в 2019 году (он показывает год до 2001 года и ниже: 2001, 2000, 1999, 1998). Это отлично работает.

Проблема в том, что я хочу показать годы, в которых нижний предел должен составлять 18 лет, а верхний предел должен составлять 85 лет. Например, поскольку мы находимся в 2019 году, он должен показывать годы между 1916 и 2001 годами, где разница составляет 85 лет (такой же сценарий должен происходить в течение месяцев и дней).

Разметка 

// Javasript to control how the datepicker appears

//dob (Must be over 18 years and less than 85 years)
  var maxBirthdayDate = new Date();
  maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
  maxBirthdayDate.setMonth(11,31)
  $( function() {
    $( "#dob " ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      maxDate: maxBirthdayDate,
      yearRange: '1900:'+maxBirthdayDate.getFullYear(),
     });
   });
        //End dob
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<-- Markup -->
 <div class="form-line">
   <input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required>
 </div>

1 Ответ

0 голосов
/ 17 января 2019

Попробуйте это .... используя startDate и endDate

  var maxBirthdayDate = new Date();
  maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
  maxBirthdayDate.setMonth(11,31);
  var mindate = new Date();
  mindate.setFullYear( maxBirthdayDate.getFullYear() - 85 );
  mindate.setMonth(11,31);
  $( function() {
    $( "#dob " ).datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'yy-mm-dd',
      //yearRange: '1900:'+maxBirthdayDate.getFullYear(),
      startDate: mindate,
      endDate: maxBirthdayDate
     });
   });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

<-- Markup -->
 <div class="form-line">
   <input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required>
 </div>
...