移动端日历控件 mobiscroll 的简单使用参数设置

Posted 2020-11-10 大西瓜3721

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

 

 

 

mobiscroll ： 滑动选择

2.13.2版本免费，官网（mobiscroll.com）收费

先从官方下载2.13.2体验版下来，查看例子结合官方API学习( http://docs.mobiscroll.com/2-13-2 )

另外官方还有在线例子：

http://demo.mobiscroll.com/mobile/datetime/date/#display=modal&theme=mobiscroll&lang=en&language=zh

http://demo.mobiscroll.com/select/countrypicker/#language=zh&display=modal

 

.net 可以在程序包管理控制台输入安装：Install-Package Mobiscroll

下载完成后，保留mobiscroll-2.13.2.full.min.css，mobiscroll-2.13.2.full.min.js , 其它的css、js可删除

 

.net视图引擎可直接渲染mobiscroll控件

 

[csharp] view plaincopyprint?

 

1. @using (html.BeginForm())  
2. {  
3.     @Html.LabelFor(m => m.Name)  
4.     @Html.TextBoxFor(m => m.Name)  
5.     <br />  
6.     @Html.LabelFor(m => m.Birthday)  
7.   
8.     <!-- Generate a date scroller for the birthday model property-->  
9.     @Html.Mobiscroll().DateFor(m => m.Birthday)  
10.     <br />  
11.     @Html.LabelFor(m => m.Gender)  
12.   
13.     <!-- create the selectlist used for the select scroller -->  
14.     IEnumerable<SelectListItem> genders = new SelectList(new List<string>(){"male", "female"});  
15.     @Html.Mobiscroll().SelectFor(m => m.Gender, genders)  
16.     <br />  
17.     @Html.LabelFor(m => m.FavoriteBook)  
18.   
19.     <!-- create the selectlist for the books grouped by author -->  
20.     Dictionary<string, IEnumerable<SelectListItem>> books = new Dictionary<string, IEnumerable<SelectListItem>>();  
21.     books.Add("Adams", new SelectList(new List<string>() {   
22.         "The Hitchhiker‘s Guide to the Galaxy",   
23.         "The Restaurant at the End of the Universe",   
24.         "So Long, and Thanks for All the Fish",   
25.         "Life, the Universe and Everything"   
26.     }));  
27.     books.Add("Asimov", new SelectList(new List<string>() {   
28.         "I, Robot",   
29.         "The Caves of Steel",   
30.         "Foundation"   
31.     }));  
32.     books.Add("Herbert", new SelectList(new List<string>() {   
33.         "Dune",   
34.         "God Emperor of Dune",   
35.         "Dune Messiah",   
36.         "Children of Dune"   
37.     }));  
38.     @Html.Mobiscroll().SelectFor(m => m.FavoriteBook, books)  
39.     <br />  
40.     <button type="submit">Send</button>  
41. }  
42.        

详情：http://docs.mobiscroll.com/2-14-3/mvc-helpers

 

 

以下是本人看了一下API后随意写的几个例子，其实用select去做会更好，此处只是演示，就随便啦！

 

自定义年月（去掉年月日的"日"滚轮布局）：

 

[csharp] view plaincopyprint?

 

1. @{  
2.     ViewBag.Title = "taste mobiscroll";  
3. }  
4. @section styles{  
5. <link href="~/Content/mobiscroll-2.13.2.full.min.css" rel="stylesheet" />  
6. <style>  
7. </style>  
8. }  
9. <div class="container">  
10.     <input id="date" />  
11. </div>  
12.   
13. @section scripts{  
14. <script src="~/Scripts/jquery-1.8.2.min.js"></script>  
15. <script src="~/Scripts/mobiscroll-2.13.2.full.min.js"></script>     
16. <script>  
17. $(function () {  
18.     $("#date").mobiscroll().date({  
19.         theme: "android-ics light",  
20.         lang: "zh",  
21.         cancelText: null,  
22.         dateFormat: ‘yy/mm‘, //返回结果格式化为年月格式  
23.         // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现  
24.         onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮  
25.         headerText: function (valueText) { //自定义弹出框头部格式  
26.             array = valueText.split(‘/‘);  
27.             return array[0] + "年" + array[1] + "月";  
28.         }  
29.     });  
30. })   
31. </script>  
32. }  

效果如下图：

 

treelist 示例一：

 

[csharp] view plaincopyprint?

 

1. <style>  
2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
3. </style>  
4.   
5. <ul id="treelist">  
6.     <li>普通班</li><li>VIP班</li><li>特色班</li><li>至尊班</li><li>女子特训班</li>  
7. </ul>  
8.   
9. <script>  
10. $(function () {  
11.     $("#treelist").mobiscroll().treelist({  
12.         theme: "android-ics light",  
13.         lang: "zh",  
14.         defaultValue: [Math.floor($(‘#treelist li‘).length/2)],  
15.         cancelText: null,  
16.         headerText: function (valueText) { return "选择班级"; }  
17.     });  
18. })   
19. </script>  

效果如下图：

 

 

treelist 示例二：

 

[csharp] view plaincopyprint?

 

1. <style>  
2. .mbsc-android-holo .dwv { text-align:left;text-indent:.8em; }  
3. </style>  
4.   
5. <ul id="treelist">  
6.     <li>  
7.         <span>奥迪</span>  
8.         <ul>  
9.             <li>奥迪A3</li>  
10.             <li>奥迪A4L</li>  
11.             <li>奥迪A6L</li>  
12.             <li>奥迪Q3</li>  
13.             <li>奥迪Q5</li>  
14.             <li>奥迪A4</li>  
15.             <li>奥迪A6</li>  
16.             <li>奥迪A1</li>  
17.             <li>奥迪A3(进口)</li>  
18.         </ul>  
19.     </li>  
20.     <li>  
21.         <span>宝马</span>  
22.         <ul>  
23.             <li>宝马X1</li>  
24.             <li>宝马i3</li>  
25.             <li>宝马1系</li>  
26.             <li>宝马3系</li>  
27.             <li>宝马5系</li>  
28.         </ul>  
29.     </li>  
30.     <li>  
31.         <span>奔驰</span>  
32.         <ul>  
33.             <li>奔驰A级</li>  
34.             <li>奔驰C级</li>  
35.             <li>奔驰E级</li>  
36.             <li>奔驰S级</li>  
37.             <li>奔驰GLK级</li>  
38.             <li>奔驰CLA级</li>  
39.             <li>奔驰CLS级</li>  
40.         </ul>  
41.     </li>  
42. </ul>  
43.   
44. <script>  
45. $(function () {  
46.     var i = Math.floor($(‘#treelist>li‘).length / 2),  
47.         j = Math.floor($(‘#treelist>li‘).eq(i).find(‘ul li‘).length / 2);  
48.     $("#treelist").mobiscroll().treelist({  
49.         theme: "android-ics light",  
50.         lang: "zh",  
51.         defaultValue: [i,j],  
52.         cancelText: null,  
53.         placeholder: ‘选择车型‘,  
54.         headerText: function (valueText) { return "选择车型"; },  
55.         formatResult: function (array) { //返回自定义格式结果  
56.             return $(‘#treelist>li‘).eq(array[0]).children(‘span‘).text() +‘ ‘+ $(‘#treelist>li‘).eq(array[0]).find(‘ul li‘).eq(array[1]).text().trim(‘ ‘);  
57.         }  
58.     });  
59. })   
60. </script>  

效果如图：