Question

我已经分配了创建带日历月份的滑块。

单击滑块应创建一个新对象（下个月），然后删除前一个对象。

默认情况下，应创建4个月，但只能显示2个月（因此滑块）。

所以我应该实现的是4个生成月份的数组，点击后第一个被删除，下个月就会生成。

[1月，2月，3月，4月] - ＆gt;点击下一张幻灯片 - ＆gt; [2月，3月，4月，5月]

[1月，2月，3月，4月] - ＆gt;点击上一张幻灯片 - ＆gt; [12月，1月，2月，3月]

到目前为止，我已经编写了一个脚本，用两个月生成2个日历（例如1月和2月）。

我使用jQuery ui-calendar和光滑的滑块作为插件。

到目前为止，我写的代码是：

HTML

<div class="twoCalendars">
                <div class="row">
                    <div class="col-md-6">
                        <div class="calendar-wrapper">
                            <div class="doubleCalendar"></div>
                            <button id="prev">Previous Month</button>&nbsp;
                            <button id="next">Next month</button>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="calendar-wrapper">
                            <div class="doubleCalendar2"></div>
                        </div>
                    </div>
                </div>
            </div>

和Javascript

function twoCalendars(day, month, year) {

var calendarTable = [];

var calendar = jQuery('.doubleCalendar').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

var calendar2 = jQuery('.doubleCalendar2').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month + 1,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

jQuery('#next').on('click', function() {
    jQuery('.ui-datepicker-next').trigger("click");
});

jQuery('#prev').on('click', function() {
    jQuery('.ui-datepicker-prev').trigger("click");
});

}

twoCalendars(7, 3, 2017);

我知道要问很多，但不幸的是我真的被困住了，我的工作取决于它。

希望你们能帮助我。

我会回答所有其他问题。

Answer 1

我一直试图做你过去一小时左右所要求的一切，我必须说这是可能的，但这需要我更多的时间。

这是使用Jquery ui滑块的不完整解决方案以前的JQuery datepicker。 slider function twoCalendars（day，month，year）{

var calendarTable = [];

var calendar = jQuery('.doubleCalendar').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

var calendar2 = jQuery('.doubleCalendar2').datepicker({
    inline: true,
    firstDay: 1,
    defaultDate: new Date(year,month + 1,day),
    showOtherMonths: false,
    dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
});

jQuery('#next').on('click', function() {
    jQuery('.ui-datepicker-next').trigger("click");
});

jQuery('#prev').on('click', function() {
    jQuery('.ui-datepicker-prev').trigger("click");
});

}

twoCalendars(7, 3, 2017);

 $( function() {
    $( "#slider" ).slider({  
      slide: function( event, ui ) {  

        updateHandleValues(ui);
      },
 change: function(event, ui) {
    updateHandleValues(ui);
  }
    });

  } );

function updateHandleValues(ui) {
    //$('#calendar-wrapper"').removeClass("doubleCalendar2", "fast")
 //$('#calendar-wrapper"').addClass("doubleCalendar2", "slow")
        jQuery('.ui-datepicker-prev').trigger("click");

}

也许你可以做一个确定滑块位置的功能，并根据你在日期选择器中前进或后退的功能。

我知道这并不多，我希望别人会给你一个完整的解决方案。

单击时创建新的日历对象

1 个答案: