转自：http://hackingon.net/post/jQuery-Datepicker-by-Example.aspx
I have been working almost exclusively with Asp.Net MVC for the last twelve months. Working with MVC has encouraged me to move more towards client side, javascript based controls, like the jQuery datepicker. The jQuery datepicker is part of the jQuery UI library. The jQuery UI library is a collection of widgets, effects, interactions and theming support.
This post will cover, by example, some of the basic datepicker usages. Once you have these covered the jQuery datepicker is a flexible, powerful component. If you download the full source, included at the end of this post, you will see that the examples are formatted with a css file (ui.all.css) and some images. This look and feel was generated using the online jquery themeroller tool.
This example has a datepicker always visible and available for selecting a date.
and here is the code:
01.<html>
02.<head><title>jQuery Open Calendar</title>
03.<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
04.
05.</head>
06.<body>
07.<form>
08. <input id="date" type="textbox"/>
09. <div id="calendar"/>
10.</form>
11.
14. <script type="text/javascript">
15. $(document).ready(function(){
16. $("div#calendar").datepicker({ altField: 'input#date', altFormat: 'yy-mm-dd' });
17. });
18. </script>
19.
20.</body>
21.</html>
Notice that I am loading the required jQuery javascript files from google. This has some minor performance advantages but you could just as easily keep the files locally. The datepicker is initialized using the jQuery ready function, which runs when the page has loaded. The datepicker is built on an empty div and in this example it simply updates a textbox with the selected date. If you don't want to see the textbox you can use a hidden input element instead.
In this example the datepicker is invisible until a form button is clicked. The datepicker disappears again once a date is selected.
and here is the code:
01.<html>
02.<head><title>jQuery Open on button</title>
03.<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
04.
05.</head>
06.<body>
07.<form>
08. <input id="date" type="textbox"/>
09.</form>
10.
13. <script type="text/javascript">
14. $(document).ready(function(){
15. $("#date").datepicker({ showOn: 'button', buttonText: "select" });
16. });
17. </script>
18.
19.</body>
20.</html>
For this example the empty div is not required. The datepicker is constructed on the textbox. Again, a hidden input also works.
This time the datepicker is triggered by clicking on an image. Other than that it is almost identical to the previous example.
and here is the code:
01.<html>
02.<head><title>jQuery Open on image button</title>
03.<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
04.
05.</head>
06.<body>
07.<form>
08. <input id="date" type="textbox"/>
09.</form>
10.
13. <script type="text/javascript">
14. $(document).ready(function(){
15. $("#date").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/icon_cal.png' });
16. });
17. </script>
18.</body>
19.</html>
It is common to allow the user to select a range of dates. This last example supports range selection by allowing the user to click once to select the start of the range, and once more to select the end of the range.
and here is the code:
01.<html>
02.<head><title>jQuery date range selector</title>
03.<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />
04.
05.</head>
06.<body>
07.<form>
08. <input id="Range" type="textbox" value="09-04-06"/>
09. <div id="fromCalendar"></div>
10.</form>
11.
14. <script type="text/javascript">
15. $(document).ready(function(){
16. $("#fromCalendar").datepicker({ altField: "#Range", altFormat: 'yy-mm-dd', rangeSelect: true });
17. });
18. </script>
19.</body>
20.</html>
The caveat with this last example is that you will need some sort of post-processing step to separate the start and finish dates of the range. Typically the date will arrive on the server in a format such as "2009-04-10 - 2009-05-27".
To run these examples locally, with the full look and feel, you can download a zip containing everything.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。