mobiscroll.js的用法

Posted 2021-11-30 dada521jj

引入相应的css js文件

<script type="text/javascript" src="${BasePath}/static/common/lib/mobiscroll/js/mobiscroll_date.js?v=1.1"></script>
<script type="text/javascript" src="${BasePath}/static/common/lib/mobiscroll/js/mobiscroll.js"></script>

<link rel="stylesheet" href="${BasePath}/static/visitor_app/css/mobiscroll_date.css?v=1.1">
<link rel="stylesheet" href="${BasePath}/static/common/lib/mobiscroll/css/mobiscroll.css">

代码如下

var currYear = (new Date()).getFullYear();
var opt={};
opt.date = {preset : ‘date‘};
opt.datetime = {preset : ‘datetime‘};
opt.time = {preset : ‘time‘};
opt.default = {
    theme: ‘android-ics light‘, //皮肤样式
    display: ‘bottom‘, //显示方式
    mode: ‘scroller‘, //日期选择模式
    dateFormat: ‘yyyy-mm-dd‘,
    lang: ‘zh‘,
    showNow: true,
    nowText: "现在",
    startYear: currYear - 50, //开始年份
    endYear: currYear + 10, //结束年份
    onSelect: function (valueText, inst) {//选择时事件（点击确定后），valueText 为选择的时间，
    },
    onBeforeShow:function(){
        $(‘.message-form .time2‘).blur()
    }
};
$(‘.message-form .time2‘).each(function () {
    $(this).mobiscroll($.extend(opt[‘datetime‘], opt[‘default‘]));

})