diff options
Diffstat (limited to 'demos')
24 files changed, 325 insertions, 221 deletions
diff --git a/demos/bootstrap.js b/demos/bootstrap.js index 9a82071c7..0a109ef9e 100644 --- a/demos/bootstrap.js +++ b/demos/bootstrap.js @@ -30,6 +30,7 @@ var widgets = [ "accordion", "autocomplete", "button", + "calendar", "checkboxradio", "controlgroup", "datepicker", @@ -80,12 +81,20 @@ document.documentElement.className = "demo-loading"; require.config( { baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui", paths: { + cldr: "../external/cldrjs/cldr", + "globalize-runtime": "../external/globalize/globalize-runtime", + "globalize-locales": "../external/localization", jquery: "../external/jquery/jquery", external: "../external/" }, + map: { + "*": { + "globalize": "globalize-runtime" + } + }, shim: { - "external/globalize/globalize.culture.de-DE": [ "external/globalize/globalize" ], - "external/globalize/globalize.culture.ja-JP": [ "external/globalize/globalize" ] + "external/globalize-old/globalize.culture.de-DE": [ "external/globalize-old/globalize" ], + "external/globalize-old/globalize.culture.ja-JP": [ "external/globalize-old/globalize" ] } } ); diff --git a/demos/datepicker/dropdown-month-year.html b/demos/calendar/buttonbar.html index ab3da5d0a..28ee693cc 100644 --- a/demos/datepicker/dropdown-month-year.html +++ b/demos/calendar/buttonbar.html @@ -3,23 +3,26 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display month & year menus</title> + <title>jQuery UI Calendar - 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({ - changeMonth: true, - changeYear: true + $( "#calendar" ).calendar({ + buttons: { + Today: function() { + $( this ).calendar( "valueAsDate", new Date() ); + } + } }); </script> </head> <body> -<p>Date: <input type="text" id="datepicker"></p> +<div id="calendar"></div> <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> +<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p> </div> </body> </html> diff --git a/demos/datepicker/inline.html b/demos/calendar/default.html index 9e8026726..1a2cfdf77 100644 --- a/demos/datepicker/inline.html +++ b/demos/calendar/default.html @@ -3,20 +3,20 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display inline</title> + <title>jQuery UI Calendar - Default functionality</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(); + $( "#calendar" ).calendar(); </script> </head> <body> -Date: <div id="datepicker"></div> +<div id="calendar"></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> +<p>The calendar is a widget for selecting a date using a visual calendar representation.</p> </div> </body> </html> diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html new file mode 100644 index 000000000..e305e879a --- /dev/null +++ b/demos/calendar/dropdown-month-year.html @@ -0,0 +1,82 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Calendar - 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"> + $.widget( "ui.calendar", $.ui.calendar, { + _buildTitleMonth: function() { + var select = $( "<select>" ), + date = this._getDate().clone(), + i = 0, + option; + + this._on( select, { + change: function() { + this._off( select ); + this._getDate().setFullDate( + this._getDate().year(), + select.val(), + this._getDate().day() + ); + this._updateView(); + } + } ); + + for ( ; i < 12; i++ ) { + date.setFullDate( select.val(), i, this._getDate().day() ); + option = $( "<option>", { val: i, text: date.monthName() } ); + if ( this._getDate().month() === i ) { + option.prop( "selected", true ); + } + select.append( option ); + } + + return select; + }, + _buildTitleYear: function() { + var current = new Date(), + select = $( "<select>" ), + i = current.getFullYear(), + option; + + this._on( select, { + change: function() { + this._off( select ); + this._getDate().setFullDate( + select.val(), + this._getDate().month(), + this._getDate().day() + ); + this._updateView(); + } + } ); + + for ( ;i <= current.getFullYear() + 10; i++ ) { + option = $( "<option>", { val: i, text: i } ); + if ( this._getDate().year() === i ) { + option.prop( "selected", true ); + } + select.append( option ); + } + + return select; + } + }); + + $( "#calendar" ).calendar(); + </script> +</head> +<body> + +<div id="calendar"></div> + +<div class="demo-description"> +<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.</p> +</div> +</body> +</html> diff --git a/demos/calendar/index.html b/demos/calendar/index.html new file mode 100644 index 000000000..751301a00 --- /dev/null +++ b/demos/calendar/index.html @@ -0,0 +1,22 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Calendar Demos</title> +</head> +<body> + +<ul> + <li><a href="default.html">Default functionality</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="localization.html">Localize calendar</a></li> + <li><a href="min-max.html">Restrict date range</a></li> + <li><a href="multiple-months.html">Display multiple months</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> +</ul> + +</body> +</html> diff --git a/demos/calendar/localization.html b/demos/calendar/localization.html new file mode 100644 index 000000000..2c2cc2310 --- /dev/null +++ b/demos/calendar/localization.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Calendar - Localize calendar</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 calendar = $( "#calendar" ), + select = $( "#locale" ); + + calendar.calendar({ + locale: select.val() + }); + + select.change( function() { + calendar.calendar( "option", { + locale: select.val() + }); + calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) ); + }); + </script> +</head> +<body> + +<div id="calendar"></div> +<select id="locale"> + <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> + +<div class="demo-description"> +<p>Localize the calendar language and format (English / Western formatting is the default). The calendar includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p> +</div> +</body> +</html> diff --git a/demos/calendar/min-max.html b/demos/calendar/min-max.html new file mode 100644 index 000000000..b3036b873 --- /dev/null +++ b/demos/calendar/min-max.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI Calendar - 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"> + var now = new Date(), + dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 1 ), + dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDate() + 8 ); + + dateMin = new Date( 2008, 2 - 1, 29 ); + dateMax = new Date( 2008, 12 - 1, 7 ); + + + $( "#calendar" ).calendar({ + min: dateMin, + max: dateMax, + value: new Date( 2008, 1 - 1, 4 ) + }); + </script> +</head> +<body> + +<div id="calendar"></div> + +<div class="demo-description"> +<p>Restrict the range of selectable dates with the <code>min</code> and <code>max</code> options. Set the beginning and end dates as actual dates (<code>new Date(2009, 1 - 1, 26)</code>).</p> +</div> +</body> +</html> diff --git a/demos/datepicker/multiple-calendars.html b/demos/calendar/multiple-months.html index 033b648a2..f83da1f82 100644 --- a/demos/datepicker/multiple-calendars.html +++ b/demos/calendar/multiple-months.html @@ -3,23 +3,22 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Display multiple months</title> + <title>jQuery UI Calendar - 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 + $( "#calendar" ).calendar({ + numberOfMonths: 3 }); </script> </head> <body> -<p>Date: <input type="text" id="datepicker"></p> +<div id="calendar"></div> <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> +<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p> </div> </body> </html> diff --git a/demos/datepicker/other-months.html b/demos/calendar/other-months.html index ff8600644..2fb4dacf8 100644 --- a/demos/datepicker/other-months.html +++ b/demos/calendar/other-months.html @@ -3,23 +3,28 @@ <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>jQuery UI Datepicker - Dates in other months</title> + <title>jQuery UI Calendar - 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 + $( "#calendar" ).calendar({ + eachDay: function( day ) { + if ( day.lead ) { + day.render = true; + day.selectable = true; + day.extraClasses = "ui-priority-secondary"; + } + } }); </script> </head> <body> -<p>Date: <input type="text" id="datepicker"></p> +<div id="calendar"></div> <div class="demo-description"> -<p>The datepicker can show dates that come from other than the main month +<p>The calendar can show dates that come from other than the main month being displayed. These other dates can also be made selectable.</p> </div> </body> diff --git a/demos/calendar/show-week.html b/demos/calendar/show-week.html new file mode 100644 index 000000000..e148b6570 --- /dev/null +++ b/demos/calendar/show-week.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>jQuery UI Calendar - 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"> + $( "#calendar" ).calendar({ + showWeek: true + }); + </script> +</head> +<body> + +<div id="calendar"></div> + +<div class="demo-description"> +<p>The calendar can show the week of the year. The calculation follows + <a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">Unicode CLDR specification</a>. + This means that some days from one year may be placed into weeks 'belonging' to another year.</p> +</div> +</body> +</html> 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/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/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/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> diff --git a/demos/index.html b/demos/index.html index 89375dde7..b9d2f4e79 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,6 +11,7 @@ <li><a href="accordion/">accordion</a></li> <li><a href="autocomplete/">autocomplete</a></li> <li><a href="button/">button</a></li> + <li><a href="calendar/">calendar</a></li> <li><a href="checkboxradio/">checkboxradio</a></li> <li><a href="controlgroup/">controlgroup</a></li> <li><a href="datepicker/">datepicker</a></li> diff --git a/demos/spinner/currency.html b/demos/spinner/currency.html index 4180b12e1..ad25359df 100644 --- a/demos/spinner/currency.html +++ b/demos/spinner/currency.html @@ -7,7 +7,12 @@ <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="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel"> + <script src="../bootstrap.js" data-modules=" + external/globalize-old/globalize + external/globalize-old/globalize.culture.de-DE + external/globalize-old/globalize.culture.ja-JP + external/jquery-mousewheel/jquery.mousewheel + "> $( "#currency" ).on( "change", function() { $( "#spinner" ).spinner( "option", "culture", $( this ).val() ); }); diff --git a/demos/spinner/decimal.html b/demos/spinner/decimal.html index 0b39f2bac..68a806a9c 100644 --- a/demos/spinner/decimal.html +++ b/demos/spinner/decimal.html @@ -7,7 +7,12 @@ <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="external/globalize/globalize external/globalize/globalize.culture.de-DE external/globalize/globalize.culture.ja-JP external/jquery-mousewheel/jquery.mousewheel"> + <script src="../bootstrap.js" data-modules=" + external/globalize-old/globalize + external/globalize-old/globalize.culture.de-DE + external/globalize-old/globalize.culture.ja-JP + external/jquery-mousewheel/jquery.mousewheel + "> $( "#spinner" ).spinner({ step: 0.01, numberFormat: "n" diff --git a/demos/spinner/time.html b/demos/spinner/time.html index 5836784d1..6941cd646 100644 --- a/demos/spinner/time.html +++ b/demos/spinner/time.html @@ -7,7 +7,11 @@ <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="external/globalize/globalize external/globalize/globalize.culture.de-DE external/jquery-mousewheel/jquery.mousewheel"> + <script src="../bootstrap.js" data-modules=" + external/globalize-old/globalize + external/globalize-old/globalize.culture.de-DE + external/jquery-mousewheel/jquery.mousewheel + "> $.widget( "ui.timespinner", $.ui.spinner, { options: { // seconds |