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();
});

 按照上面来应该没啥问题了~如有错误，欢迎指正~