`

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 日期控件UICalendar

    2. **自定义样式**:APICloud允许开发者自定义UICalendar的外观,包括颜色、字体、大小等,使其与应用的整体设计风格保持一致。 3. **事件标记**:如果应用程序需要显示特定日期上的事件或提醒,UICalendar可以添加...

    10几种PB日期控件

    PB日期控件是PowerBuilder(PB)开发环境中用于处理日期输入和显示的组件。在PowerBuilder应用程序中,日期控件是至关重要的元素,因为它们允许用户以可视化的形式输入、选择或显示日期。这里我们将详细探讨10几种...

    vba 日期控件和listview控件注册

    创建一个简单的VBA表单,添加日期控件和ListView控件: ```vb Private Sub UserForm_Initialize() Dim dt As Date dt = Date DateCtrl.Value = dt '设置日期控件初始值 ListView1.View = lvwReport '设置...

    非常好看的winform 自定义日期控件

    在WinForm应用中,我们常常需要使用日期选择控件,以便用户能够方便地输入或选择日期。默认的DateTimePicker控件虽然功能强大,但其样式和交互可能无法满足所有设计需求。因此,自定义日期控件成为了许多开发者的...

    超好用的日期控件,能够以不同形式显示日期,时间.

    日期控件在IT行业中是用户界面(UI)设计中不可或缺的一部分,它允许用户方便地选择、输入或查看日期和时间。这种控件广泛应用于各种应用程序,如日历应用、在线预订系统、任务管理器等,为用户提供直观的时间交互...

    Excel VBA日期控件使用说明

    3. 配置控件:插入日期控件后,可以在工作表上调整其大小和位置。右键点击控件,选择“属性”进行配置。比如,你可以更改控件的Caption(显示的文本,如“选择日期”),或者设置初始日期等。 三、VBA代码与事件...

    pb8版本的日期控件

    本篇文章将深入探讨PB8中的两种日期控件:独立日期控件和与数据窗口集成的日期控件。 1. 独立日期控件: 独立日期控件在PB8中称为DateEdit控件,它是一个单独的组件,可以在窗口或对话框中自由放置。DateEdit控件...

    可多选的日期控件

    在IT领域,尤其是在前端开发中,"可多选的日期控件"是一个常见的需求,它允许用户在日历界面中选择多个日期,而非只能选择单个日期。这种控件广泛应用于各种应用程序,如行程规划、会议安排或者数据分析等场景。在本...

    wps中excel日期控件下载

    在WPS Office的Excel应用中,日期控件是一种非常实用的功能,它允许用户在工作表中插入一个可交互的日历小部件,以便于选择和输入日期。标题“wps中excel日期控件下载”提示我们要关注如何在WPS Excel中获取和安装这...

    PB9.0 日期控件集合

    在PowerBuilder 9.0(PB9.0)开发环境中,日期控件是不可或缺的元素,主要用于用户界面中输入和显示日期。这个“PB9.0 日期控件集合”包含4个不同的日期选择组件,旨在提供多样化的日期处理功能,以满足不同项目的...

    qq日期控件 qq日期控件 qq日期控件 qq日期控件

    QQ日期控件是一款广泛应用于网页开发中的时间选择组件,它为用户提供了一种便捷的方式来选取日期,常见于在线表单、日程安排等场景。QQ日期控件通常与JavaScript库结合使用,提供美观的用户界面和良好的交互体验。...

    js日期控件 支持IE、firefox、chrome

    在网页开发中,日期控件是一种常见的用户交互组件,它允许用户方便地选择日期,常用于表单填充或事件预订等场景。本压缩包提供的是一款跨浏览器的JS日期控件,兼容IE、Firefox和Chrome这三种主流浏览器,为开发者...

    VB农历日期控件

    VB农历日期控件是Visual Basic(VB)编程环境中用于显示和处理中国农历日期的一种软件组件。在VB应用程序中,开发者可以利用这样的控件为用户提供农历日期的显示、选择和计算功能,尤其对于需要处理农历信息的系统,...

    好用的日期控件

    日期控件在IT行业中是用户界面(UI)设计中的一个重要组成部分,主要用于用户输入或选择日期。在各种应用程序、网页和操作系统中,日期控件提供了一种直观、方便的方式来处理日期相关的数据。它们通常以日历的形式...

    pb强大的日期时间控件

    本资源“pb强大的日期时间控件”是专为PowerBuilder开发者设计的一套全面的日期和时间选择组件,旨在增强用户界面的交互性和功能。 在软件开发中,日期和时间控件是非常关键的部分,它们通常用于用户输入或展示日期...

    日期控件,值得你拥有

    - 移动端日期控件:原生移动平台如iOS和Android都有内置的日期选择器,但开发者也可以使用如React Native或Flutter的第三方组件来提供一致的跨平台体验。 4. **压缩包内容分析**: "DatePicker-master"这个文件名...

    JS 日期控件 可自定义日期格式及选择方式

    在JavaScript编程中,日期控件是一种常见的用户界面元素,它允许用户方便地选择日期,常用于表单填充、日历应用或任何需要日期输入的场景。"JS 日期控件"是一个专门处理日期选择功能的JavaScript库,它简化了开发者...

    日期控件CSDN下载

    日期控件在软件开发中扮演着重要角色,它允许用户选择和输入日期,通常用于日程安排、报表生成、数据录入等场景。CSDN是一个知名的IT社区,提供了丰富的资源下载,包括各种编程控件。这里提到的"日期控件CSDN下载...

    Office_DTP日期控件

    Office DTP(Date Time Picker)日期控件是Microsoft Office应用程序,如Excel中广泛使用的功能,它为用户提供了方便的方式来选择日期。在Excel中,通过VBA(Visual Basic for Applications)脚本,我们可以利用DTP...

    在PB中使用日期时间控件

    1. 添加日期时间控件: - 打开PowerBuilder IDE,进入设计视图。 - 从工具箱中找到"DateTimeCtrl"或"DateCtrl"控件,将其拖放到你需要的位置。 - 双击控件,打开属性面板,可以设置控件的初始值、显示格式、大小...

Global site tag (gtag.js) - Google Analytics