Framework 7 日历插件改成Picker 模式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Framework 7 里面的日历插件默认的2种模式：

1.文本框

2.直接展示

如下图：

更多例子点这里

而我的需求如下图：

点击小图标再弹出日历，选择某个日期，隐藏日历弹层。

实现步骤：

1.写小图标的HTML:

2.写浮动的HTML:

这里设置 z-index:13500 是为了让它显示在后面的半透明背景层上面。具体原因可查看：Framework 7 之给Picker Modal 添加半透明背景

3.实现点击小图标显示日历：

function addZero(n){

    //如果当前返回的值小于10，则给它添加一个0

    return n<10 ? "0"+n : ""+n;

}

var pickerDate = myApp.calendar({

    value: [new Date()], //初始化日期，日历展开时第一次显示的日期

    container: '.js_date_container',

    monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

    dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],

    closeOnSelect: true, //选中之后自动关闭

    onDayClick: function (p, dayContainer, year, month, day) {

        window.location.href = "/mobile/account/feedback/someday.htm?day=" + year + addZero(month) + addZero(day)

    }

});

$$(".picker-date").on('open', function () {

    $(".modal-overlay").addClass("modal-overlay-visible");

});

$$(".picker-date").on('close', function () {

    $(".modal-overlay").removeClass("modal-overlay-visible");

});

function closeConsumeModal() {

    myApp.closeModal('.picker-date');

    $(".modal-overlay").removeClass("modal-overlay-visible");

}

//点击半透明背景层隐藏浮层

$(".modal-overlay").click(function () {

    closeConsumeModal();

});