夏日博客

A-A+

jQueryui datepicker时间控件在动态创建表单中的使用

2016年01月13日 前端设计 暂无评论 阅读 8 views 次

datepicker是一个不错的日期插件了，我们今天一起来看看jQueryui datepicker时间控件在动态创建表单中的使用吧，希望文章能够对各位有帮助．

例子:

  1. <script>  
  2. //页面初始化  
  3.    
  4. $(document).ready(function() {  
  5.      //固定表单  
  6.      $('#contract_date').datepicker();  
  7.      //动态表单  
  8.      $('.datepicker').live('click', function() {  
  9.         $(this).datepicker({showOn:'focus'}).focus();  
  10.     });  
  11. });  
  12. </script>  

默认功能:

日期选择器（Datepicker）绑定到一个标准的表单 input 字段上,把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历,选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭,如果选择了一个日期,则反馈显示为 input 的值.

  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">  
  7.   <script src="//code.jquery.com/jquery-1.9.1.js"></script>  
  8.   <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.   <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">  
  10.   <script>  
  11.   $(function() {  
  12.     $( "#datepicker" ).datepicker();  
  13.   });  
  14.   </script>  
  15. </head>  
  16. <body>  
  17.    
  18. <p>日期：<input type="text" id="datepicker"></p>  
  19.   
  20. </body>  
  21. </html>  
标签：

给我留言