不说多的，直接看代码
<!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. php开发工具。。

    看了好多决定用phpstorm. hahaha PHP还是挺好玩的 但是貌似犯蠢一下,MAC自带有php环境: 我还下了一个XAMPP,不过无所谓啦. 都可以用

  2. C++ Primer : : 第十四章 : 重载运算符与类型转换之类型转换运算符和重载匹配

    类型转换运算符 class SmallInt { public: SmallInt(int i = 0) : val(i) { if (i < 0 || i > 255) throw st ...

  3. Codeforces Round #158 (Div. 2)

    A. Adding Digits 枚举. B. Ancient Prophesy 字符串处理. C. Balls and Boxes 枚举起始位置\(i\),显然\(a_i \le a_j, 1 \l ...

  4. （转）Let’s make a DQN 系列

    Let's make a DQN 系列 Let's make a DQN: Theory September 27, 2016DQN This article is part of series Le ...

  5. windows端加密程序，lua代码，ZeroBrane调试

    发一个自己改的zerobrane版本(启动中文,快捷键改成和一样:F5启动调试,F9断点,F10逐过程,F11逐语句,F12跳出函数) 在zerobrane 1.0(2015.3.13)发布的基础上改 ...

  6. 在CentOS_RHEL 6上安装Metasploit的框架

    https://github.com/rapid7/metasploit-framework/wiki/Nightly-Installers 1. shyum update curl https:// ...

  7. UML的类图、时序图表示方法以及惯例

    <UML类图图示样例>说明:http://wenku.baidu.com/link?url=DEaRFyVIAH4kZ7TolplfFhFhmAk3gFaNSOH7XPzfTnCWY4CB ...

  8. linux shell:mysql bin_log定期清理脚本

    需求: 1.自动处理mysql bin日志脚本 2.输出可读log 3.保留1周的日志 4.对所有数据库统一处理.   实现过程描述:   思路:两种方式实现 1.mysql目录通过ls获取bin日志 ...

  9. OpenStack nova VM migration (live and cold) call flow

    OpenStack nova compute supports two flavors of Virtual Machine (VM) migration: Cold migration -- mig ...

  10. Swagger使用总结

    Swagger使用总结 1. Swagger是什么? 官方说法:Swagger是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作 ...