手机端H5页面时间插件

 插件最终版图：

 1.引入css和js样式‘；

<link rel="stylesheet" type="text/css" href="../mobile/css/mobiscroll.css">
<link rel="stylesheet" type="text/css" href="../mobile/css/normalize3.0.2.min.css">
<link rel="stylesheet" type="text/css" href="../mobile/css/mobiscroll_date.css">
<script src="../mobile/js/mobiscroll_date.js"></script>
<script src="../mobile/js/mobiscroll.js"></script>

 

<input type="text" readonly name="peTrainee.joinWorkDate" id="register_workTime" data-role="datebox" placeholder='请选择工作时间'>

 

$(function(){
    //初始化日期控件
    var opt = {
        preset: 'date', //日期
        theme: 'jqm', //皮肤样式皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】【wp light】【wp】

        display: 'modal', //显示方式 【modal】【inline】【bubble】【top】【bottom】
        mode: 'scroller', //日期选择模式【scroller】【clickpick】【mixed】
        dateFormat: 'yy-mm-dd', // 日期格式
        setText: '确定', //确认按钮名称
        cancelText: '取消',//取消按钮名籍我
        dateOrder: 'yymmdd', //面板中日期排列格式
        dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
        endYear:2020 //结束年份
    };
    
    $("#register_workTime").mobiscroll(opt);
});

样式可自行修改,百度