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

时间: 2024-10-14 11:01:41

mobiscroll 控件的使用(手机端日历控件)的相关文章

js手机端浮层控件,并有多种弹出小提示,兼容pc端浏览器

js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js dialog弹窗 用法 这是内容 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="di

手机端radio控件 ios效果

一.CSS代码如下:    .switch {      position: relative;      margin: 20px auto;      height: 26px;      width: 120px;      background: rgba(0, 0, 0, 0.25);      border-radius: 3px;      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 25

Excel 日历控件的使用

http://www.excelpx.com/thread-255298-1-1.html Private Sub Calendar1_Click() With Calendar1 ActiveCell = .Value '赋值给激活单元格 .Visible = False '隐藏日历控件 End WithEnd Sub'Private Sub Worksheet_SelectionChange(ByVal Target As Range) With Calendar1 If Target.Co

Android自定义组件之日历控件-精美日历实现(内容、样式可扩展)

需求 我们知道,Android系统本身有自带的日历控件,网络上也有很多开源的日历控件资源,但是这些日历控件往往样式较单一,API较多,不易于在实际项目中扩展并实现出符合具体样式风格的,内容可定制的效果.本文通过自定义日历控件,实现了在内容和样式上可高度扩展的精美日历demo,有需要的Android应用开发人员可迅速移植并按需扩展实现. 在某个应用中,需要查询用户的历史考勤记录,根据实际考勤数据在日历中标记出不同的状态(如正常出勤.请假.迟到等),并在页面中显示相应的说明文字. 效果 实现的效果如

开源日历控件DatePicker源码解析

在一些项目开发中,会使用日历去标识事务,所以根据美工出的效果图,我们可以采用不同的方法去实现.比如通过GridView扣扣你敢.自定义View实现日历控件,这些都是我们解决问题的手段,我也实现过一个自定义日历控件(Android自定义控件之日历控件55993)),由于我只是粗糙的进行实现,并没有进行过多的在控件的可扩展性上进行打磨设计,所以在本篇文章中,我秉着学习的态度分析下爱哥的鼎力巨作DatePicker-DatePicker. DatePicker开源项目地址:[https://githu

ckeditor添加日历控件

这里日历控件用的是开源的My97DatePicker,先看下效果图: 1.点击左侧自定义的日历控件按钮,弹出日历控件对话框. 2.点击确定,日历控件添加的表单设计器中,同时保留日历的控件样式 3.点击ckeditor的预览控件,查看是否可以进行日历的选择. 下面就说一下实现,关于如何在ckeditor中添加自定义控件,可参考<ckeditor_4.4.5 自定义工具栏>一文. 首先将My97DatePicker的js文件添加到插件目录下: plugin.js的代码如下: CKEDITOR.pl

javascript日历控件——纯javascript版

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

【无私分享】干货!!!一个炫酷的自定义日历控件,摆脱日历时间选择烦恼,纯福利~

最近公司项目中有一个按日期查看信息的功能,楼主本想用之前用的wheelView将就使用的,不过产品经理有个新要求,就是点击按钮弹出的日期选择对话框必须显示农历节假日,周几什么的.这可就难为人了,倘若使用之前的滚动时间选择器,无疑是难以实现的,楼主辗转反侧,冥思苦想,却不得正果. 好吧,去网上下了几个OA系统一用就有了idea,突然想到手机自带的日历~~,oh,year,日历就有这功能,瞧瞧,我靠,这个东西,咋做. 仔细一瞧,似乎用GridView可以实现,额,二话不说就开干.折腾了半天都没弄好,

日历控件源码

前两天需要个简单的日历控件,网上搜了一下居然还有人卖,估计是提供其他维护服务吧,反正我是用不到的,自己手写了个凑合用,自己写的兼容性没测过,如果有什么问题大家给点改进意见. 先上图 源码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text