插件最终版图:
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);
});
样式可自行修改,百度