mobiscroll 日期控件使用

引入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);
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值