原文链接;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. Maven 解决JAR包冲突

    在JAR 冲突的情况下, 利用Eclipse方式解决JAR包冲突时比较方便简洁的,步骤如下 1. 在Eclipse 中打开pom.xml , 选择  “Dependency  Hierarchy” 2 ...

  2. 【分块】bzoj3343: 教主的魔法

    3343: 教主的魔法 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 631  Solved: 272[Submit][Status][Discuss ...

  3. 团体程序设计天梯赛-练习集L1-024. 后天

    L1-024. 后天 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 如果今天是星期三,后天就是星期五:如果今天是星期六,后天就 ...

  4. CSRF防范策略研究

    目录 0x1:检查网页的来源 0x2:检查内置的隐藏变量 0x3:用POST不用GET 检查网页的来源应该怎么做呢?首先我们应该检查$_SERVER[“HTTP_REFERER”]的值与来源网页的网址 ...

  5. UnitOfWork机制的实现和注意事项

    UnitOfWork机制 /*一点牢骚: * UnitOfWork机制的蛋疼之处: *    UnitOfWork机制,决定了插入新的实体前,要预先设置数据库中的主键Id,尽管数据库自己生产主键. * ...

  6. Grok debugger

    http://www.cnblogs.com/vovlie/p/4227027.html http://it.taocms.org/10/5802.htm

  7. 扩展DJANGO的LISTVIEW

    不用MODEL,不用QUERYSET,而用get_queryset方法来扩展LISTVIEW, 从而实现特定过滤或搜索功能. class DVListView(ListView): template_ ...

  8. HDU4704+费马小定理

    费马小定理题意:求s1+s2+s3+...+sn;si表示n划分i个数的n的划分的个数,如n=4,则s1=1,s2=3    利用隔板定理可知,就是求(2^n-1)%mod-----Y    现在已知 ...

  9. [原]捉虫记3：_ConectionPtr指针调用open失败

    背景 产品使用MySQL来存储报警服务产生的报警.在报警服务的组件中使用ADO接口 客户方有两台计算机,一台计算机A用来组态,且可以对设备进行调试,操作系统是Win7 64bit 专业版,安装了VS2 ...

  10. allegro飞线隐藏

    这些都是最基本的操作,你说的应该是飞线的显示和隐藏,命令在display下面,display>show rats>net(component/all) display>blank r ...