不说多的，直接看代码
<!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. 有100个节点的AVL树最大深度是多少?

    首先说AVL树的概念 1 左右子树的深度差<=1 2 左右子树都是AVL树. 其实这样算,可以倒推的. 空树  DEPTH = 0; AVL_DEPTH = 2^0+2^1+......+2^k ...

  2. 设置Android studio黑色主题

    设置: 如上图,点击[Theme]下拉选项,选中[Darcula]主题,点击[Apply]应用修改,弹出重启Android Studio生效修改.如图:

  3. 该应用的登录功能版本较旧，无法使用QQ账号登录，请升级到最新版本，如果还无法解决，请联系开发者升级。（错误码：100044）

    该原因应该是你的应用数据签名更改的原因 解决步骤已经写到我的公众号,二维码在下面. 欢迎观看我的CSDN学院课程,地址:http://edu.csdn.net/course/detail/2877 本 ...

  4. Python 面向对象（初级篇） （转）

    概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发"更快更好更强..." 面 ...

  5. 【Jenkins】jenkins简单搭建并执行任务

    part 1  jenkins用户名的配置(gerrit 2.11) #安装jenkins $ sudo apt-get install jenkins #为jenkins用户设定密码 $ sudo ...

  6. MQTT服务器搭建-mosquitto1.4.4安装指南

    Mosquitto mosquitto是一款实现了 MQTT v3.1 协议的开源的消息代理服务软件. 其提供了非常轻量级的消息数据传输协议,采用发布/订阅模式进行工作,可用于物联设备.中间件.APP ...

  7. JQuery AJAX 解析获得的JSON数据

    下面的解析的Json是一个二级循环. <!DOCTYPE html> <html> <head> <script src="https://code ...

  8. Activity和Service是否是在同一个进程中运行。

    一般情况下,Activity和Service在同一个包名内,并且没有设定属性android:process=":remote",两者在同一个进程中. 因为一个进程只有一个UI线程, ...

  9. CentOS 6.8下安装MySQL 5.6.33

    此处操作,包含MySQL的客户端及服务端. MySQL下载地址: http://dev.mysql.com/downloads/mysql/5.6.html MySQL--.linux_glibc2. ...

  10. js获取当前时间&js 页面时钟

    js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...