CODEWITHSUNDEEP
javascriptbootstrap-datepicker
Martin
Martin

Reputation: 557

Showing specific range of years , months and days using bootstrap datepicker

Am working on an application whereby am using bootstrap Datepicker to display the date. Am trying to show dates to the user whereby h/she should be above 18 years and below 85 years of age. Years, months and dates not within that age bracket should be disabled. On the date I have validated whereby I only show the date of 18 years from current year (this mean any year below 18 years from now is not shown). For instance since we are in 2019 (it shows year upto 2001 and below : 2001, 2000, 1999 , 1998 ). This works fine.

The problem is I want to show years where on the lower limit should be 18 years and upper limit should be 85 years. For instance since we are in 2019 , it should show years between 1916 and 2001 where the difference is 85 years, (the same scenario should happen for months and days).

Markup

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

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);
  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

Upvotes: 0

Views: 614

Answers (1)

karthickj25
karthickj25

Reputation: 1197

Take a look into this.

You can use 'setStartDate' and setEndDate to specify the date range. The range can set as either fixed date as 03/31/2018 or 1y 2m 1d where y, m , d means year, months and date. 

$(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>

Upvotes: 0

Related Questions