Search code examples
twitter-bootstrapbootstrap-selectbootstrap-selectpicker

Bootstrap-Selectpicker: Make non-clickable years invisible and show directly given year as selected

Following code block:

$(".datepicker").datepicker( {
  format: ' yyyy', // Notice the Extra space at the beginning
  viewMode: 'years',
  minViewMode: 'years',
  startDate: '-100y',
  endDate: '-17y'
});

outputs:

enter image description here

I've 2 questions:

How can I make non clickable years unvisible?

If a user types a year in the input-field and afterwards clicks this input field, the selected year should be shown as marked.

That would be the desired result:

enter image description here

Currently I am studying the following API documentation and could not find the related sections yet. Can someone help me? I've already done this a couple of years ago, but unfortunately I cannot remember anymore how.

Solution

  • I looked through the API a bit but did not find this functionality, however I created a simple solution:

    http://jsfiddle.net/m7atu7up/6/

    We simply use CSS to hide the year spans that have the disabled class.

    .datepicker table tr td span.disabled {
    display: none;
}

    To style the selected span we use the following selector:

    .datepicker table tr td span.active.active

    This fiddle works for both your questions.