mobiscroll 控件的使用(手機端日歷控件)


先上一張圖吧:

控件的下載地址:http://www.kuitao8.com/20140604/2615.shtml

文檔API地址:http://docs.mobiscroll.com/2-13-2/datetime#!opt-minDate

網卡案例:http://www.wglong.com/main/artical!details?id=11

現在直接貼代碼了,

js引用部分:

 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link href="../../js/mobiscroll-master/css/mobiscroll.scroller.css" rel="stylesheet"
        type="text/css" />
    <link href="../../js/mobiscroll-master/css/mobiscroll.scroller.android-holo.css"
        rel="stylesheet" type="text/css" />
    <script src="../../js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../../js/jquery-mobile/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
    <script src="../../js/mobiscroll-master/js/mobiscroll.core.js" type="text/javascript"></script>
    <script src="../../js/mobiscroll-master/js/mobiscroll.scroller.js" type="text/javascript"></script>
    <script src="../../js/mobiscroll-master/js/mobiscroll.datetime.js" type="text/javascript"></script>
    <script src="../../js/mobiscroll-master/js/i18n/mobiscroll.i18n.zh.js" type="text/javascript"></script>

設置DOM部分(id和name是我自己設置的,重要部分是class):

<input name="kssj" id="kssj" type="text" class="demo-test-date1" />

js部分:

 $('.demo-test-date1').mobiscroll().date({
            defaultValue: new Date(kssj),
            preset: 'date', //日期
            dateFormat: 'yy-mm-dd', // 日期格式
            dateOrder: 'yymmdd', //面板中日期排列格式
            theme: 'android-holo', //皮膚樣式
            mode: 'scroller', //日期選擇模式
            lang: 'zh',
            display: 'modal', //顯示方式
            animate: '',
            maxDate: new Date(jssj)
        });

就這樣了,有什么不明白的call qq:1576410833


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM