zoukankan      html  css  js  c++  java
  • Mobiscroll日期插件使用

    • 相关资源
    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=" 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']));
    }

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

  • 相关阅读:
    棋盘问题 POJ
    Fire! UVA
    走迷宫(bfs, 最短路)
    ASP-Command-SQL格式
    ASP连接数据库SQLServer
    Bootstrap学习-导航条-分页导航
    Bootstrap导航栏头部错位问题
    SQLServer判断一个IP是否在一个IP段里
    MySQL合并多行
    CSS图片居中,多余隐藏
  • 原文地址:https://www.cnblogs.com/rexfang/p/6580974.html
Copyright © 2011-2022 走看看