glDatePicker在渐进几个月中显示多个日历

时间:2014-02-01 06:12:08

标签: jquery html css calendar

我正在使用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

1 个答案:

答案 0 :(得分: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/