Mobiscroll日期插件使用

时间:2022-04-08 22:43:05
  • 相关资源
  1. 官方帮助文档:https://docs.mobiscroll.com/3-0-1
  • 导入资源文件
<link href="${webRoot}/template/green/wap/module/member/medicinebox/statics/css/mobiscroll.css" type="text/css" rel="stylesheet" />
<link href="${webRoot}/template/green/wap/module/member/medicinebox/statics/css/mobiscroll_date.css" type="text/css" rel="stylesheet" />

<script src="${webRoot}/template/green/wap/module/member/medicinebox/statics/js/jquery.min.js" type="text/javascript"> </script>
<script src="${webRoot}/template/green/wap/module/member/medicinebox/statics/js/mobiscroll_date.js" type="text/javascript"> </script>
<script src="${webRoot}/template/green/wap/module/member/medicinebox/statics/js/mobiscroll.js" type="text/javascript"> </script>

  

  • 设置日期输入框
<input id="mobiscroll_input" style="width: 0rem;">

  

  • 初始化日期插件
function initMobiscroll(){
var currYear = (new Date()).getFullYear();
var opt={};
opt.date
= {
preset :
'date',
onSelect:
function(valueText,inst){
$(
"#validity_text").text(valueText);
$(
"#drug_effective_time_str_input").val($.trim(valueText));
},
onBeforeShow:
function (event, inst) {
var validity = $.trim($("#validity_text").text()).split("-");
if(!isEmpty(validity)){
$(
'#mobiscroll_input').mobiscroll('setDate', new Date(validity[0], validity[1] - 1, validity[2]));
}
}
};
opt.datetime
= {preset : 'datetime'};
opt.time
= {preset : 'time'};
opt.
default = {
theme:
'android-ics light', //皮肤样式
display: 'modal', //显示方式
mode: 'scroller', //日期选择模式
dateFormat: 'yyyy-mm-dd',
lang:
'zh',
showNow:
true,
nowText:
"今天",
startYear: currYear
- 50, //开始年份
endYear: currYear + 10 //结束年份
};

$(
"#mobiscroll_input").mobiscroll($.extend(opt['date'], opt['default']));
}

 欢迎转载,转载必须标明出处