0

So I have this date picker, and I managed to change the year range, but I noticed that the "select" year bar is way too long (here's a picture http://s24.postimg.org/r8fq9faxh/Captura_de_ecr_2013_12_8_s_15_37_17.png ). Is that a way to change it's size?

<script>

 $(document).ready(function () {
    $("#datepicker").datepicker({
     changeMonth: true,
      changeYear: true,
    yearRange:'-90:+0',
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 170,
                    left: 37
                });
            }, 0);
        }
    });
})

  </script>

<style>
.ui-datepicker {font-size:70%; }
</style>

And the HTML:

<input type="text" id="datepicker" size="13">
Nanowatt
  • 33
  • 7

1 Answers1

0

There sure is, yearRange:'-90:+0' sets how many years to go back (90) and how many to go forward (0), so just change that value to have fewer years in the dropdown :

$(document).ready(function () {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        yearRange:'-30:+0', // change this value
        beforeShow: function (input, inst) {
            setTimeout(function () {
                inst.dpDiv.css({
                    top: 170,
                    left: 37
                });
            }, 0);
        }
    });
})

FIDDLE

As for the height of the dropdown you get when the select is active, it is not possible to set the height with CSS or any other way, the browser decides the height based on given space

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • that way the year range will be lower. I want the same amount of years. I just wanted to know if there's a way to reduce the size of that select year tag, make it like a scroll so it won't pass lat green border in the image – Nanowatt Dec 08 '13 at 15:43
  • No there is not, the height of the select is in most browsers not styleable and is set by the browser depending on the given space. – adeneo Dec 08 '13 at 15:45