http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FUI_Datepicker
JavaScript Tutorial/jQuery/UI Datepicker - История изменений
2026-04-05T02:23:11Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Datepicker&diff=9753&oldid=prev
Admin: 1 версия
2010-05-26T08:25:23Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/UI_Datepicker&diff=9752&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:57Z
<p></p>
<p><b>Новая страница</b></p><div>==30. Add image to date picker trigger button==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var pickerOpts = {<br />
showOn: "button",<br />
buttonImage: "cal.png",<br />
buttonImageOnly: true<br />
};<br />
<br />
$("#date").datepicker(pickerOpts); <br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="row"><label>Enter a date: </label><input id="date"></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Create a date picker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#date").datepicker();<br />
});<br />
</script><br />
</head><br />
<body><br />
<label>Enter a date: </label><input id="date"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. dateFormat:"d MM yy"==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var pickerOpts = {<br />
dateFormat:"d MM yy"<br />
};<br />
<br />
$("#date").datepicker(pickerOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<label>Enter a date: </label><input id="date"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Display a dialog to hold the date picker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#invoke").click(function() { <br />
$("#date").datepicker("dialog", "", updateDate); <br />
function updateDate(date) {<br />
$("#date").val(date);<br />
}<br />
}); <br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="row"><label>Enter a date: </label><br />
<input id="date"><a id="invoke" title="" href="#">Click to open Date Picker Dialog</a></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Display two months==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var pickerOpts = {<br />
numberOfMonths: 2,<br />
stepMonths: 2,<br />
changeMonth: false,<br />
changeYear: false<br />
};<br />
<br />
$("#date").datepicker(pickerOpts); <br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="row"><label>Enter a date: </label><input id="date"></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. firstDay: 1==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpDate").datepicker({<br />
firstDay: 1<br />
});<br />
}<br />
);<br />
</script><br />
</head><br />
<body><br />
<div><br />
<label for="tmpDate">Date:</label><br />
<input type="text" id="tmpDate" size="25" value="" /><br />
</div> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Internationalize date picker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var frenchOpts = {<br />
clearText: "vide",<br />
closeText: "Fin",<br />
currentText: "Courant",<br />
dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],<br />
firstDay: 1,<br />
monthNames: [ "Janvier", "F&eacute;vrier", "Marche", "Avril", "Pouvez", "Juin", "Juillet", "Ao&ucirc;t", "Septembre", "Octobre", "Novembre", "D&eacute;cembre" ],<br />
nextText: "Apr&egrave;s",<br />
prevText: "Pr&eacute;c"<br />
};<br />
<br />
$("#date").datepicker(frenchOpts); <br />
});<br />
</script><br />
</head><br />
<body><br />
<label>Enter a date: </label><input id="date"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Display button bar==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Display button bar</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({<br />
showButtonPanel: true<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker"></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Display a button for selecting Today"s date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Display inline==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Display inline</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker();<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
Date: <div id="datepicker"></div><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Display month and year menus==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Display month &amp; year menus</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({<br />
changeMonth: true,<br />
changeYear: true<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker"></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Display multiple months==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Display multiple months</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({<br />
numberOfMonths: 3,<br />
showButtonPanel: true<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker"></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Format date==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Format date</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker();<br />
$("#format").change(function() { $("#datepicker").datepicker("option", {dateFormat: $(this).val()}); });<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker" size="30"/></p><br />
<p>Format options:<br /><br />
<select id="format"><br />
<option value="mm/dd/yy">Default - mm/dd/yy</option><br />
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option><br />
<option value="d M, y">Short - d M, yy</option><br />
<option value="d MM, y">Medium - d MM, yy</option><br />
<option value="DD, d MM, yy">Full - DD, d MM, yy</option><br />
<option value=""day" d "of" MM "in the year" yy">With text - "day" d "of" MM "in the year" yy</option><br />
</select><br />
</p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Icon trigger==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Icon trigger</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker"></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Localize calendar==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Localize calendar</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ar.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-bg.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ca.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-cs.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-da.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-de.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-el.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-eo.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-es.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-fa.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-fi.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-fr.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-he.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-hr.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-hu.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-hy.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-id.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-is.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-it.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ja.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ko.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-lt.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-lv.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ms.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-nl.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-no.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-pl.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-pt-BR.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ro.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-ru.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sk.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sl.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sq.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr-SR.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-sv.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-th.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-tr.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-uk.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-CN.js"></script><br />
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-TW.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional[""]));<br />
$("#datepicker").datepicker($.datepicker.regional["fr"]);<br />
$("#locale").change(function() {<br />
$("#datepicker").datepicker("option", $.extend({showMonthAfterYear: false},<br />
$.datepicker.regional[$(this).val()]));<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<br />
<p>Date: <input type="text" id="datepicker"/>&nbsp;<br />
<select id="locale"><br />
<option value="sq">Albanian (Gjuha shqipe)</option><br />
<option value="ar">Arabic (&#8235;(&#1604;&#1593;&#1585;&#1576;&#1610;</option><br />
<option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option><br />
<option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option><br />
<option value="ca">Catalan (Catal&agrave;)</option><br />
<option value="zh-CN">Chinese Simplified (&#31616;&#20307;&#20013;&#25991;)</option><br />
<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option><br />
<option value="hr">Croatian (Hrvatski jezik)</option><br />
<option value="cs">Czech (Ce&ouml;tina)</option><br />
<option value="da">Danish (Dansk)</option><br />
<option value="nl">Dutch (Nederlands)</option><br />
<option value="eo">Esperanto</option><br />
<option value="fa">Farsi/Persian (&#8235;(&#1601;&#1575;&#1585;&#1587;&#1740;</option><br />
<option value="fi">Finnish (suomi)</option><br />
<option value="fr" selected="selected">French (Fran&ccedil;ais)</option><br />
<option value="de">German (Deutsch)</option><br />
<option value="el">Greek (&#917;&#955;&#955;&#951;&#957;&#953;&#954;&#940;)</option><br />
<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option><br />
<option value="hu">Hungarian (Magyar)</option><br />
<option value="is">Icelandic (&Otilde;slenska)</option><br />
<option value="id">Indonesian (Bahasa Indonesia)</option><br />
<option value="it">Italian (Italiano)</option><br />
<option value="ja">Japanese (&#26085;&#26412;&#35486;)</option><br />
<option value="ko">Korean (&#54620;&#44397;&#50612;)</option><br />
<option value="lv">Latvian (Latvie&ouml;u Valoda)</option><br />
<option value="lt">Lithuanian (lietuviu kalba)</option><br />
<option value="ms">Malaysian (Bahasa Malaysia)</option><br />
<option value="no">Norwegian (Norsk)</option><br />
<option value="pl">Polish (Polski)</option><br />
<option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option><br />
<option value="ro">Romanian (Rom&acirc;n&#259;)</option><br />
<option value="ru">Russian (&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;)</option><br />
<option value="sr">Serbian (&#1089;&#1088;&#1087;&#1089;&#1082;&#1080; &#1112;&#1077;&#1079;&#1080;&#1082;)</option><br />
<option value="sr-SR">Serbian (srpski jezik)</option><br />
<option value="sk">Slovak (Slovencina)</option><br />
<option value="sl">Slovenian (Slovenski Jezik)</option><br />
<option value="es">Spanish (Espa&ntilde;ol)</option><br />
<option value="sv">Swedish (Svenska)</option><br />
<option value="th">Thai (&#3616;&#3634;&#3625;&#3634;&#3652;&#3607;&#3618;)</option><br />
<option value="tr">Turkish (T&uuml;rk&ccedil;e)</option><br />
<option value="uk">Ukranian (&#1059;&#1082;&#1088;&#1072;&#1111;&#1085;&#1089;&#1100;&#1082;&#1072;)</option><br />
</select></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Populate alternate field==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
http://docs.jquery.ru/UI/Effects/Blind<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Populate alternate field</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({altField: "#alternate", altFormat: "DD, d MM, yy"});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. jQuery UI Datepicker - Restrict date range==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<!--<br />
jQuery UI Effects Blind 1.7.2<br />
<br />
Copyright (c) 2009 AUTHORS.txt (http://jqueryui.ru/about)<br />
Dual licensed under the MIT (MIT-LICENSE.txt)<br />
and GPL (GPL-LICENSE.txt) licenses.<br />
<br />
<br />
--><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<title>jQuery UI Datepicker - Restrict date range</title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#datepicker").datepicker({minDate: -20, maxDate: "+1M +10D"});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="demo"><br />
<p>Date: <input type="text" id="datepicker"></p><br />
</div><!-- End demo --><br />
<div class="demo-description"><br />
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ("+1M +10D"). For the last, use "D" for days, "W" for weeks, "M" for months, or "Y" for years.</p><br />
</div><!-- End demo-description --><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. range Select: true,==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpDate").datepicker({<br />
minDate: new Date(2008, 0, 1),<br />
rangeSelect: true,<br />
maxDate: new Date(2009, 0, 1)<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
#ui-datepicker-div {<br />
width: 300px;<br />
border: 1px solid rgb(128, 128, 128);<br />
padding: 5px;<br />
background: gray;<br />
display: none;<br />
}<br />
div.ui-datepicker-control {<br />
position: relative;<br />
height: 25px;<br />
background: forestgreen;<br />
}<br />
div.ui-datepicker-control div {<br />
padding: 5px;<br />
}<br />
div.ui-datepicker-control div a {<br />
color: #fff;<br />
}<br />
div.ui-datepicker-links {<br />
position: relative;<br />
height: 20px;<br />
padding: 5px 0 0 0;<br />
background: darkgreen;<br />
border-bottom: 1px solid green;<br />
text-align: center;<br />
}<br />
div.ui-datepicker-links div {<br />
padding: 5px;<br />
}<br />
div.ui-datepicker-links div a {<br />
color: #fff; <br />
}<br />
div.ui-datepicker-clear,<br />
div.ui-datepicker-prev {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
div.ui-datepicker-close,<br />
div.ui-datepicker-next {<br />
position: absolute;<br />
top: 0;<br />
right: 0;<br />
}<br />
div.ui-datepicker-current {<br />
display: inline;<br />
}<br />
div.ui-datepicker-header {<br />
margin-top: 5px;<br />
text-align: center;<br />
}<br />
div.ui-datepicker-header select {<br />
margin: 0 3px; <br />
}<br />
table.ui-datepicker {<br />
width: 250px;<br />
border-collapse: collapse;<br />
margin: 10px 0 0 0;<br />
}<br />
table.ui-datepicker td {<br />
padding: 3px;<br />
border: 1px solid red;<br />
}<br />
table.ui-datepicker thead td {<br />
text-align: center;<br />
font-weight: bold;<br />
background: green;<br />
color: lightgreen;<br />
}<br />
td.ui-datepicker-today {<br />
background: #dff6e4;<br />
}<br />
td.ui-datepicker-current-day {<br />
background: darkgreen;<br />
color: #fff;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<label for="tmpDate">Date:</label><br />
<input type="text" id="tmpDate" size="25" value="" /><br />
</div> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Set date format (appendText: " MM/DD/YYYY")==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var pickerOpts = {<br />
appendText: " MM/DD/YYYY",<br />
changeFirstDay: false,<br />
changeMonth: false,<br />
changeYear: false,<br />
closeAtTop: false,<br />
showOtherMonths: true,<br />
showStatus: true,<br />
showWeeks: true,<br />
duration: "fast"<br />
};<br />
$("#date").datepicker(pickerOpts);<br />
});<br />
</script><br />
</head><br />
<body><br />
<label>Enter a date: </label><input id="date"><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Set style for date picker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(<br />
function() {<br />
$("input#tmpDate").datepicker({<br />
minDate: new Date(2008, 0, 1),<br />
maxDate: new Date(2009, 0, 1)<br />
});<br />
}<br />
);<br />
</script><br />
<style type="text/css"><br />
#ui-datepicker-div {<br />
width: 300px;<br />
border: 1px solid rgb(128, 128, 128);<br />
padding: 5px;<br />
background: gray;<br />
display: none;<br />
}<br />
div.ui-datepicker-control {<br />
position: relative;<br />
height: 25px;<br />
background: forestgreen;<br />
}<br />
div.ui-datepicker-control div {<br />
padding: 5px;<br />
}<br />
div.ui-datepicker-control div a {<br />
color: #fff;<br />
}<br />
div.ui-datepicker-links {<br />
position: relative;<br />
height: 20px;<br />
padding: 5px 0 0 0;<br />
background: darkgreen;<br />
border-bottom: 1px solid green;<br />
text-align: center;<br />
}<br />
div.ui-datepicker-links div {<br />
padding: 5px;<br />
}<br />
div.ui-datepicker-links div a {<br />
color: #fff; <br />
}<br />
div.ui-datepicker-clear,<br />
div.ui-datepicker-prev {<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
}<br />
div.ui-datepicker-close,<br />
div.ui-datepicker-next {<br />
position: absolute;<br />
top: 0;<br />
right: 0;<br />
}<br />
div.ui-datepicker-current {<br />
display: inline;<br />
}<br />
div.ui-datepicker-header {<br />
margin-top: 5px;<br />
text-align: center;<br />
}<br />
div.ui-datepicker-header select {<br />
margin: 0 3px; <br />
}<br />
table.ui-datepicker {<br />
width: 250px;<br />
border-collapse: collapse;<br />
margin: 10px 0 0 0;<br />
}<br />
table.ui-datepicker td {<br />
padding: 3px;<br />
border: 1px solid red;<br />
}<br />
table.ui-datepicker thead td {<br />
text-align: center;<br />
font-weight: bold;<br />
background: green;<br />
color: lightgreen;<br />
}<br />
td.ui-datepicker-today {<br />
background: #dff6e4;<br />
}<br />
td.ui-datepicker-current-day {<br />
background: darkgreen;<br />
color: #fff;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<label for="tmpDate">Date:</label><br />
<input type="text" id="tmpDate" size="25" value="" /><br />
</div> <br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Use button to trigger date picker==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/ui.core.js"></script><br />
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
var pickerOpts = {<br />
showOn: "button" <br />
};<br />
<br />
//create the date picker<br />
$("#date").datepicker(pickerOpts); <br />
});<br />
</script><br />
</head><br />
<body><br />
<div class="row"><label>Enter a date: </label><input id="date"></div><br />
</body><br />
</html></source></div>