时间戳

首页 > 解决方案 > Framework7 Range Calendar Last Date 滚动问题

html-framework-7 - Framework7 Range Calendar Last Date 滚动问题

问题描述

当范围日历具有当前月份的最后一天且最小日期参数设置为昨天作为今天需要选择时。滚动并移至下个月后，日历不会返回上一月/当前月。像今天是 31-05-2018，它可以在日历初始化时选择。但是当移动到六月时，日历无法滚动回五月。下面是我的代码

calendarRange = botapp.calendar.create({
        inputEl: "#hdnDepDatesBus",
        containerEl: '#divDepDatesBus',
        dateFormat: 'yyyy-mm-dd',
        minDate: yd, //yesterday date as today date need in selection
        rangePicker: true,
        direction: 'vertical',
        value: [arrdDateBus],
        renderToolbar: function () {
            return '<div class="toolbar calendar-custom-toolbar no-shadow divCalanderMonth"><div class="toolbar-inner"><div class="left"></div><div class="center"></div><div class="right"></div></div></div>';
        },
        on: {
            init: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
            },
            monthYearChangeStart: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
            },
            change: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.value[0].getMonth()] + ' ' + c.value[0].getFullYear());
                if (c.value.length == 1) {
                    if (c.value[0].getMonth() > c.currentMonth) {
                        calendarRange.nextMonth();
                    } else if (c.value[0].getMonth() < c.currentMonth) {
                        calendarRange.prevMonth();
                    }
                }
            }
        }
    });

标签： html-framework-7

解决方案

经过大量搜索，我找到的解决方案是，您想选择哪个日期作为最小日期，选择该日期前 1 天。然后使用禁用日期选项禁用该日期。这将解决回滚问题，并且不会启用额外的过去日期。这是解决方案和工作。在 framework7 中也禁用了今天奇怪的最小日期以供选择。需要在最短日期前 1 天输入才能选择今天。

 calendarRangeTrain = botapp.calendar.create({
        inputEl: "#hdnDepDatesTrain",
        containerEl: '#divDepDatesTrain',
        dateFormat: 'yyyy-mm-dd',
        rangePicker: true,
        minDate: yd, // here yd is 2 days before today
        direction: 'vertical',
        value: [arrdDateTrain],
        disabled: [new Date(yd.getFullYear(), yd.getMonth(), yd.getDate() + 1)],
        renderToolbar: function () {
            return '<div class="toolbar calendar-custom-toolbar no-shadow divCalanderMonth"><div class="toolbar-inner"><div class="left"></div><div class="center"></div><div class="right"></div></div></div>';
        },
        on: {
            init: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
            },
            monthYearChangeStart: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.currentMonth] + ' ' + c.currentYear);
            },
            change: function (c) {
                jq('.calendar-custom-toolbar .center').text(monthNames[c.value[0].getMonth()] + ' ' + c.value[0].getFullYear());
                if (c.value.length == 1) {
                    if (c.value[0].getMonth() > c.currentMonth) {
                        calendarRange.nextMonth();
                    } else if (c.value[0].getMonth() < c.currentMonth) {
                        calendarRange.prevMonth();
                    }
                }
            }
        }
    });

推荐阅读