转贴 jQuery Datepicker by Example
转自：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.
Always Visible Datepicker Calendar
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.<linkrel="stylesheet"href="ui.all.css"type="text/css"media="screen"/>
04.
05.</head>
06.<body>
07.<form>
08.<inputid="date"type="textbox"/>
09.<divid="calendar"/>
10.</form>
11.
12.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
13.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
14.<scripttype="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.
JQuery also includes powerful ajax features for enriching the experience of a web application.
jQuery datepicker opens on a button click
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.<linkrel="stylesheet"href="ui.all.css"type="text/css"media="screen"/>
04.
05.</head>
06.<body>
07.<form>
08.<inputid="date"type="textbox"/>
09.</form>
10.
11.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
12.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
13.<scripttype="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.
jQuery datepicker opens on an image click
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.<linkrel="stylesheet"href="ui.all.css"type="text/css"media="screen"/>
04.
05.</head>
06.<body>
07.<form>
08.<inputid="date"type="textbox"/>
09.</form>
10.
11.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
12.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
13.<scripttype="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>
jQuery datepicker selecting a date range
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.<linkrel="stylesheet"href="ui.all.css"type="text/css"media="screen"/>
04.
05.</head>
06.<body>
07.<form>
08.<inputid="Range"type="textbox"value="09-04-06"/>
09.<divid="fromCalendar"></div>
10.</form>
11.
12.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
13.<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
14.<scripttype="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.