原文链接;http://www.ido321.com/375.html

Jquery UI是一个非常丰富的Jquery插件，并且UI的各部分插件可以独自分离出来使用，这是其他很多Jquery插件没有的优势。最近对UI中的datepicker插件学习了一下，这款日期选择/日历显示插件很好用。废话不多说，先来张图，看看效果：

使用很简单，上代码：

   1: <!DOCTYPE>

   2: <html>

   3: <head>

   4: <title>日历控件</title>

   5: <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

   6: <script src="js/calendar.js"></script>

   7: <link rel="stylesheet" href="css/calendar.css" />

   8: <meta charset="utf-8"/>

   9: </head>

  10: <body>

  11:    <div id="datepicker">

  12:             

  13:    </div> 

  14:    <script type="text/javascript">

  15:        $( "#datepicker" ).datepicker();

  16:    </script>

  17: </body>

  18: </html>

也可以再文本框获取焦点时显示,稍作修改:

   1: <!--文本框获取焦点显示日历需要导入的js文件 -->

   2: <script src="js/custom.min.js"></script>

把div部分修改如下：

   1: 日期选择：<input type='text' id='datepicker'/>

其他不变，刷新浏览器，效果如图
这种显然不太符合我们的习惯，需要修改js，让其符合我们的使用习惯
   1: <script type="text/javascript">

   2:         $( "#datepicker" ).datepicker(

   3:             {

   4:                showMonthAfterYear:true, //年在前，月在后

   5:                 yearSuffix:"年",         //添加后缀年

   6:                 prevText:"上一月",       //鼠标放在翻月按钮上显示的文字

   7:                 nextText:"下一月",

   8:                 monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],      //以中文显示月份

   9:                 //以中文显示每周（必须按此顺序，否则日期出错）

  10:                 dayNamesMin:["日","一","二","三","四","五","六",], 

  11:                 //在文本框中显示日期的格式 

  12:                 dateFormat:"yy-mm-dd",

  13:                });

  14:     </script>

修改后的效果
 
对于文本框，默认是获取焦点时显示日期，也可以在后面添加一个按钮

   1: showOn:"button",     //在文本框后添加选择按钮

可以为按钮添加一张图片或者修改文本，来美化按钮

   1: buttonText:"日期",    //设置选择按钮的文

   2: buttonImage:"css/images/animated-overlay.gif",  //为按钮设置图片

如果只想显示图片，可以添加下列代码

   1: //布尔值，是否将图片显示为按钮形式，FALSE显示按钮形式，TRUE单独显示图片，默认是FALSE

   2:  buttonImageOnly:true,

还可以自由选择月份和年份

   1: changeYear:true,  //布尔值，是否可以选择年份

   2: changeMonth:true, //布尔值，是否可以选择月份

效果

不喜欢英文？ok，咱们替换成数字

   1: //changeMonth为TRUE时，月份的缩写

   2: monthNamesShort:["01","02","03","04","05","06","07","08","09","10","11","12"],

看看效果

还可以设置选择的年份范围

   1: //在changeYear为true时，设置年份范围，c表示当前年份，加减10表示当前年份推后10年和推前10年

   2: yearRange: "c-10:c+10",

当然，还可以添加面板

   1: showButtonPanel:true,   //是否显示面板

对于不喜欢英文的孩子，可以换成中文

   1: // 设置面板上返回当前日的文字，只有showButtonPanel: true才会显示出来

   2:   currentText:"今天",

   3:  // 设置面板上关闭面板的文字，只有showButtonPanel: true才会显示出来  

   4:  closeText: "关闭",

这些也是我们经常要用到的吧,如果还需要什么功能,可以自己修改js。我已经将上述代码和从ui抽离出来的datepicker打包，可以直接应用你的项目中。如果你有需要，可以从下面给出的链接下载：

Fork Git :https://github.com/dwqs/datepicker

CSDN :http://download.csdn.net/detail/u011043843/7809973

百度云：http://pan.baidu.com/s/1bnGl07t

Jquery UI的datepicker插件使用方法的更多相关文章

  1. jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库 ...

  2. Jquery UI的datepicker插件使用

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,而且UI的各部分插件能够独自分离出来使用.这是其它非常多Jquery插件没有 ...

  3. 5-15 bootcss 之 modal 以及 jquery ui 之datepicker 小记

    最近公司在用bootstrap和Jquery UI做项目,类似与OA的东西前两天碰到点问题,记录一下.希望读者不要在遇到和我一样的问题. 1 datepicker.不知道怎么自己下载的bootcss里 ...

  4. 浅析jquery ui的datepicker组件

    今天计划在博客上添加一个日历,方便用户查看日期.Google了一圈,最终决定使用jquery ui的datepicker部件实现.原因有三:Datepicker使用配置比较简洁,几行代码就可以得到一个 ...

  5. day15—jQuery UI之widgets插件

    转行学开发,代码100天——2018-03-31 今天学习了jQuery UI的widgets插件,主要包括accordion插件 accordion插件 该插件表示折叠面板效果,点击头部展开/折叠被 ...

  6. jquery ui bootstrap日期插件

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

  7. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  8. jQuery UI的datepicker日期控件如何让他显示中文

    首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...

  9. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

随机推荐

  1. Mysql异常：MySQLNonTransientConnectionException: No operations allowed after statement closed

    Mysql异常:MySQLNonTransientConnectionException: No operations allowed after statement closed MySQLNonT ...

  2. struts2+hibernate-jpa+Spring+maven 整合(1)

    1.0.0 struts2 与 spring 的整合. 1.1.0 新建maven工程 , 编写pom.xml ,这里只需要简单的添加 一个组件就够了: 在myeclipse 生成的pom.xml 添 ...

  3. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  4. shuffle过程中的信息传递

    依据Spark1.4版 Spark中的shuffle大概是这么个过程:map端把map输出写成本地文件,reduce端去读取这些文件,然后执行reduce操作. 那么,问题来了: reducer是怎么 ...

  5. [Firefly引擎][学习笔记一][已完结]带用户验证的聊天室

    原地址:http://bbs.9miao.com/thread-44571-1-1.html 前言:早在群里看到大鸡蛋分享他们团队的Firefly引擎,但一直没有时间去仔细看看,恰好最近需要开发一个棋 ...

  6. ZOJ 3778 Talented Chef

    题目链接 题意 : 这个人需要做n道菜,每道菜Ai步,他可以同时做M道不同的菜的其中一步,问你最少需要多少时间能做完所有的菜. 思路 : 这个题比赛的时候禁锢思路了,根本没想出来,就是当M > ...

  7. Tornado，展示一下模板渲染

    按网上一步一步走一下. 感觉模板和DJANGO的差不多,但更灵活,不限制PYTHON的使用. 前端和后端,这模板使用的规则在哪里呢? import os.path import tornado.htt ...

  8. 探讨read的返回值的三种情况

    http://blog.chinaunix.net/uid-23629988-id-3035613.html 今天探讨一个很看似简单的API “read”的返回值问题.read的返回值有哪几个值?每个 ...

  9. [Unity菜鸟] 协程Coroutine

    1.协程,即协作式程序,其思想是,一系列互相依赖的协程间依次使用CPU,每次只有一个协程工作,而其他协程处于休眠状态. unity中StartCoroutine()就是协程,协程实际上是在一个线程中, ...

  10. vimrc for windows

    set nobackupsource $VIMRUNTIME/vimrc_example.vimsource $VIMRUNTIME/mswin.vimbehave mswin:color deser ...