引入css: <link rel="stylesheet" type="text/css" href="../html/css/mobiscroll.custom-2.5.0.min.css" />
引入js : <script src="../html/js/mobiscroll.custom-2.5.0.min.js?t=${version}" type="text/javascript"></script>
使用: <div class="information_list_selects fr">
<input type="text" class="list_select_date" id="birth_date" value="請選擇" readonly="readonly">
<i class="arrow_bottom"></i>
</div>
js 设置:
//默认的初始日期
var beginDate ;
var date = new Date();
var seperator1 = "-";
var year = "1998";
var currentYear = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
//默认时间为1998年的当前日和月
beginDate = year + seperator1 + month + seperator1 + strDate;
var birthDay = beginDate ;//
var surpass49Date = (currentYear-50) + "/" + month + "/" + strDate;
//日期控件
var now = new Date();
var currYear = now.getFullYear();
var currMonth = now.getMonth() + 1;
var currDay = now.getDate();
var minYear = currYear-61;
var minMouth = null;
var minDay = null;
//如果为本月最后一天
if(new Date(currYear,currMonth-1,currDay).getTime() === new Date(currYear,currMonth,0).getTime()){
minDay = 1;
minMouth = currMonth + 1 ;
//如果即为本月最后一天又为本年最后一个月
if(minMouth === 13){
minMouth = 1;
minYear = minYear + 1;
}
} else {
minDay = currDay + 1;
minMouth = currMonth;
}
//差一天61周岁
var minDate = new Date(minYear, minMouth - 1, minDay);
//刚刚满18周岁
var maxDate = new Date(currYear-18, currMonth - 1, currDay);
//初始化日期控件
var opt1 = {
preset: 'date', //日期,可选:date\datetime\time\tree_list\image_text\select
theme: 'android-ics light', //皮肤样式,可选:default\android\android-ics light\android-ics\ios\jqm\sense-ui\wp light\wp
display: 'modal', //显示方式 ,可选:modal\inline\bubble\top\bottom
mode: 'scroller', //日期选择模式,可选:scroller\clickpick\mixed
invalid: { dates: [new Date(2016,10,12)] },
lang: 'zh',
dateFormat: 'yy-mm-dd', // 日期格式
setText:'確認', //确认按钮名称
cancelText:'取消', //取消按钮名籍我
dateOrder: 'yyyymmdd', //面板中日期排列格式
dayText: '日',
monthText: '月',
yearText: '年', //面板中年月日文字
showNow: false,
nowText: "今",
// onSelect: fnCopy, //点击确定按钮,触发事件。
minDate: minDate,
maxDate: maxDate,
onSelect:function(textVale,inst){ //选中时触发事件
var flag = true;
if((new Date(textVale.replace(/-/g,"\/"))) > (new Date(surpass49Date.replace(/-/g,"\/")))){
flag = false;
}
if(flag){
$("#productPlan4").wrap("<span style='display:none'></span>");
$("#productPlan5").wrap("<span style='display:none'></span>");
$("#productPlan").text("請選擇");
$("#promotion").val("");
$("#premiumAndTotalPremium").html("<b>保費及徵費</b><br><span class=\"premium_text_money\">$0.00港元</span><span class=\"color_575757\">(原價$0.00港元)</span>");
$("#amount").html("$0港元");
} else {
var optionP= $("#productPlan4").parent("span");
$("#productPlan4").replaceAll(optionP);
var optionP5= $("#productPlan5").parent("span");
$("#productPlan5").replaceAll(optionP5);
}
birthDay = textVale.replace(/\//g,"-");
if(!checkProductPlan()){
return ;
}
premiumCalculate();
}
/*,
onClose:function(textVale,inst){ //插件效果退出时执行 inst:表示点击的状态反馈:set/cancel
console.log("textVale--"+textVale);
console.log(this.id);//this表示调用该插件的对象
}*/
};
调用: $("#birth_date").mobiscroll(opt1);
mobiscroll 日期控件使用
最新推荐文章于 2019-12-20 14:17:41 发布