程序员人生 网站导航

使用jqueryUI来制作一个日期选择器

栏目:互联网时间:2014-09-15 00:03:56

公司的项目要用到时间选择器的一个插件,百度了很久,没有找到合适的,自己就看了下jqueryUI,自己整合了一个比较好的日期选择器,以便后面遇到同样的问题能够解决。

下面就贴出部分使用的代码,比较简单,但是很实用!!!

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 日期选择器(Datepicker) - 默认功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <!-引入jqueryUI的相关文件--> <style> #draggable { width: 150px; height: 150px; padding: 0.5px; border: 1px solid #F00 } </style> <script> $(function() { $("#datepicker").datepicker({ showOtherMonths: true, selectOtherMonths: true, showButtonPanel: true, /*显示今天的日期的显示,以及关闭时间选择器*/ changeMonth: true, /*显示选择其他月份*/ changeYear: true, /*显示选择其他年份*/ dateFormat: "yy - mm - dd" /*设置日期的显示格式*/ , showWeek: true,/*显示一年中的第几周*/ firstDay: 1 }) }); </script> </head> <body> <p>日期: <input type="text" id="datepicker"> </p> </body> </html>


关于JqueryUI的datepicker选择器的其他部分属性可以通过下面的链接查看:

jQuery UI API - 日期选择器部件


------分隔线----------------------------
------分隔线----------------------------

最新技术推荐