How display years range in input Bootstrap Datepicker?

Question

I am using the following code to display the year range:

 $('.date-own').datepicker({
    format: " yyyy",
    viewMode: "years",
    minViewMode: "years",
    autoclose: true,
    startView: 2,
    yearRange: '1950:2011'
});

But the range is not coming.

How can I solve this since I only need the year from 1950 to 2010 only?

Swati · Accepted Answer · 2021-06-03 05:52:56Z

1

In your datepicker you can use startDate and endDate and there you can specify how many year from now i.e : 1950-2021 = -71y to set startDate and same for other .

Demo Code :

$('.date-own').datepicker({
  format: "yyyy",
  viewMode: "years",
  updateViewDate: true,
  minViewMode: "years",
  autoclose: true,
  startView: 2,
  defaultViewDate: {
    year: '1950'
  },
  startDate: '-71y', //2021 -1950
  endDate: '-10y' //2021-2011
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<input type="text" class="date-own">

edited Jun 3, 2021 at 5:52

answered Jun 3, 2021 at 5:30

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ajay Raturi Over a year ago

I need one more favor also, do we active the 1950 year by default and only show the start date and end date only in the calendar

Swati Over a year ago

See , i have update . But, not sure about second issue as year are already disabled .

Ajay Raturi Over a year ago

thanks and I find the solution to the second issue using CSS. .datepicker table tr td span.disabled, .datepicker table tr td span.disabled:hover { display:none; }

Collectives™ on Stack Overflow

How display years range in input Bootstrap Datepicker?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related