原文链接;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. java第四课：数组

    1.数组声明时,必须有中括号,但不指定数组的元素个数2.初始化时,必须指定元素个数3.数组元素内容仅能用于声明时初始化,不能用于赋值.如:char[] week; week={'1','2','3'} ...

  2. .substr()在字符串每个字母前面加上一个1

    var str = "abcdefghijklmnopq", name = "1", ary = []; for(var i = 0,len = str.len ...

  3. Jetty实践-Hello World

    该程序摘自官网教程: 1.首先去Jetty官网,下载jetty-distribution-9.2.6.v20141205.zip,Jetty Jar包,解压到任意目录: 2.使用Eclipse新建一个 ...

  4. Apache Flume 简介

    转自:http://blog.163.com/guaiguai_family/blog/static/20078414520138100562883/ Flume 是 Cloudera 公司开源出来的 ...

  5. 华为荣耀6PLUS 秒杀苹果

    华为荣耀6PLUS 秒杀苹果. [ az09 ] 于:2015-02-21 12:36:47 复:4036020 刚入手华为荣耀6PLUS,双4G版,在温哥华使用,效果很好. 首先很漂亮,感觉去掉HO ...

  6. Android 动态Tab分页效果

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4 个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在 ...

  7. DSP6455 DSP/BIOS中断配置问题（是否需要ECM-事件组合以及实例）

    2013-06-20 21:08:48 中断的配置有两种常用的方式: 一是通过CSL提供的API进行配置,这种方法相对DSP/BIOS偏底层,也比较麻烦:这种方法要求对中断系统的工作方式很清楚. 二是 ...

  8. CCS使用TIPS

    2013-06-20 09:37:49 CCS使用TIPS: 代码编写: CCS中通过Using CodeSense方便写代码,跟VC助手类似,具体使用方法在ccs的help中搜索using visu ...

  9. Uploadify参数详解

    属性 $('#file_upload').uploadify({    //一属性详解       id: jQuery(this).attr('id'),//绑定的input的ID       la ...

  10. 【HDOJ】4341 Gold miner

    分组01背包.在一条直线上的点归为一组. /* 4341 */ #include <iostream> #include <sstream> #include <stri ...