日期控件原链接: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; });
祝好运!
相关推荐
2. **自定义样式**:APICloud允许开发者自定义UICalendar的外观,包括颜色、字体、大小等,使其与应用的整体设计风格保持一致。 3. **事件标记**:如果应用程序需要显示特定日期上的事件或提醒,UICalendar可以添加...
PB日期控件是PowerBuilder(PB)开发环境中用于处理日期输入和显示的组件。在PowerBuilder应用程序中,日期控件是至关重要的元素,因为它们允许用户以可视化的形式输入、选择或显示日期。这里我们将详细探讨10几种...
创建一个简单的VBA表单,添加日期控件和ListView控件: ```vb Private Sub UserForm_Initialize() Dim dt As Date dt = Date DateCtrl.Value = dt '设置日期控件初始值 ListView1.View = lvwReport '设置...
在WinForm应用中,我们常常需要使用日期选择控件,以便用户能够方便地输入或选择日期。默认的DateTimePicker控件虽然功能强大,但其样式和交互可能无法满足所有设计需求。因此,自定义日期控件成为了许多开发者的...
日期控件在IT行业中是用户界面(UI)设计中不可或缺的一部分,它允许用户方便地选择、输入或查看日期和时间。这种控件广泛应用于各种应用程序,如日历应用、在线预订系统、任务管理器等,为用户提供直观的时间交互...
3. 配置控件:插入日期控件后,可以在工作表上调整其大小和位置。右键点击控件,选择“属性”进行配置。比如,你可以更改控件的Caption(显示的文本,如“选择日期”),或者设置初始日期等。 三、VBA代码与事件...
本篇文章将深入探讨PB8中的两种日期控件:独立日期控件和与数据窗口集成的日期控件。 1. 独立日期控件: 独立日期控件在PB8中称为DateEdit控件,它是一个单独的组件,可以在窗口或对话框中自由放置。DateEdit控件...
在IT领域,尤其是在前端开发中,"可多选的日期控件"是一个常见的需求,它允许用户在日历界面中选择多个日期,而非只能选择单个日期。这种控件广泛应用于各种应用程序,如行程规划、会议安排或者数据分析等场景。在本...
在WPS Office的Excel应用中,日期控件是一种非常实用的功能,它允许用户在工作表中插入一个可交互的日历小部件,以便于选择和输入日期。标题“wps中excel日期控件下载”提示我们要关注如何在WPS Excel中获取和安装这...
在PowerBuilder 9.0(PB9.0)开发环境中,日期控件是不可或缺的元素,主要用于用户界面中输入和显示日期。这个“PB9.0 日期控件集合”包含4个不同的日期选择组件,旨在提供多样化的日期处理功能,以满足不同项目的...
QQ日期控件是一款广泛应用于网页开发中的时间选择组件,它为用户提供了一种便捷的方式来选取日期,常见于在线表单、日程安排等场景。QQ日期控件通常与JavaScript库结合使用,提供美观的用户界面和良好的交互体验。...
在网页开发中,日期控件是一种常见的用户交互组件,它允许用户方便地选择日期,常用于表单填充或事件预订等场景。本压缩包提供的是一款跨浏览器的JS日期控件,兼容IE、Firefox和Chrome这三种主流浏览器,为开发者...
VB农历日期控件是Visual Basic(VB)编程环境中用于显示和处理中国农历日期的一种软件组件。在VB应用程序中,开发者可以利用这样的控件为用户提供农历日期的显示、选择和计算功能,尤其对于需要处理农历信息的系统,...
日期控件在IT行业中是用户界面(UI)设计中的一个重要组成部分,主要用于用户输入或选择日期。在各种应用程序、网页和操作系统中,日期控件提供了一种直观、方便的方式来处理日期相关的数据。它们通常以日历的形式...
本资源“pb强大的日期时间控件”是专为PowerBuilder开发者设计的一套全面的日期和时间选择组件,旨在增强用户界面的交互性和功能。 在软件开发中,日期和时间控件是非常关键的部分,它们通常用于用户输入或展示日期...
- 移动端日期控件:原生移动平台如iOS和Android都有内置的日期选择器,但开发者也可以使用如React Native或Flutter的第三方组件来提供一致的跨平台体验。 4. **压缩包内容分析**: "DatePicker-master"这个文件名...
在JavaScript编程中,日期控件是一种常见的用户界面元素,它允许用户方便地选择日期,常用于表单填充、日历应用或任何需要日期输入的场景。"JS 日期控件"是一个专门处理日期选择功能的JavaScript库,它简化了开发者...
日期控件在软件开发中扮演着重要角色,它允许用户选择和输入日期,通常用于日程安排、报表生成、数据录入等场景。CSDN是一个知名的IT社区,提供了丰富的资源下载,包括各种编程控件。这里提到的"日期控件CSDN下载...
Office DTP(Date Time Picker)日期控件是Microsoft Office应用程序,如Excel中广泛使用的功能,它为用户提供了方便的方式来选择日期。在Excel中,通过VBA(Visual Basic for Applications)脚本,我们可以利用DTP...
1. 添加日期时间控件: - 打开PowerBuilder IDE,进入设计视图。 - 从工具箱中找到"DateTimeCtrl"或"DateCtrl"控件,将其拖放到你需要的位置。 - 双击控件,打开属性面板,可以设置控件的初始值、显示格式、大小...