css+引入手机端插件,jQuery手机端mobiscroll时间选择插件

特效描述：手机端mobiscroll 时间选择。jQuery手机端mobiscroll时间选择插件

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

时间选择：

列表选择：

$(function(){

$('#timeSel').mobiscroll().datetime({

theme: 'ios', //皮肤样式

display: 'bottom', //对齐

mode: 'scroller', //日期选择模式：弹出

lang: 'zh', //语言

dateFormat: 'yy-MM-dd HH:mm', // 日期格式

setText: '确定', //确认按钮名称

cancelText: '取消',//取消按钮名籍我

showLabel : false, //显示头信息

headerText: '时间',

height: 40,

max: new Date('2050-12-30 23:59:59'),

min: new Date('2014-01-01 00:00:00')

});

$("#listSel").mobiscroll().select({

theme: 'ios', //皮肤样式

display: 'bottom', //对齐

mode: 'scroller', //选择模式：弹出

lang: 'zh',

data: [

{value:0, text:'交钥匙'},

{value:1, text:'入住'},

{value:2, text:'拆旧'}

],

defaultValue: 2,

setText: '确定', //确认按钮名称

cancelText: '取消',//取消按钮名籍我

showLabel: false,

headerText: '姓名',

onSet: function (event, inst) {

console.log(event.valueText);//选定的text值

// console.log(inst.getVal()); //选定的value值

// $('#listSel').mobiscroll('hide');

},

onClose: function (event, inst) {

// $('#listSel').mobiscroll('hide');

}

});

});

/*$(document).on('click','#addbtn',function () {

$('#listUnordered-demo').mobiscroll('show');

return false;

});*/