移动端日历控件 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

时间: 2025-01-02 19:18:24

移动端日历控件 mobiscroll 的简单使用、参数设置的相关文章

一款灵活好用的日历控件Kalendae

Kalendae是一款纯js不依赖任何js库的日历控件,可以轻松实现显示月份数量,当前选中多个日期,并可以按照周等你想要的格式去定制选中项. 下载地址:GitHub/Kalendae 第一步:Kalendae引用 使用前需要引用样式文件kalendae.css和JS文件kalendae.standalone.js <link href="../App_Common/Kalendae/build/kalendae.css" rel="stylesheet" ty

asp.net Calendar 日历控件用法

asp.net Calendar 是微软自带的一款日历控件,除了简单显示日期时间外, 还可以绑定一些需要的事件. Calendar_DayRender 事件,是在加载都去时间日期时候的方法,用此方法可以在日历对应的每一天上面添加你所需要的事件,下面写一个对应的务实的列子 protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { ///当日期不是当前月的时候,就去掉它的日期数(就是在本月显示日期的面板上面不显

IOS自定义日历控件的简单实现(附思想及过程)

因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑就OK了,下面开始自己从开始到完成的整个过程 1,首先做NSDate类目,扩展一些方法让日期之间转换更加方便 #import <Foundation/Foundation.h> @interface NSDate (LYWCalendar) #pragma mark - 获取日 - (NSInte

在iOS上实现一个简单的日历控件

转自:http://blog.csdn.net/jasonblog/article/details/21977481 近期需要写一个交互有点DT的日历控件,具体交互细节这里略过不表. 不过再怎么复杂的控件,也是由基础的零配件组装起来的,这里最基本的就是日历控件. 先上图: 从图中可以看出日历控件就是由一个个小方块组成的,每一行有7个小方块,分别表示一周的星期天到星期六. 给定一个月份,我们首先需要知道这个月有多少周.那么如何确定一个月有多少周呢? 我是这么想的,在NSDate上做扩展: [cpp

Jquery自定义扩展方法(二)--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende

安卓自己定义日历控件

尊重作者劳动成果.转载请注明出处:http://blog.csdn.net/baiyuliang2013/article/details/37732149 近期,因工作须要,须要实现自己定义日历控件功能,主要应用于软件中的酒店入住时间选择功能.进入日历后,可选择入住时间,及离开时间,选择完毕后,再次进入日历时.会显示上次选中的结果,默认选择日期是在距当前日期三个月内.三个月以外的均以灰色显示.且不可点击.本篇实现的效果是高仿某软件的界面效果: 某软件界面效果: watermark/2/text/

fullcalendar日历控件知识点集合

1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方法.托付(函数回调)作为成员变量.通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历.换句话说,我们所做的绝大多数工作就是依照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例.除非对于极少的特

为什么日历控件放在panel无法显示出来

前言 以前一直没有做过c/s这块开发,最近一段时间,刚接触.当然winform自己肯定会,但是只是很早以前自己玩的时候弄弄.最近做的时候,很简单的一个效果,自己怎么也实现不出来,最后没事和一个哥们私下弄得时候发现了奥妙,哈哈,可能大家做过winform的都知道,但是还是分享一下. 需求 form窗体上,放一个groupbox控件,放一个datagridview控件,放一个panel控件.groupbox中放一个textbox控件,dock属性为top,panel中放一个日历控件,gridview

javaScript实现日历控件

最近学习js,闲来无事就写了个简单的日历控件,不知道别人是怎么实现的,纯粹自己想法写的, 写的不好 ,但可以起到抛砖引玉的作用. 先来看效果. 调用时候的代码 就一句,引入我写的js文件, 前提text框必须有rlk="rl"  才会被我识别成要做日历控件的文本框, 我回把它设为readonly js代码也很简单,一些简单的算法,然后画出div 里面再画个table,根据文本框的位置进行定位就行了..代码很简单 大家可以看看. 我把完整代码和实例放在一起,大家可以去免费下载. 下载地址