Framework 7 日历插件改成Picker 模式
2024-10-18 22:34:01
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();
});
按照上面来应该没啥问题了~如有错误,欢迎指正~
最新文章
- PostgreSql性能测试
- (二)Spark-Linux环境准备-Java&;Python版Spark
- 使用Application Insights 做分析
- iOS 使用证书时遇到的错误一
- 如何重装air
- Educational Codeforces Round 1 E. Chocolate Bar 记忆化搜索
- 不要直接对Request.Headers[";If-Modified-Since";]使用Convert.ToDateTime
- C#使用多态求方形面积周长和圆的面积周长
- C#线程(一)
- 于ubuntu-kylin14.10下一个,无法使用apt-get具( libc6-i386 : 赖: libc6 (= 2.15-0ubuntu10.5) 但 2.19-0ubuntu6 一个已)
- 4.编写Java应用程序。首先,定义一个时钟类——Clock,它包括三个int型 成员变量分别表示时、分、秒,一个构造方法用于对三个成员变量(时、分、秒) 进行初始化,还有一个成员方法show()用于显示时钟对象的时间。其次,再定义 一个主类——TestClass,在主类的main方法中创建多个时钟类的对象,使用这 些对象调用方法show()来显示时钟的时间。
- Python自学笔记-logging模块详解
- mpeg文件格式分析
- Java新知识系列 七
- cropper.js 裁剪图片
- 转://Oracle PL/SQL 优化与调整 -- Bulk 说明
- 实现html页面自动刷新的几种方式
- go time类操作
- Python 工程管理及 virtualenv 的迁移
- FastAdmin 插件配置文件 info.ini 中的 state 什么意思?