原文链接;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. 5.0:Spring-bean的加载

    内容来自<Spring深度解析>,之后的不一一复述! 在Spring中,最基本的IOC容器接口是BeanFactory - 这个接口为具体的IOC容器的实现作了最基本的功能规定 - 不管怎 ...

  2. jquery捕捉文本域输入事件

    <input type='text' /> change事件是在文本域光标失去焦点时才会触发,要监听正在输入内容事件用键盘事件监听如果想要捕捉文本域输入事件,可以使用$("inp ...

  3. hdu 4195

    我本来的想法求这个三角形的外心~~ 可以得到三条边对应圆心角   则这个正多边形的一条边对应的圆心角 应可以整除这三个角 但是一开始 没想到暴力枚举边数n,  还用模板求圆心坐标  然后求圆心角   ...

  4. 一分钟明白 VS manifest 原理

    什么是vs 程序的manifest文件 manifest 是VS程序用来标明所依赖的side-by-side组建,如ATL, CRT等的清单. 为什么要有manifest文件 一台pc上,用一组建往往 ...

  5. Android学习 RadioButton

    http://blog.csdn.net/cuiran/article/details/45065477 https://www.baidu.com/s?wd=BadgeView%20RadioBut ...

  6. linux top动态查看进程信息

    来源<鸟哥的linux私房菜> top:动态观察程序的变化 [root@linux ~]# top [-d] | top [-bnp] 参数: -d :后面可以接秒数,就是整个程序画面更新 ...

  7. Maven打包时囊括本地依赖的jar包

    在开发中,偶尔会遇到一个问题:某些比较冷门的包,maven服务器上没有,而我们又必须用,通常情况下会在项目中建立一个lib文件夹.将这些包copy进去并加入buildpath,开发就可以继续了,如下图 ...

  8. http://www.cnblogs.com/doit8791/p/4093808.html

    http://www.cnblogs.com/doit8791/p/4093808.html

  9. POJ3026——Borg Maze(BFS+最小生成树)

    Borg Maze DescriptionThe Borg is an immensely powerful race of enhanced humanoids from the delta qua ...

  10. Android的Handler几种常见的传值方式

    public class handlerThread2 extends Activity { @Override protected void onCreate(Bundle savedInstanc ...