jQuery Mobile手机移动端日期时间选择控件
2015-05-18 13:19:17  By: dwtedx

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

jQuery手机端日历控件


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+