javascript - JQuery DatePicker UI display format

Question

I'm using JQuery DatePicker on my project and it's very effective except its actual layout on the screen. I'm limiting the date range to 60 days and therefore obviously limiting the calendar to 4 months. The problem is that it is being displayed length ways and goes outside of the browser so I was wondering if there was a way to actually change the display from:

Month | Month | Month | Month

to

Month | Month

Month | Month

Here's what code I'm using at the moment:

$(function(){
    $('#dp').datepicker({
        dateFormat: 'yymmdd',
        numberOfMonths: 4,
        minDate: 0,
        maxDate: 60,
    });
    $('#date').on('click', function() {
        $('#dp').datepicker('show');            
    });
    $("#dp").change(function() {
        var tempDate = $('#dp').datepicker('getDate');
        var newformattedDate = $.datepicker.formatDate('D d M yy', tempDate);
        $("#showDate").html(newformattedDate);
        $(".eventDate").addClass('eventAdded dateProvided');
    });
});

Answer 1

只需查看以下文档numberOfMonths：

numberOfMonths

• 类型：Number或Array
• 默认：1

一次显示的月数。支持多种类型：

• Number：单行显示的月份数。
• Array：定义要显示的行数和列数的数组。

代码示例：

使用指定的 numberOfMonths 选项初始化 datepicker：

$( ".selector" ).datepicker({ numberOfMonths: [ 2, 3 ] });