JavaScript Tutorial/jQuery/UI Datepicker

Содержание

1 30. Add image to date picker trigger button
2 30. Create a date picker
3 30. dateFormat:"d MM yy"
4 30. Display a dialog to hold the date picker
5 30. Display two months
6 30. firstDay: 1
7 30. Internationalize date picker
8 30. jQuery UI Datepicker - Display button bar
9 30. jQuery UI Datepicker - Display inline
10 30. jQuery UI Datepicker - Display month and year menus
11 30. jQuery UI Datepicker - Display multiple months
12 30. jQuery UI Datepicker - Format date
13 30. jQuery UI Datepicker - Icon trigger
14 30. jQuery UI Datepicker - Localize calendar
15 30. jQuery UI Datepicker - Populate alternate field
16 30. jQuery UI Datepicker - Restrict date range
17 30. range Select: true,
18 30. Set date format (appendText: " MM/DD/YYYY")
19 30. Set style for date picker
20 30. Use button to trigger date picker

30. Add image to date picker trigger button

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var pickerOpts = {
         showOn: "button",
         buttonImage: "cal.png",
         buttonImageOnly: true
       };
       
       $("#date").datepicker(pickerOpts);  
   });
 </script>

</head> <body>

<label>Enter a date: </label><input id="date">

</body> </html></source>

30. Create a date picker

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
           $("#date").datepicker();
   });
 </script>

</head> <body> <label>Enter a date: </label><input id="date"> </body> </html></source>

30. dateFormat:"d MM yy"

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var pickerOpts = {
         dateFormat:"d MM yy"
       };
     
       $("#date").datepicker(pickerOpts);
   });
 </script>

</head> <body> <label>Enter a date: </label><input id="date"> </body> </html></source>

30. Display a dialog to hold the date picker

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
     $("#invoke").click(function() {  
         $("#date").datepicker("dialog", "", updateDate);      
         function updateDate(date) {
           $("#date").val(date);
         }
       });    
   });
 </script>

</head> <body>

<label>Enter a date: </label> <input id="date"><a id="invoke" title="" href="#">Click to open Date Picker Dialog</a>

</body> </html></source>

30. Display two months

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var pickerOpts = {
         numberOfMonths: 2,
         stepMonths: 2,
         changeMonth: false,
         changeYear: false
       };
       
       $("#date").datepicker(pickerOpts);  
   });
 </script>

</head> <body>

<label>Enter a date: </label><input id="date">

</body> </html></source>

30. firstDay: 1

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("input#tmpDate").datepicker({
        firstDay: 1
   });
 }

);

   </script>
 </head>
 <body>

         <label for="tmpDate">Date:</label>
         <input type="text" id="tmpDate" size="25" value="" />

 </body>

</html></source>

30. Internationalize date picker

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var frenchOpts = {
         clearText: "vide",
         closeText: "Fin",
         currentText: "Courant",
         dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
         firstDay: 1,
         monthNames: [ "Janvier", "Février", "Marche", "Avril", "Pouvez", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
         nextText: "Après",
         prevText: "Préc"
       };
       
       $("#date").datepicker(frenchOpts);  
   });
 </script>

</head> <body> <label>Enter a date: </label><input id="date"> </body> </html></source>

30. jQuery UI Datepicker - Display button bar

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Display button bar</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({
     showButtonPanel: true
   });
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker">

Display a button for selecting Today"s date and a Done button for closing the calendar with the boolean showButtonPanel option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.

</body> </html></source>

30. jQuery UI Datepicker - Display inline

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Display inline</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker();
 });
 </script>

</head> <body>

Date:

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

</body> </html></source>

30. jQuery UI Datepicker - Display month and year menus

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Display month & year menus</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({
     changeMonth: true,
     changeYear: true
   });
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker">

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean changeMonth and changeYear options.

</body> </html></source>

30. jQuery UI Datepicker - Display multiple months

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Display multiple months</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({
     numberOfMonths: 3,
     showButtonPanel: true
   });
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker">

Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.

</body> </html></source>

30. jQuery UI Datepicker - Format date

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Format date</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker();
   $("#format").change(function() { $("#datepicker").datepicker("option", {dateFormat: $(this).val()}); });
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker" size="30"/>

Format options:
<select id="format"> <option value="mm/dd/yy">Default - mm/dd/yy</option> <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option> <option value="d M, y">Short - d M, yy</option> <option value="d MM, y">Medium - d MM, yy</option> <option value="DD, d MM, yy">Full - DD, d MM, yy</option> <option value=""day" d "of" MM "in the year" yy">With text - "day" d "of" MM "in the year" yy</option> </select>

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.

</body> </html></source>

30. jQuery UI Datepicker - Icon trigger

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Icon trigger</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true});
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker">

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.

</body> </html></source>

30. jQuery UI Datepicker - Localize calendar

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Localize calendar</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ar.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-bg.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ca.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-cs.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-da.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-de.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-el.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-eo.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-es.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fa.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fi.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-fr.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-he.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hr.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hu.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-hy.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-id.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-is.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-it.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ja.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ko.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-lt.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-lv.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ms.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-nl.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-no.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-pl.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-pt-BR.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ro.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-ru.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sk.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sl.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sq.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sr-SR.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-sv.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-th.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-tr.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-uk.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-CN.js"></script>
 <script type="text/javascript" src="js/ui/i18n/ui.datepicker-zh-TW.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional[""]));
   $("#datepicker").datepicker($.datepicker.regional["fr"]);
   $("#locale").change(function() {
     $("#datepicker").datepicker("option", $.extend({showMonthAfterYear: false},
       $.datepicker.regional[$(this).val()]));
   });
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker"/> <select id="locale"> <option value="sq">Albanian (Gjuha shqipe)</option> <option value="ar">Arabic (‫(لعربي</option> <option value="hy">Armenian (Հայերեն)</option> <option value="bg">Bulgarian (български език)</option> <option value="ca">Catalan (Català)</option> <option value="zh-CN">Chinese Simplified (简体中文)</option> <option value="zh-TW">Chinese Traditional (繁體中文)</option> <option value="hr">Croatian (Hrvatski jezik)</option> <option value="cs">Czech (Ceötina)</option> <option value="da">Danish (Dansk)</option> <option value="nl">Dutch (Nederlands)</option> <option value="eo">Esperanto</option> <option value="fa">Farsi/Persian (‫(فارسی</option> <option value="fi">Finnish (suomi)</option> <option value="fr" selected="selected">French (Français)</option> <option value="de">German (Deutsch)</option> <option value="el">Greek (Ελληνικά)</option> <option value="he">Hebrew (‫(עברית</option> <option value="hu">Hungarian (Magyar)</option> <option value="is">Icelandic (Õslenska)</option> <option value="id">Indonesian (Bahasa Indonesia)</option> <option value="it">Italian (Italiano)</option> <option value="ja">Japanese (日本語)</option> <option value="ko">Korean (한국어)</option> <option value="lv">Latvian (Latvieöu Valoda)</option> <option value="lt">Lithuanian (lietuviu kalba)</option> <option value="ms">Malaysian (Bahasa Malaysia)</option> <option value="no">Norwegian (Norsk)</option> <option value="pl">Polish (Polski)</option> <option value="pt-BR">Portuguese/Brazilian (Português)</option> <option value="ro">Romanian (Română)</option> <option value="ru">Russian (Русский)</option> <option value="sr">Serbian (српски језик)</option> <option value="sr-SR">Serbian (srpski jezik)</option> <option value="sk">Slovak (Slovencina)</option> <option value="sl">Slovenian (Slovenski Jezik)</option> <option value="es">Spanish (Español)</option> <option value="sv">Swedish (Svenska)</option> <option value="th">Thai (ภาษาไทย)</option> <option value="tr">Turkish (Türkçe)</option> <option value="uk">Ukranian (Українська)</option> </select>

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.

</body> </html></source>

30. jQuery UI Datepicker - Populate alternate field

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Populate alternate field</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({altField: "#alternate", altFormat: "DD, d MM, yy"});
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/>

Populate an alternate field with its own date format whenever a date is selected using the altField and altFormat 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.

</body> </html></source>

30. jQuery UI Datepicker - Restrict date range

   <source lang="javascript">

<!doctype html> <html lang="en"> <head>

 <title>jQuery UI Datepicker - Restrict date range</title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
 $(function() {
   $("#datepicker").datepicker({minDate: -20, maxDate: "+1M +10D"});
 });
 </script>

</head> <body>

Date: <input type="text" id="datepicker">

Restrict the range of selectable dates with the minDate and maxDate 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.

</body> </html></source>

30. range Select: true,

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("input#tmpDate").datepicker({
     minDate: new Date(2008, 0, 1),
     rangeSelect: true,
     maxDate: new Date(2009, 0, 1)
   });
 }

);

   </script>
   <style type="text/css">

ui-datepicker-div {

   width: 300px;
   border: 1px solid rgb(128, 128, 128);
   padding: 5px;
   background: gray;
   display: none;

} div.ui-datepicker-control {

   position: relative;
   height: 25px;
   background: forestgreen;

} div.ui-datepicker-control div {

   padding: 5px;

} div.ui-datepicker-control div a {

   color: #fff;

} div.ui-datepicker-links {

   position: relative;
   height: 20px;
   padding: 5px 0 0 0;
   background: darkgreen;
   border-bottom: 1px solid green;
   text-align: center;

} div.ui-datepicker-links div {

   padding: 5px;

} div.ui-datepicker-links div a {

   color: #fff;

} div.ui-datepicker-clear, div.ui-datepicker-prev {

   position: absolute;
   top: 0;
   left: 0;

} div.ui-datepicker-close, div.ui-datepicker-next {

   position: absolute;
   top: 0;
   right: 0;

} div.ui-datepicker-current {

   display: inline;

} div.ui-datepicker-header {

   margin-top: 5px;
   text-align: center;

} div.ui-datepicker-header select {

   margin: 0 3px;

} table.ui-datepicker {

   width: 250px;
   border-collapse: collapse;
   margin: 10px 0 0 0;

} table.ui-datepicker td {

   padding: 3px;
   border: 1px solid red;

} table.ui-datepicker thead td {

   text-align: center;
   font-weight: bold;
   background: green;
   color: lightgreen;

} td.ui-datepicker-today {

   background: #dff6e4;

} td.ui-datepicker-current-day {

   background: darkgreen;
   color: #fff;

}

   </style>
 </head>
 <body>

         <label for="tmpDate">Date:</label>
         <input type="text" id="tmpDate" size="25" value="" />

 </body>

</html></source>

30. Set date format (appendText: " MM/DD/YYYY")

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var pickerOpts = {
         appendText: " MM/DD/YYYY",
         changeFirstDay: false,
         changeMonth: false,
         changeYear: false,
         closeAtTop: false,
         showOtherMonths: true,
         showStatus: true,
         showWeeks: true,
         duration: "fast"
       };
       $("#date").datepicker(pickerOpts);
   });
 </script>

</head> <body> <label>Enter a date: </label><input id="date"> </body> </html></source>

30. Set style for date picker

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
   <script type="text/javascript">

$(document).ready(

 function() {
   $("input#tmpDate").datepicker({
     minDate: new Date(2008, 0, 1),
     maxDate: new Date(2009, 0, 1)
   });
 }

);

   </script>
   <style type="text/css">

ui-datepicker-div {

   width: 300px;
   border: 1px solid rgb(128, 128, 128);
   padding: 5px;
   background: gray;
   display: none;

} div.ui-datepicker-control {

   position: relative;
   height: 25px;
   background: forestgreen;

} div.ui-datepicker-control div {

   padding: 5px;

} div.ui-datepicker-control div a {

   color: #fff;

} div.ui-datepicker-links {

   position: relative;
   height: 20px;
   padding: 5px 0 0 0;
   background: darkgreen;
   border-bottom: 1px solid green;
   text-align: center;

} div.ui-datepicker-links div {

   padding: 5px;

} div.ui-datepicker-links div a {

   color: #fff;

} div.ui-datepicker-clear, div.ui-datepicker-prev {

   position: absolute;
   top: 0;
   left: 0;

} div.ui-datepicker-close, div.ui-datepicker-next {

   position: absolute;
   top: 0;
   right: 0;

} div.ui-datepicker-current {

   display: inline;

} div.ui-datepicker-header {

   margin-top: 5px;
   text-align: center;

} div.ui-datepicker-header select {

   margin: 0 3px;

} table.ui-datepicker {

   width: 250px;
   border-collapse: collapse;
   margin: 10px 0 0 0;

} table.ui-datepicker td {

   padding: 3px;
   border: 1px solid red;

} table.ui-datepicker thead td {

   text-align: center;
   font-weight: bold;
   background: green;
   color: lightgreen;

} td.ui-datepicker-today {

   background: #dff6e4;

} td.ui-datepicker-current-day {

   background: darkgreen;
   color: #fff;

}

   </style>
 </head>
 <body>

         <label for="tmpDate">Date:</label>
         <input type="text" id="tmpDate" size="25" value="" />

 </body>

</html></source>

30. Use button to trigger date picker

   <source lang="javascript">

 <title></title>
 <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="js/ui/ui.core.js"></script>
 <script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
 <link type="text/css" href="js/demos.css" rel="stylesheet" />
 <script type="text/javascript">
   $(function() {
       var pickerOpts = {
         showOn: "button"  
       };
       
       //create the date picker
       $("#date").datepicker(pickerOpts);  
   });
 </script>

</head> <body>

<label>Enter a date: </label><input id="date">

</body> </html></source>

JavaScript Tutorial/jQuery/UI Datepicker

Содержание

30. Add image to date picker trigger button

30. Create a date picker

30. dateFormat:"d MM yy"

30. Display a dialog to hold the date picker

30. Display two months

30. firstDay: 1

30. Internationalize date picker

30. jQuery UI Datepicker - Display button bar

30. jQuery UI Datepicker - Display inline

30. jQuery UI Datepicker - Display month and year menus

30. jQuery UI Datepicker - Display multiple months

30. jQuery UI Datepicker - Format date

30. jQuery UI Datepicker - Icon trigger

30. jQuery UI Datepicker - Localize calendar

30. jQuery UI Datepicker - Populate alternate field

30. jQuery UI Datepicker - Restrict date range

30. range Select: true,

30. Set date format (appendText: " MM/DD/YYYY")

30. Set style for date picker

30. Use button to trigger date picker

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты