Question

我正在一个应用程序上工作，因此正在使用Bootstrap Datepicker显示日期。我试图向用户显示日期，据此，她/她的年龄应在18岁以上且在85岁以下。不在该年龄段内的年份，月份和日期应被禁用。在我确认的日期中，我仅显示自当年起的18年的日期（这意味着从现在起不超过18年的任何年均不显示）。例如，因为我们在2019年（显示的年份直到2001年及以下：2001、2000、1999和1998年）。效果很好。

问题是我想显示下限应为18年而上限应为85年的年份。例如，由于我们在2019年，所以它应该显示1916年和2001年之间的年份，相差85年（相同的情况应该持续数月和数天）。

标记

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

Javasript来控制日期选择器的显示方式

 //dob (Must be over 18 years and less than 85 years)
  var maxBirthdayDate = new Date();
  maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );
  maxBirthdayDate.setMonth(11,31);
  var minDate = setFullYear(maxBirthdayDate.getFullYear() -85);
  $( function() {
    $( "#dob " ).datepicker({
      changeMonth: true,
      changeYear: true,
      //yy-mm-dd
      dateFormat: 'yy-mm-dd',
      maxDate: maxBirthdayDate,
      yearRange: minDate + maxBirthdayDate.getFullYear(),
    });
  });
  //End dob

Answer 1

看看这个。

您可以使用'setStartDate'和setEndDate指定日期范围。范围可以设置为03/31/2018或1y 2m 1d的固定日期，其中y，m，d表示年，月和日。

$(function(){
    $("#dob").datepicker();
    
 
       $('#dob').datepicker('setStartDate', '-18y');
       $('#dob').datepicker('setEndDate', '+85y');
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>

<div id ="BillingDateDiv" class ="form-group">
<div class="col-sm-2 input-group date">
      <input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required>
</div>

<span class="input-group-addon" ><i id="callDate"  class="glyphicon glyphicon-calendar"></i></span>  										
</div>
</div>

使用引导日期选择器显示年，月和日的特定范围

1 个答案: