jQuery-ui datepicker的使用演示代码
浏览数：82 /
时间：2015年06月09日
这两天使用jquery做一个web端展示的工具，遇到了不少问题也学到了不少知识。其中有一个就是在页面中显示日期选择器的功能，通过百度直接使用的是jquery datepicker 看到一篇使用说明很不错就直接把源码挡过来了，哈哈。给自己mark下加深记忆
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>演示：日期选择器：jquery datepicker的使用</title> 5 <meta name="keywords" content="datepicker, jquery插件" /> 6 <meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" /> 7 <link rel="stylesheet" type="text/css" href="../css/main.css" /> 8 <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 9 <style type="text/css"> 10 .demo{width:500px; margin:20px auto} 11 .demo h4{height:32px; line-height:32px; font-size:14px} 12 .demo h4 span{font-weight:500; font-size:12px} 13 .demo p{line-height:28px;} 14 input{width:108px; height:20px; line-height:20px; padding:2px; border:1px solid #d3d3d3} 15 </style> 16 <script type="text/javascript" src="../js/my.js"></script> 17 <script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 18 <script type="text/javascript"> 19 $(function(){ 20 $("#date_1").datepicker(); 21 $("#date_2").datepicker({ 22 //navigationAsDateFormat: true, 23 dateFormat: ‘yy年mm月dd日‘ 24 }); 25 $("#date_3").datepicker({ 26 minDate: -30, 27 maxDate: 0 28 }); 29 $("#date_4").datepicker({ 30 altField: "#alternate", 31 altFormat: "yy年MMd日,DD" 32 }); 33 $("#datepicker").datepicker({ 34 showOtherMonths: true, 35 selectOtherMonths: false 36 }); 37 $("#date_6").datepicker({ 38 showWeek: true 39 }); 40 $("#date_7").datepicker({ 41 numberOfMonths: 3, 42 showButtonPanel: true 43 }); 44 $("#date_8").datepicker({ 45 showOn: "button", 46 buttonImage: "images/calendar.gif", 47 buttonImageOnly: true 48 }); 49 $("#date_9").datepicker({ 50 onSelect: function(dateText,inst){ 51 alert("您选择的日期是："+dateText) 52 } 53 }); 54 }); 55 </script> 56 </head> 57 58 <body> 59 <div id="header"> 60 <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div> 61 <div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div> 62 </div> 63 <div id="main"> 64 <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-168.html">日期选择器：jquery datepicker的使用</a></h2> 65 <div class="demo"> 66 <h4>1、默认格式：<span>yy-mm-dd</span></h4> 67 <p>日期：<input type="text" id="date_1" readonly /></p> 68 </div> 69 <div class="demo" id="s2"> 70 <h4>2、格式化日期：<span>yy年mm月dd日</span></h4> 71 <p>日期：<input type="text" id="date_2" readonly /></p> 72 </div> 73 <div class="demo" id="s3"> 74 <h4>3、设置日期可选范围：<span>当前日期前30天</span></h4> 75 <p>日期：<input type="text" id="date_3" readonly /></p> 76 </div> 77 <div class="demo" id="s4"> 78 <h4>4、关联同步不同的日期格式：</h4> 79 <p>日期：<input type="text" id="date_4" readonly /> <input type="text" id="alternate" style="width:150px" /></p> 80 </div> 81 <div class="demo"> 82 <h4>5、直接显示日历：</h4> 83 <div id="datepicker"></div> 84 </div> 85 <div class="demo"> 86 <h4>6、显示日期所在一年中的周数：</h4> 87 <p>日期：<input type="text" id="date_6" readonly /></p> 88 </div> 89 <div class="demo" id="s7"> 90 <h4>7、显示连续的3个月的日历：</h4> 91 <p>日期：<input type="text" id="date_7" readonly /></p> 92 </div> 93 <div class="demo" id="s8"> 94 <h4>8、通过点击图标触发显示日历：</h4> 95 <p>日期：<input type="text" id="date_8" readonly style="height:16px" /></p> 96 </div> 97 <div class="demo" id="s9"> 98 <h4>9、选中日期后触发事件：</h4> 99 <p>日期：<input type="text" id="date_9" readonly /></p> 100 </div> 101 <div class="ad_demo"><script src="/js/ad_js/ad_demo.js" type="text/javascript"></script></div> 102 <br/> 103 </div> 104 <div id="footer"> 105 <p>Powered by helloweba.com 允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p> 106 </div> 107 <p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p> 108 </body> 109 </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
