移動端日歷控件 mobiscroll 的簡單使用、參數設置

mobiscroll 在性能方面比較好，可選用多種效果，滑動效果也比較順暢。

 

提供樣式文件和js文件，直接點擊下載，該版本是 mobiscroll 2.13的

官方地址 ： https://docs.mobiscroll.com/2-17-2

下載地址：  http://note.youdao.com/yws/public/redirect/share?id=95fd7bf95aa4f13bd6ba0f9ed16b6f6b&type=false

 

需引入jquery。該插件很強大，本文只是簡單的引用日歷。

 

var theme="ios";

$("#id").mobiscroll().date({//這里是date，還有time，datetime不在本文范圍。

            theme: theme,//樣式，可根據操作系統不同設置不一樣的樣式

            lang: "zh",

            cancelText: "取消",

            dateFormat: 'yyyy-mm-dd',

            onBeforeShow: function (inst) { },

            endYear: 2016,//可根據當前年份設置

            dayText: '日', monthText: '月', yearText: '年',

            headerText: function(valueText) { 

                var array = valueText.split('-');

                return array[0] + "年" + array[1] + "月" + array[2] + "日";

            },

            onBeforeShow:function(inst){//展示前的事件

        inst.settings.readonly=true;//只讀屬性

       },

            onSelect: function (valueText, inst) {//選擇時事件（點擊確定后），valueText 為選擇的時間，

                var selectedDate = valueText;

            }

        });

配置里的theme參數，提供多種樣式供參考：

android 

android-holo

android-holo-light

android-ics

android-ics-light

ios(窗口底部划出)

ios7(窗口底部划出)

jqm（感覺類似透明的效果，自己去試試效果）

sense-ui

wp

更多請參考官方網站  https://docs.mobiscroll.com/2-17-2