document.documentElement.className = "demo-loading";
require.config( {
- baseUrl: "../../ui",
+ baseUrl: window.location.pathname.indexOf( "demos/" ) !== -1 ? "../../ui" : "../../../ui",
paths: {
+ cldr: "../external/cldrjs/cldr",
+ globalize: "../external/globalize/globalize",
+ "globalize-locales": "../external/localization",
jquery: "../external/jquery/jquery",
external: "../external/"
},
--- /dev/null
+<!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 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">
+ $( "#calendar" ).calendar({
+ buttons: {
+ Today: function() {
+ $( this ).calendar( "valueAsDate", new Date() );
+ }
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
++ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <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">
+ $( "#calendar" ).calendar();
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<p>The calendar is a widget for selecting a date using a visual calendar representation.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!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">
+ $( "#calendar" ).calendar({
+ changeMonth: true,
+ changeYear: true
+ });
+ </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. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
+</div>
+</body>
+</html>
--- /dev/null
- <link rel="stylesheet" href="../../themes/base/all.css">
+<!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" data-modules="external/localization">
+ 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>
--- /dev/null
- max: dateMax
+<!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>
--- /dev/null
+<!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 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">
+ $( "#calendar" ).calendar({
+ numberOfMonths: 3
+ });
+ </script>
+</head>
+<body>
+
+<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 calendar.</p>
+</div>
+</body>
+</html>
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
++ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <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">
+ $( "#calendar" ).calendar({
+ eachDay: function( day ) {
+ if ( day.lead ) {
+ day.render = true;
+ day.selectable = true;
+ day.extraClasses = "ui-priority-secondary";
+ }
+ }
+ });
+ </script>
+</head>
+<body>
+
+<div id="calendar"></div>
+
+<div class="demo-description">
+<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>
+</html>
--- /dev/null
+<!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>
( function() {
- requirejs.config({
+ requirejs.config( {
paths: {
+ "cldr": "../../../external/cldrjs/cldr",
"globalize": "../../../external/globalize/globalize",
- "globalize/ja-JP": "../../../external/globalize/globalize.culture.ja-JP",
+ "globalize-locales": "../../../external/localization",
+ "globalize-old": "../../../external/globalize-old/globalize",
+ "globalize-old/ja-JP": "../../../external/globalize-old/globalize.culture.ja-JP",
"jquery": jqueryUrl(),
"jquery-simulate": "../../../external/jquery-simulate/jquery.simulate",
"jshint": "../../../external/jshint/jshint",
projects / jquery-ui.git / commitdiff