不说多的，直接看代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="gbk">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <!--Includes-->

    <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />

    <script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

  $(function(){

    var opt = {

        preset: 'date', //日期

        theme: 'sense-ui', //皮肤样式

        display: 'modal', //显示方式

        mode: 'scroller', //日期选择模式

        dateFormat: 'yy-mm-dd', // 日期格式

        setText: '确定', //确认按钮名称

        cancelText: '取消',//取消按钮名籍我

        dateOrder: 'yymmdd', //面板中日期排列格式

        dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字

        endYear:2020 //结束年份

    };

    $("#scroller").mobiscroll(opt).date(opt);

    //之前给群里共享发错了。记得之前写过一个，估计丢了。现在重写一个。并完善一下，下面注释部分是上面的参数可以替换改变它的样式

    //希望一起研究插件的朋友加我个人QQ也可以，本人也建个群 291464597 欢迎进群交流。哈哈。这个不能算广告。

    // 直接写参数方法

    //$("#scroller").mobiscroll(opt).date();

    // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });

    //具体参数定义如下

    //{

    //preset: 'date', //日期类型--datatime,

    //theme: 'ios', //皮肤其他参数【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】

                                //【wp light】【wp】

    //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】

    //display: 'bubble', //显示方【modal】【inline】【bubble】【top】【bottom】

    //dateFormat: 'yyyy-mm-dd', // 日期格式

    //setText: '确定', //确认按钮名称

    //cancelText: '清空',//取消按钮名籍我

    //dateOrder: 'yymmdd', //面板中日期排列格

    //dayText: '日',

    //monthText: '月',

    //yearText: '年', //面板中年月日文字

    //startYear: (new Date()).getFullYear(), //开始年份

    //endYear: (new Date()).getFullYear() + 9, //结束年份

    //showNow: true,

    //nowText: "明天",  //

    //showOnFocus: false,

    //height: 45,

    //width: 90,

    //rows: 3}

});

    </script>

</head>

<body>

<input id="scroller" name="scroller" />   

亲们，觉得日期界面不漂亮，看代码。我都写上每个参数的具体注释了。再看不懂，我也没办法了。

</body>

</html>

插件文档参考地址：https://docs.mobiscroll.com/2-5-2/calendar#opt-marked

附上代码:
mobiscroll-2.5.2-IncreasedChineseSupport.zip
PluginDatetime.zip

jquery移动端日期插件的更多相关文章

  1. jquery ui bootstrap日期插件

    http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepic ...

  2. jquery mobile mobiscroll 日期插件使 用mobiscroll

    官网网站: http://www.mobiscroll.com/ http://code.google.com/p/mobiscroll/ 1.精简版Demo: 查看Demo » 下载Demo » 2 ...

  3. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  4. Bootstrap日期插件中文实现

    Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1 ...

  5. 基于zepto的移动端轻量级日期插件

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的 ...

  6. jquery mobiscroll移动端日期选择控件(无乱码)

    jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...

  7. 基于zepto的移动端日期+时间选择插件

    前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各 ...

  8. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  9. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

随机推荐

  1. 20160621-BAPI 更改外向DN&更改拣配

    参考代码转自:http://blog.sina.com.cn/s/blog_4c66402b01012lgr.html 感谢. 测试一把,再做总结. 1.更改外向交货单: 2.更改内向交货单. htt ...

  2. jquery dataTables.min.js API

    demo: http://datatables.net/release-datatables/examples/api/select_single_row.html 选择一行http://datata ...

  3. yii去除index.php的入口脚本显示为seo友好的url

    1.去除入口脚本需要在重写url,如果你的webserver软件时Apache的话,必须配置httpd.conf,搜索“LoadModule rewrite_module modules/mod_re ...

  4. Objective－c——UI基础开发第十一天（UICollectionView）

    一.知识点 1.UICollectionView的dataSource .delegate 2.UICollectionView多组数据和单组数据的展示 3.UICollectionView.UICo ...

  5. JavaWeb用Jdbc操作MySql数据库(一)

    一.添加开发包.在JavaWeb中用jdbc操作数据库,使用方法与java一样,但是在处理开发包的问题上有点差别.JavaWeb不能将mysql-connector-java-5.1.7-bin.ja ...

  6. [原创]cocos2d-x研习录-第二阶 基本框架

    了解完Cocos2D-x的基本概念和概念类之后,是不是有一种蠢蠢欲动的冲动,想要探究Cocos2D-x是如何完成这一切的.接着我将通过对Cocos2D-x自代的HelloCpp项目进行分析,初步了解C ...

  7. JSBinding+SharpKit / 菜单介绍

  8. Winform中调用js函数

    var wb = new WebBrowser(); wb.AllowNavigation = true; wb.ScriptErrorsSuppressed = false; wb.Navigate ...

  9. Unity Shader——Writing Surface Shaders(2)——Custom Lighting models in Surface Shaders

    Surface Shader中的自定义光照模型 当你在编写 Surface Shaders 时,是在描述一个表面的属性(反射颜色.法线……),而且光的交互过程是由一个光照模型来计算的.内建的光照模型有 ...

  10. mui适用场景说明，能不能在普通浏览器里使用，能否用于wap网站

    mui适用场景说明 为解决HTML5在低端Android机上的性能缺陷,mui引入了原生加速,其中最关键的就是webview控件,因此mui若要发挥其全部能力,需和5+ App配合适用,若脱离5+ A ...