APICloud(十二):日期控件
日期控件原链接:http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=26845&extra=&page=1
效果:从底部弹出选择框,可通过滑动的方法选择年月日、时分秒,点击“确定”可选择数据,选择“取消”可取消数据。
我这里不说这个日期控件的具体实现流程,只说怎么用以及我在用的过程中遇到的问题和解决办法。
我这里只选择年月日。
1、基本的HTML代码如下:
<ul class="pai_xu" style="display:none;" id="timeUL"><li class="head_tit"><div class="head_back" id="head_back3"><i></i></div><div class="head_t" id="head_title2">请选择时间</div></li><li class="active_s_1"><div class="pai_time_star"><span class="thre_b">开始时间:</span><span class="six_b"><input type="text" readonly="readonly" id="startTime" /></span></div><div class="pai_time_star marg6"><span class="thre_b">结束时间:</span><span class="six_b"><input type="text" readonly="readonly" id="endTime" /></span></div> </li>
</ul>
2、 从给定的链接中下载或者从附件中下载源码,找到lCalendar.js,并将其引入到需要用到日期控件的页面中。
3、为需要用到日期控件的控件初始化日期时间,我这里是为startTime和endTime两个文本框初始化。
<script type="text/javascript"> //初始化日期控件var calendar = new lCalendar();calendar.init({'trigger': '#startTime','type': 'date'});//结束时间var calendar2 = new lCalendar();calendar2.init({'trigger': '#endTime','type': 'date'});</script>
注:初始化日历控件的代码最好放在最后。
4、打击input框,自动从底部弹出日历控件,选择完日期点击“确定”按钮可以将选定的日期写入到对应的input框中。
以下说说遇到的问题:
1、我这个日期是作为查询条件来显示的,而且除此之外还有其他的查询条件和图标,如返回顶部、底部导航栏。当日期控件再从底部弹出时,整个页面显的特别乱。
解决办法:调整各个层的z-index并添加遮盖层。底部导航栏和返回顶部图标1,页面列表2,遮罩层3,查询条件弹出层4。这样子查询条件一出来,页面就剩下查询框了。而日历控件自带了遮罩层,等日历控件出来了,页面上就只能看到查询框和日历控件,且只有日历控件能操作。
2、日历控件弹出后,往上滑选数据没问题,往下滑滑不动,滑多了就会自动刷新页面。
原因:因为当前页面使用了下拉刷新,当日历控件往下滑选数据时,实际上是触发了下拉事件,所以小幅度下滑没反应,大幅度下滑页面会被刷新。
解决办法:
页面刷新时,必须保证当前页面是弹动的,即:bounces:true,若bounces:false,页面也不能刷新了。
根据这个道理,在日历控件弹出时将bounces设置为false,即非弹动,那么下拉就不会再刷新了。等到数据选择完成或者取消时,再将bounces设置为true,这样子就能保证下拉刷新了。
具体操作如下:
先从以下代码中确认到底需要改哪个方法:
_self.trigger.addEventListener('click', {"date": popupDate,"datetime": popupDateTime,"time": popupTime }[type]);
我用的是date,所以只需要修改popupDate方法即可。找到popupDate方法,在该方法的第一行添加代码:
//将页面设置为不弹动,避免与“下拉刷新”的冲突 api.setWinAttr({bounces: false//不弹动 });
再找到“确定” 触发的事件finishMobileDate(e)和“取消”触发的事件closeMobileCalendar(e),也是在第一行添加代码:
//将页面设置为弹动,激活下拉刷新功能 api.setWinAttr({bounces: true//弹动 });
这样子问题就解决 了。
3、调了各个层级的z-index并添加了遮罩层之后,在遮罩层上向上或向下滑动,遮罩层底下的数据列表也会随着一起滚动。
解决办法:当页面上的遮罩层处于显示状态时,阻止默认操作:
$(document).on("touchmove",function(e) {if(zhegaiFlag==1){//1-遮盖层显示 0-隐藏 默认隐藏e.preventDefault(); } });
这里有个疑惑的地方: 当日期控件向上向下滑动的时候,若是也阻止默认行为,岂不是不能实现要求了。
这个问题,lCalendar日历控件有做处理,它添加了遮盖层——当这个遮罩层显示时其他地方都不能操作,而且添加touchmove事件,所以以上代码限制不了日期控件。
4、点击遮罩层的空白处,查询框隐藏。
这个问题以前说过的,这里就直接贴代码吧:
//点击遮罩层空白处隐藏各个选项 $("#zhegai").bind("click",function(){ $ul.hide();$(this).hide();//隐藏遮罩层 zhegaiFlag=0; });
祝好运!
APICloud(十二):日期控件相关推荐
- MFC入门基础(十二)控件 CScrollBar的使用
1.参考博客: VS2010/MFC编程入门之二十六(常用控件:滚动条控件Scroll Bar)-软件开发-鸡啄米 以下内容是参考上述博客大神的稍作修改 2. 首先还是创建一个基于对话框的MFC工程 ...
- 【Axure篇】(二)Axure RP9日期控件制作(多种格式)
第一次画原型图的时候发现元件居然没有日期控件,原来需要自己画:看到别人的以为很复杂,自己网上查了一遍发现原来还很简单 参考链接:Axure日期控件 - 简书 (jianshu.com) 1.拖拽&qu ...
- python 日历控件_python selenium 处理时间日期控件(十六)
测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日 ...
- 精确到秒的JQuery日期控件,jquery日历插件,jquery日期插件
2019独角兽企业重金招聘Python工程师标准>>> 效果图如下: 首先在页面中引用一下库: <link type="text/css" href=&qu ...
- html日期横向拖动选择控件,一个简单横向javascript日期控件
具体要求就是: 1.日期表格横向占满页面. 2.每个月的日期列表横向显示在一排,而不是像网上的很多日期控件显示一个方块. 3.要求只有年月日可选,选择年或月后自动更新对应日期(这个每个日期控件都有的) ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
- jquery日期控件使用,起止时间
1.下载jQuery核心文件,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以 ...
- Wdatepicker日期控件的使用指南
示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用 示例2-3-3 使用内置参数 示例 2-4-1: 年月日时分秒 示例 2-4-2 时分秒 示例 2-4- ...
- IE5下通过、不会被列表框遮挡的日期控件
一般不会被列表框遮挡的日期控件都是用一个透明的iframe来做的,但在IE5下因为透明风格不被支持却无法正常使用.这个控件直接使用iframe作为日期选择界面,就解决了兼容性问题.不过只有简单的选择功 ...
最新文章
- JS实现博客前端页面(一)—— 封装基础库
- linux mysql解锁账号密码忘了怎么办,linux下mysql忘记密码怎么办
- [Z]图灵奖获得者Richard Karp讲述Berkeley CS的发展史
- maven scope含义的说明
- ubuntu自动提醒
- 智能音箱音效哪个好_华为支浩:音质好是底线,AI基本功扎实让智能音箱不再是“玩具”...
- java换成中文_如果我们的编程替换成中文会变成怎样?
- Java访问权限的范围
- 为什么移动卡上到手机上显示无服务器,移动手机卡加密失败然后就没有服务器无聊的时候给手机卡加密因为不知? 爱问知识人...
- Bootstrap按钮下拉菜单的尺寸
- Bailian4096 信号转换【密码】
- FTP+SSL(加密的ftp)
- [R语言]读取文件夹下所有子文件夹中的excel文件,并根据分类合并。
- 华三交换机配置access命令_华3交换机配置命令大全
- 2020年机修钳工(中级)考试报名及机修钳工(中级)免费试题
- C++ 第三课:常量转义字符
- 什么是编程?为什么要编程?
- ubuntu——sudo权限问题(sudo:/etc/sudoers is world writable sudo:no valid sudoers sources found,quitting..)
- Jenkins配置阿里企业邮箱
- 【Java进阶篇】第一章 面向对象(上篇)