jQuery-ui datepicker的使用演示代码

这两天使用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 /> &nbsp; <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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。