jquery - glDatePicker 以渐进的月份显示多个日历

Question

我使用的是最新版本的 glDatePicker。我正在尝试同时连续显示多个日历，所有日历都有自己的开始日期。

我需要每个日历都是最后一个日历的 +1 个月，这样我就有 3 个累进月。我看了又看，找不到如何去做。

我觉得它需要类似于 NewStartdate: currentMonth(+1month), 但不知道它真正需要如何标记。这是我所拥有的:

HTML:

<div class="multi-calendars">
 <div class="single-calendar-outer">
   <input type="text" class="single-calendar" id="example1" />
 </div>
 <div class="single-calendar-outer">    
   <input type="text" class="single-calendar" id="example2" />
 </div>
 <div class="single-calendar-outer">
   <input type="text" class="single-calendar" id="example3" />
 </div>
</div>

CSS:

.multi-calendars {
margin-top: -300px;
}
.single-calendar {
width:300px;
border:none;
color:#fff;
height:305px;
}
.single-calendar-outer {
height:305px;
 display:inline;
margin:5px;
visibility:hidden;
}

JQUERY:

$(window).load(function()
{

    // Example #1 - First Month
    $('#example1').glDatePicker(
    {
            showAlways: true,
            cssName: 'flatwhite',
            specialDates: [
    {
        date: new Date(2014, 1, 8),
        repeatMonth: false
    },
    {
        date: new Date(2014, 1, 9),
        repeatYear: false
    }, 
    {
        date: new Date(2014, 1, 10),
        repeatYear: false
    }, 
    {
        date: new Date(2014, 1, 11),
        repeatYear: false
    }, 
   ]
    });
                 // Example #2 - Second Month
    $('#example2').glDatePicker(
    {
            showAlways: true,
            setStartDate: new Date(2014, 2, 1),
            cssName: 'flatwhite',
            specialDates: [
    {
        date: new Date(2014, 2, 10),
        repeatMonth: false
    },
    {
        date: new Date(2014, 2, 11),
        repeatYear: false
    }, 
    {
        date: new Date(2014, 2, 22),
        repeatYear: false
    }, 
   ]
    });
 // Example #3 - Third Month
    $('#example3').glDatePicker(
    {
            showAlways: true,
            cssName: 'flatwhite',
            specialDates: [
    {
        date: new Date(2014, 3, 15),
        repeatMonth: false
    },
    {
        date: new Date(2014, 3, 16),
        repeatYear: false
    }, 
   ]
    });

});

HERE IS THE DEMO

Answer 1

在你的 $document.ready 开始时使用:

var month=0;//Or whatever value you set programmatically based on the value derived from your business logic 

$(document).ready(function()
{
 var month=0;

 .... selectedDate: new Date(2014, month, 1),

检查这里，但我没有验证所有的逻辑，比如那个月需要选择什么日期:http://jsfiddle.net/J8kbG/19/