转贴 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.
View the Example
and here is the code:
view sourceprint?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.?12.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 13.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>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.
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.
View the Example
and here is the code:
view sourceprint?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.?11.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 12.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>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.
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.
View the Example
and here is the code:
view sourceprint?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.?11.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 12.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>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>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.
View the Example
and here is the code:
view sourceprint?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.?12.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 13.????<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>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.
?轉載于:https://www.cnblogs.com/aspxphpjsprb/archive/2010/05/05/1727625.html
總結
以上是生活随笔為你收集整理的转贴 jQuery Datepicker by Example的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]RFC 2866 RADIUS A
- 下一篇： 按字节截取字符串