jquery mobile手机选择时间插件代码，手机端日历控件mobiscroll插件
这是一个手机时间选择插件，手机端日历控件，
加载CSS
<link href="css/mobiscroll.css" rel="stylesheet" type="text/css" />
加载JQ
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript" src="js/mobiscroll.js"></script>
设置监控输入
data-role="datebox"是执行插件的标识，要和执行插件中的$('input:jqmData(role="datebox")').mobiscroll(opt1);的datebox一致
<input type="text" id="date" name="sDate" value="" data-role="datebox" />
执行插件
<script type="text/javascript">
$(function () {
opt1 = {
preset: 'date', //日期 #datetime加上时分秒
theme: 'default', //皮肤样式
display: 'modal', //显示方式
mode: 'mixed', //日期选择模式
dateFormat: 'yy-mm-dd', // 日期输出格式
timeFormat: 'HH:ii:ss', // 日期输出格式
dateOrder: 'yymmdd', //面板中日期排列格式
timeWheels: 'HHiiss', //面板中日期排列格式
setText: '确定', //确认按钮名称
cancelText: '取消',//取消按钮名籍我
dayText: '日', //面板中日文字
monthText: '月', //面板中月文字
yearText: '年', //面板中年文字
endYear: 2020, //结束年份
hourText: '时',
minuteText: '分',
secText: '秒',
lang: 'zh',
};
$('input:jqmData(role="datebox")').mobiscroll(opt1);
});
</script>更多参数设置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="../js/jquery.min.js"></script>
<title>mobiscroll 日期控件例子</title>
<script type="text/javascript">
$(document).ready(function(){
function init() {
$('#demo_date').mobiscroll().date({
theme: 'ios',
/*
scroller —— 以wheel滑动方式选择
clickpick —— 显示 - + 按钮选择
mixed —— 兼容以上两种方式
* */
mode: 'scroller',
/*
modal —— 显示在中间
inline —— 直接显示在页面中
bubble —— 类似于tip弹出显示
top —— 显示在顶部
bottom —— 显示在底部
*/
display: 'bottom',
//设置按钮显示的样式
btnClass : 'sqh_color_56 font_16 sqh_line_height_15 margin_10 sqh_font_type',
minDate:new Date() ,
//点击确定按钮，触发事件。
onSelect:mobiscroll_select,
//当时间选择的内容发生变化触发的事件
onChange:mobiscroll_change,
//被调用之前触发该方法，可以在显示之前修改配置文件
onBeforeShow:mobiscroll_beforeShow,
//点击取消按钮触发的事件
onCancel:mobiscroll_cancel,
//当弹出效果退出的时候执行该方法，在onSelect 和 onCancel之前执行
onClose:mobiscroll_close,
// onDestroy:mobiscroll_destroy,
//生成完HTML代码之后还有显示代码之前执行这个函数，可以自定义HTML内容
onMarkupReady:mobiscroll_markupReady,
//显示位置之前调用该方法
onPosition:mobiscroll_position,
//改变一个值之后触发的时间，参数是其中一个的值
//Gets called when the user taps on a value on the wheel.
onValueTap:mobiscroll_valueTap,
//显示之前触发的时间
onShow:mobiscroll_show,
//Gets called on initialization and on every wheel change
validate:mobiscroll_validate,
lang: 'zh'
});
}
通过一个id监控点击时间展示时间插件，启动插件，弹出插件
$("#show").click(function(){
$("#demo_date").mobiscroll("show");
});
$("#clear").click(function(){
$("#demo_date").mobiscroll("clear");
});
init();
});
function mobiscroll_validate(item, inst){
}
function mobiscroll_show(html, valueText, inst){
}
function mobiscroll_valueTap(html, inst){
//html是变化值控件的HTML代码，与mobiscroll_position中的第一个参数不一致，
console.log("valueText : " + html[0].outerHTML);
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_position(html, inst){
//html是一个数组对象，用户显示HTML的内容，代表的是整个显示控件的内容
console.log("html : " + html[0].outerHTML);
console.log("inst : " + inst);
}
function mobiscroll_markupReady(html, inst){
console.log("html : " + html);
console.log("inst : " + inst);
//inst._markup 就是生成的html 对象
console.log(inst._markup == html);
}
function mobiscroll_destroy(valueText, btn, inst){
//valueText是选中的值
console.log("valueText : " + valueText);
console.log("btn : " + btn);
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_close(valueText, btn, inst){
//valueText是选中的值
console.log("valueText : " + valueText);
console.log("btn : " + btn);
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_cancel(valueText, inst){
//valueText是选中的值
console.log("valueText : " + valueText);
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_beforeShow(inst){
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_select(valueText,inst){
//valueText是选中的值
console.log("valueText : " + valueText);
//mobiscroll对象
console.log("inst : " + inst);
}
function mobiscroll_change(valueText,inst){
//valueText是选中的值
console.log("valueText : " + valueText);
//mobiscroll对象
console.log("inst : " + inst);
}
</script>
</head>
<body>
<input id="demo_date" placeholder="Please Select ..." />
<button id="clear">Clear</button>
<button id="show">Show</button>
</body>
</html>
<script src="../package/mobiscroll/js/mobiscroll.core.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.frame.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.scroller.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.util.datetime.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.datetimebase.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.datetime.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.select.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.listbase.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.image.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.treelist.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.frame.ios.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.frame.sense-ui.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.frame.wp.js"></script>
<script src="../package/mobiscroll/js/mobiscroll.mobiscroll-dark.js"></script>
<script src="../package/mobiscroll/js/i18n/mobiscroll.i18n.zh.js"></script>
<link rel="stylesheet" href="../package/mobiscroll/css/import.css">
本文作者： Liaodeity
本文链接： https://www.jianbaizhan.com/code/550
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！