jQuery Mobile手机移动端日期时间选择控件

很久都没有分享过技术相关的文章了、今天新公司第一天上班、分享一个jQuery手机端日历控件、是一款基于mobiscroll插件实现的可用于手机端日期日历控件、希望对大家有用、做手机web的哥们可能会有用

JS代码

function init() {
	// Select demo initialization
	$(´#demo_select´).mobiscroll().select({
		theme: theme,     
		mode: mode,       
		display: display,
		lang: lang        
	});

	// Date demo initialization
	$(´#demo_date´).mobiscroll().date({
		theme: theme,     
		mode: mode,      
		display: display, 
		lang: lang     
	});

	// Date & Time demo initialization
	$(´#demo_datetime´).mobiscroll().datetime({
		theme: theme,   
		mode: mode,      
		display: display, 
		lang: lang,       
		minDate: new Date(2012,3,10,9,22),  
		maxDate: new Date(2014,7,30,15,44),  
		stepMinute: 5  
	});

	// Time demo initialization
	$(´#demo_time´).mobiscroll().time({
		theme: theme,    
		mode: mode,      
		display: display, 
		lang: lang    
	});

	// Image demo initialization
	$(´#demo_image´).mobiscroll().image({
		theme: theme,   
		mode: mode,      
		display: display, 
		lang: lang,       
		labels: [´Cars´], 
		enhance: true
	});

	// Treelist demo initialization
	$(´#demo_treelist´).mobiscroll().treelist({
		theme: theme,     
		mode: mode,     
		display: display, 
		lang: lang,      
		labels: [´Region´, ´Country´, ´City´] 
	});

}  

部分HTML代码

<!-- Date demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_date">
	<label for="demo_date">Try Date</label>
	<input type="text" id="demo_date" />  
</div>

<!-- Date & Time demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_datetime">
	<label for="demo_datetime">Try Date & Time</label>
	<input type="text" id="demo_datetime" />  
</div>

<!-- Time demo markup -->
<div data-role="fieldcontain" class="demo-cont" id="demo_cont_time">
	<label for="demo_time">Try Time</label>
	<input type="text" id="demo_time" />  
</div>

最后给大家贴上源代码下载链接、希望对大家有用

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1kTCFkdp 密码: 4wmc