使用Javascript在引导日期选择器中控制年,月和日的范围

时间:2019-01-16 13:48:10

标签: javascript twitter-bootstrap datepicker

我正在一个应用程序上工作,因此正在使用Bootstrap 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 :(得分:0)

尝试一下。...使用startDateendDate

  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>