移动端日期插件Mobiscroll.js使用详解

mobiscroll js日期插件的基础入门案例，移动端开发过程中可能会用到。

<html><head><meta charset="UTF-8"><title>mobiscroll</title><link type="text/css" rel="stylesheet" href="../js/mobiscroll.custom-2.6.2.min.css" /></head><body><！--mobiscroll会将表单控件的value属性与插件的输入值绑定--><input id="date" name="date" /><br /><input id="time" name="time" /><br /><input type="button" value="showTime" onclick="showTime（）"><！--一般将js脚本文件放在body元素的底部就是为了加快网页的加载，因为网页的加载和脚本的加载是分开的--><script src="../js/jquery-3.1.0.js"></script><script src="../js/mobiscroll.custom-2.6.2.min.js"></script><script> //初始化日期控件/** 日期控件start */var now = new Date（）;var currYear = now.getFullYear（）;var currMonth = now.getMonth（） + 1;var currDay = now.getDate（）;//mobiScroll插件选项var opt1 = {preset : "date", //日期，可选：datedatetime	ime	ree_listimage_textselecttheme : "android-ics light", //皮肤样式，可选：defaultandroidandroid-ics lightandroid-icsiosjqmsense-uiwp lightwpdisplay : "modal", //显示方式 ，可选：modalinlineubble	opottommode : "scroller", //日期选择模式，可选：scrollerclickpickmixedlang : "zh",dateFormat : "yyyy-mm-dd", // 面板日期格式setText : "确认", //确认按钮名称cancelText : "取消", //取消按钮名籍我dateOrder : "yyyymmdd", //面板中日期排列格式dayText : "日",monthText : "月",yearText : "年", //面板中年月日文字showNow : false,nowText : "今",endYear: currYear +100, //结束年份minDate: new Date（currYear, currMonth - 1, currDay+1）,onSelect:function（textVale,inst）{ //选中时触发事件console.log（"我被选中了....."）;},onClose:function（textVale,inst）{ //插件效果退出时执行 inst:表示点击的状态反馈：set/cancelconsole.log（"textVale--"+textVale）;console.log（this.id）;//this表示调用该插件的对象}};//时间面板显示日期$（"#date"）.mobiscroll（）.date（opt1）; //面板显示时间$（"#time"）.mobiscroll（）.time（opt1）;function showTime（）{alert（$（"#date"）.val（））;}</script> </body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。