APICloud（十二）：日期控件

最新推荐文章于 2022-04-25 20:07:20 发布

原创最新推荐文章于 2022-04-25 20:07:20 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#日期控件

APICloud 专栏收录该内容

13 篇文章

订阅专栏

这篇博客介绍了如何在APICloud中使用日期控件，包括HTML基础代码、引入lCalendar.js、初始化日期以及解决在使用过程中遇到的页面布局混乱、下拉刷新冲突、遮罩层滚动问题和点击遮罩层隐藏查询框等问题的解决办法。

日期控件原链接：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;
});

祝好运！