DevCurry: jQuery UI DatePicker – Display Multiple Months

Here’s how to display multiple months in the jQuery UI DatePicker using the ‘numberOfMonths’ option.

<label>Multiple Month DatePicker: </label>
<input id="date2" />
<script type="text/javascript">
    $(function() {
        var dt = {
            numberOfMonths: 2
        };
        $("#date2").datepicker(dt);
    });
</script>

You can even change the DatePicker UI using the different options available. For example, if you wanted to display the year as a dropdown field and also specify the range of years in the dropdown, use the following code:

<body>
<label>Multiple Month DatePicker: </label>
<input id="date2" />
<script type="text/javascript">
    $(function() {
    var dt = {
            changeYear: true,
            yearRange: "-3:+3"
        };
        $("#date2").datepicker(dt);
    });
</script>
</body>

The UI shown above displays the year as a dropdown field and displays a range of 3 years both backwards and forward. You can check similar DatePicker options over here to configure the jQuery UI DatePicker

jQuery UI DatePicker – Display Multiple Months

2 comments: