APICloud (12): Date Control

Date control original link: http://community.apicloud.com/bbs/forum.php?mod=viewthread&tid=26845&extra=&page=1

Effect: A selection box pops up from the bottom, you can select the year, month, day, hour, minute and second by sliding, click "OK" to select the data, and select "Cancel" to cancel the data.

I will not talk about the specific implementation process of this date control here, but only how to use it and the problems and solutions I encountered in the process of using it.

I only choose the year, month and day here.

1. The basic HTML code is as follows:

<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">Please select a time</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. Download the source code from the given link or from the attachment, find lCalendar.js, and import it into the page that needs to use the date control.

3. Initialize the date and time for the controls that need to use the date control. Here I initialize the two text boxes, startTime and endTime.

<script type="text/javascript">	
	//Initialize the date control
	var calendar = new lCalendar ();
	calendar.init({
		'trigger': '#startTime',
		'type': 'date'
	});
	//End Time
	var calendar2 = new lCalendar ();
	calendar2.init({
		'trigger': '#endTime',
		'type': 'date'
	});
	
</script>

Note: The code to initialize the calendar control is best placed last.

4. Hit the input box, and the calendar control will pop up from the bottom automatically. After selecting the date, click the "OK" button to write the selected date into the corresponding input box.

The following are the problems encountered :

1. My date is displayed as a query condition, and there are other query conditions and icons, such as returning to the top and bottom navigation bars. When the date control pops up from the bottom, the entire page is particularly messy.

Solution: Adjust the z-index of each layer and add an overlay. Bottom navigation bar and back to top icon 1, page list 2, mask layer 3, query condition popup layer 4. In this way, as soon as the sub-query condition comes out, the page is left with a query box. The calendar control comes with a mask layer. When the calendar control comes out, you can only see the query box and the calendar control on the page, and only the calendar control can operate.

2. After the calendar control pops up, it is no problem to swipe up to select the data, but it will not work if you swipe down. If you swipe too much, the page will be refreshed automatically.

Reason: Because the current page uses pull-down refresh, when the calendar control slides down to select data, the pull-down event is actually triggered, so there is no response for a small slide down, and the page for a large slide down will be refreshed.

Solution:

When the page is refreshed, it must be ensured that the current page is bouncing, that is: bounces: true, if bounces: false, the page cannot be refreshed.

According to this reason, set bounces to false when the calendar control pops up, that is, non-bounce, then the drop-down will not refresh again. Wait until the data selection is completed or canceled, and then set bounces to true, so that the pull-down refresh can be guaranteed.

The specific operations are as follows:

First confirm which method needs to be changed from the following code:

_self.trigger.addEventListener('click', {
	"date": popupDate,
	"datetime": popupDateTime,
	"time": popupTime
}[type]);

I am using date, so just need to modify the popupDate method. Find the popupDate method and add the code to the first line of the method:

//Set the page to not bounce to avoid conflicts with "pull-down refresh"
api.setWinAttr({
    bounces: false//No bounce
});

Find the event finishMobileDate(e) triggered by "OK" and the event closeMobileCalendar(e) triggered by "Cancel", and also add code in the first line:

//Set the page to bounce and activate the pull-down refresh function
api.setWinAttr({
    bounces: true//弹动
});

This problem is solved.

3. After adjusting the z-index of each level and adding the mask layer, swipe up or down on the mask layer, and the data list under the mask layer will also scroll together.

Workaround: Prevent the default action when the mask layer on the page is displayed:

$(document).on("touchmove",function(e) {
    if(zhegaiFlag==1){//1-the cover layer is displayed 0-hidden is hidden by default
    	e.preventDefault();
    }
});

There is a doubt here: When the date control slides up and down, if it also prevents the default behavior, it will not be able to achieve the requirements.

This problem is handled by the lCalendar calendar control. It adds a cover layer - when this cover layer is displayed, no other places can operate, and the touchmove event is added, so the above code cannot limit the date control.

4. Click the blank space of the mask layer to hide the query box.

This question has been said before, so let’s paste the code directly here:

//Click on the blank space of the mask layer to hide each option
$("#zhegai").bind("click",function(){  
	$ul.hide();
	$(this).hide();//Hide the mask layer  
	zhegaiFlag=0;
});

good luck!

APICloud (12): Date Control

Guess you like