diff options
Diffstat (limited to 'demos/datepicker')
| -rw-r--r-- | demos/datepicker/alt-field.html | 25 | ||||
| -rw-r--r-- | demos/datepicker/animation.html | 13 | ||||
| -rw-r--r-- | demos/datepicker/buttonbar.html | 24 | ||||
| -rw-r--r-- | demos/datepicker/date-formats.html | 21 | ||||
| -rw-r--r-- | demos/datepicker/date-range.html | 53 | ||||
| -rw-r--r-- | demos/datepicker/dropdown-month-year.html | 25 | ||||
| -rw-r--r-- | demos/datepicker/icon-trigger.html | 28 | ||||
| -rw-r--r-- | demos/datepicker/index.html | 13 | ||||
| -rw-r--r-- | demos/datepicker/inline.html | 22 | ||||
| -rw-r--r-- | demos/datepicker/localization.html | 30 | ||||
| -rw-r--r-- | demos/datepicker/min-max.html | 22 | ||||
| -rw-r--r-- | demos/datepicker/multiple-calendars.html | 25 | ||||
| -rw-r--r-- | demos/datepicker/other-months.html | 26 | ||||
| -rw-r--r-- | demos/datepicker/show-week.html | 28 |
14 files changed, 63 insertions, 292 deletions
diff --git a/demos/datepicker/alt-field.html b/demos/datepicker/alt-field.html deleted file mode 100644 index 779325719..000000000 --- a/demos/datepicker/alt-field.html +++ /dev/null @@ -1,25 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Populate alternate field</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - altField: "#alternate", - altFormat: "DD, d MM, yy" - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p> - -<div class="demo-description"> -<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> -</div> -</body> -</html> diff --git a/demos/datepicker/animation.html b/demos/datepicker/animation.html index 7daf4bc6c..d493fad53 100644 --- a/demos/datepicker/animation.html +++ b/demos/datepicker/animation.html @@ -10,7 +10,11 @@ <script src="../bootstrap.js" data-modules="effect effect-bounce effect-blind effect-bounce effect-clip effect-drop effect-fold effect-slide"> $( "#datepicker" ).datepicker(); $( "#anim" ).on( "change", function() { - $( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() ); + var value = $( this ).val(), + hideValue = $( this ).find( "option:selected" ).data( "hide" ); + $( "#datepicker" ) + .datepicker( "option", "show", value ) + .datepicker( "option", "hide", hideValue || value ); }); </script> </head> @@ -20,16 +24,15 @@ <p>Animations:<br /> <select id="anim"> - <option value="show">Show (default)</option> - <option value="slideDown">Slide down</option> - <option value="fadeIn">Fade in</option> + <option value="show">Fade in/out (default)</option> + <option value="slideDown" data-hide="slideUp">Slide down/up</option> <option value="blind">Blind (UI Effect)</option> <option value="bounce">Bounce (UI Effect)</option> <option value="clip">Clip (UI Effect)</option> <option value="drop">Drop (UI Effect)</option> <option value="fold">Fold (UI Effect)</option> <option value="slide">Slide (UI Effect)</option> - <option value="">None</option> + <option value="false">None</option> </select> </p> diff --git a/demos/datepicker/buttonbar.html b/demos/datepicker/buttonbar.html deleted file mode 100644 index 5b48179b4..000000000 --- a/demos/datepicker/buttonbar.html +++ /dev/null @@ -1,24 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display button bar</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - showButtonPanel: true - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<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> -</div> -</body> -</html> diff --git a/demos/datepicker/date-formats.html b/demos/datepicker/date-formats.html index 5e738b4ab..a234e223b 100644 --- a/demos/datepicker/date-formats.html +++ b/demos/datepicker/date-formats.html @@ -8,9 +8,17 @@ <link rel="stylesheet" href="../demos.css"> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker(); + var value, + datepicker = $( "#datepicker" ).datepicker(); + $( "#format" ).on( "change", function() { - $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); + value = $( this ).val(); + + if ( value === "iso" ) { + datepicker.datepicker( "option", "dateFormat", { raw: "yyyy-MM-dd" } ); + } else { + datepicker.datepicker( "option", "dateFormat", { date: value } ); + } }); </script> </head> @@ -20,12 +28,9 @@ <p>Format options:<br /> <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, y</option> - <option value="d MM, y">Medium - d MM, y</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> + <option value="short">Short - M/d/yy in "en" locale</option> + <option value="long">Long - MMMM d, y in "en" locale</option> + <option value="iso">ISO 8601 - yyyy-MM-dd</option> </select> </p> diff --git a/demos/datepicker/date-range.html b/demos/datepicker/date-range.html deleted file mode 100644 index 17581e1eb..000000000 --- a/demos/datepicker/date-range.html +++ /dev/null @@ -1,53 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Select a Date Range</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - var dateFormat = "mm/dd/yy", - from = $( "#from" ) - .datepicker({ - defaultDate: "+1w", - changeMonth: true, - numberOfMonths: 3 - }) - .on( "change", function() { - to.datepicker( "option", "minDate", getDate( this ) ); - }), - to = $( "#to" ).datepicker({ - defaultDate: "+1w", - changeMonth: true, - numberOfMonths: 3 - }) - .on( "change", function() { - from.datepicker( "option", "maxDate", getDate( this ) ); - }); - - function getDate( element ) { - var date; - try { - date = $.datepicker.parseDate( dateFormat, element.value ); - } catch( error ) { - date = null; - } - - return date; - } - </script> -</head> -<body> - -<label for="from">From</label> -<input type="text" id="from" name="from"/> -<label for="to">to</label> -<input type="text" id="to" name="to"/> - -<div class="demo-description"> -<p>Select the date range to search for.</p> -</div> -</body> -</html> diff --git a/demos/datepicker/dropdown-month-year.html b/demos/datepicker/dropdown-month-year.html deleted file mode 100644 index ab3da5d0a..000000000 --- a/demos/datepicker/dropdown-month-year.html +++ /dev/null @@ -1,25 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display month & year menus</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - changeMonth: true, - changeYear: true - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<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> -</div> -</body> -</html> diff --git a/demos/datepicker/icon-trigger.html b/demos/datepicker/icon-trigger.html index 71d0621d4..ef3362a11 100644 --- a/demos/datepicker/icon-trigger.html +++ b/demos/datepicker/icon-trigger.html @@ -8,12 +8,26 @@ <link rel="stylesheet" href="../demos.css"> <script src="../../external/requirejs/require.js"></script> <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - showOn: "button", - buttonImage: "images/calendar.gif", - buttonImageOnly: true, - buttonText: "Select date" - }); + var allowOpen = false, + datepicker = $( "#datepicker" ).datepicker({ + beforeOpen: function() { + return allowOpen; + }, + open: function() { + allowOpen = false; + } + } ), + widget = datepicker.datepicker( "widget" ); + + $( "<button>" ) + .append( "<img src='images/calendar.gif' alt='Open Datepicker'>" ) + .insertAfter( datepicker ) + .on( "click", function() { + allowOpen = true; + if ( widget.is( ":hidden" ) ) { + datepicker.focus(); + } + }); </script> </head> <body> @@ -21,7 +35,7 @@ <p>Date: <input type="text" id="datepicker"></p> <div class="demo-description"> -<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> +<p>Click the icon next to the input field to show the datepicker. This demo will be removed soon since its promoting bad practice. Please see our migration guide.</p> </div> </body> </html> diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html index d9c8dfc10..a56df7bd6 100644 --- a/demos/datepicker/index.html +++ b/demos/datepicker/index.html @@ -9,19 +9,10 @@ <ul> <li><a href="default.html">Default functionality</a></li> + <li><a href="animation.html">Animations</a></li> <li><a href="date-formats.html">Format date</a></li> - <li><a href="min-max.html">Restrict date range</a></li> - <li><a href="localization.html">Localize calendar</a></li> - <li><a href="alt-field.html">Populate alternate field</a></li> - <li><a href="inline.html">Display inline</a></li> - <li><a href="buttonbar.html">Display button bar</a></li> - <li><a href="dropdown-month-year.html">Display month & year menus</a></li> - <li><a href="other-months.html">Dates in other months</a></li> - <li><a href="show-week.html">Show week of the year</a></li> - <li><a href="multiple-calendars.html">Display multiple months</a></li> <li><a href="icon-trigger.html">Icon trigger</a></li> - <li><a href="animation.html">Animations</a></li> - <li><a href="date-range.html">Date Range</a></li> + <li><a href="localization.html">Localize calendar</a></li> </ul> </body> diff --git a/demos/datepicker/inline.html b/demos/datepicker/inline.html deleted file mode 100644 index 9e8026726..000000000 --- a/demos/datepicker/inline.html +++ /dev/null @@ -1,22 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display inline</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker(); - </script> -</head> -<body> - -Date: <div id="datepicker"></div> - -<div class="demo-description"> -<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p> -</div> -</body> -</html> diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html index 69835931a..9537567f7 100644 --- a/demos/datepicker/localization.html +++ b/demos/datepicker/localization.html @@ -7,11 +7,19 @@ <link rel="stylesheet" href="../../themes/base/all.css"> <link rel="stylesheet" href="../demos.css"> <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js" data-modules="i18n/datepicker-ar i18n/datepicker-fr i18n/datepicker-he i18n/datepicker-zh-TW"> - $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] ); - $( "#locale" ).on( "change", function() { - $( "#datepicker" ).datepicker( "option", - $.datepicker.regional[ $( this ).val() ] ); + <script src="../bootstrap.js" data-modules="external/localization"> + var datepicker = $( "#datepicker" ), + select = $( "#locale" ); + + datepicker.datepicker({ + locale: select.val() + }); + + select.on( "change", function() { + datepicker.datepicker( "option", { + locale: select.val() + }); + datepicker.datepicker( "valueAsDate", datepicker.datepicker( "valueAsDate" ) ); }); </script> </head> @@ -19,15 +27,15 @@ <p>Date: <input type="text" id="datepicker"/> <select id="locale"> - <option value="ar">Arabic (‫(العربية</option> - <option value="zh-TW">Chinese Traditional (繁體中文)</option> - <option value="">English</option> - <option value="fr" selected="selected">French (Français)</option> - <option value="he">Hebrew (‫(עברית</option> + <option value="ar">Arabic</option> + <option value="de" selected>German</option> + <option value="en">English</option> + <option value="es">Spanish</option> + <option value="zh">Chinese Simplified</option> </select></p> <div class="demo-description"> -<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> +<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> </div> </body> </html> diff --git a/demos/datepicker/min-max.html b/demos/datepicker/min-max.html deleted file mode 100644 index 13b1b569e..000000000 --- a/demos/datepicker/min-max.html +++ /dev/null @@ -1,22 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Restrict date range</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<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> -</div> -</body> -</html> diff --git a/demos/datepicker/multiple-calendars.html b/demos/datepicker/multiple-calendars.html deleted file mode 100644 index 033b648a2..000000000 --- a/demos/datepicker/multiple-calendars.html +++ /dev/null @@ -1,25 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display multiple months</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - numberOfMonths: 3, - showButtonPanel: true - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p> -</div> -</body> -</html> diff --git a/demos/datepicker/other-months.html b/demos/datepicker/other-months.html deleted file mode 100644 index ff8600644..000000000 --- a/demos/datepicker/other-months.html +++ /dev/null @@ -1,26 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Dates in other months</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - showOtherMonths: true, - selectOtherMonths: true - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<p>The datepicker can show dates that come from other than the main month - being displayed. These other dates can also be made selectable.</p> -</div> -</body> -</html> diff --git a/demos/datepicker/show-week.html b/demos/datepicker/show-week.html deleted file mode 100644 index 022d0271c..000000000 --- a/demos/datepicker/show-week.html +++ /dev/null @@ -1,28 +0,0 @@ -<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Show week of the year</title> - <link rel="stylesheet" href="../../themes/base/all.css"> - <link rel="stylesheet" href="../demos.css"> - <script src="../../external/requirejs/require.js"></script> - <script src="../bootstrap.js"> - $( "#datepicker" ).datepicker({ - showWeek: true, - firstDay: 1 - }); - </script> -</head> -<body> - -<p>Date: <input type="text" id="datepicker"></p> - -<div class="demo-description"> -<p>The datepicker can show the week of the year. The default calculation follows - the ISO 8601 definition: the week starts on Monday, the first week of the year - contains the first Thursday of the year. This means that some days from one - year may be placed into weeks 'belonging' to another year.</p> -</div> -</body> -</html> |