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']));
    }

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

  • 相关阅读:
    bash 大致学习后的小案例,导出数据进行打包
    android 处理图片工具
    js屏蔽文本选中产生的蓝色背景色
    修正IE6不支持position:fixed的bug
    TreeView ShowCheckBox [文摘]
    存储过程分页程序
    GridView 72般绝技 很棒的东西 收藏..
    GridView 自带排序分页
    字符串补位
    sql2005 定义临时表
  • 原文地址:https://www.cnblogs.com/rexfang/p/6580974.html
Copyright © 2011-2022 走看看