Merge commit '7f7c9b378f' as 'jquery-ui'

This commit is contained in:
Mark Schouten 2016-08-05 12:57:52 +02:00
commit 0115f4500d
629 changed files with 341074 additions and 0 deletions

View file

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Populate alternate field</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">&nbsp;<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>

View file

@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Animations</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/effect.js"></script>
<script src="../../ui/effect-blind.js"></script>
<script src="../../ui/effect-bounce.js"></script>
<script src="../../ui/effect-clip.js"></script>
<script src="../../ui/effect-drop.js"></script>
<script src="../../ui/effect-fold.js"></script>
<script src="../../ui/effect-slide.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"/></p>
<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="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>
</select>
</p>
<div class="demo-description">
<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>
</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display button bar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"/></p>
<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>
</select>
</p>
<div class="demo-description">
<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>
</div>
</body>
</html>

View file

@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</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>

View file

@ -0,0 +1,36 @@
/* Arabic Translation for jQuery UI date picker plugin. */
/* Khaled Alhourani -- me@khaledalhourani.com */
/* NOTE: monthNames are the original months names and they are the Arabic names, not the new months name فبراير - يناير and there isn't any Arabic roots for these months */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['ar'] = {
closeText: 'إغلاق',
prevText: '&#x3C;السابق',
nextText: 'التالي&#x3E;',
currentText: 'اليوم',
monthNames: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesMin: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
weekHeader: 'أسبوع',
dateFormat: 'dd/mm/yy',
firstDay: 6,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['ar']);
return datepicker.regional['ar'];
}));

View file

@ -0,0 +1,38 @@
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani (sholby@sholby.net),
Stéphane Raimbault <stephane.raimbault@gmail.com> */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin',
'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
monthNamesShort: ['janv.', 'févr.', 'mars', 'avril', 'mai', 'juin',
'juil.', 'août', 'sept.', 'oct.', 'nov.', 'déc.'],
dayNames: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
dayNamesShort: ['dim.', 'lun.', 'mar.', 'mer.', 'jeu.', 'ven.', 'sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['fr']);
return datepicker.regional['fr'];
}));

View file

@ -0,0 +1,36 @@
/* Hebrew initialisation for the UI Datepicker extension. */
/* Written by Amir Hardon (ahardon at gmail dot com). */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['he'] = {
closeText: 'סגור',
prevText: '&#x3C;הקודם',
nextText: 'הבא&#x3E;',
currentText: 'היום',
monthNames: ['ינואר','פברואר','מרץ','אפריל','מאי','יוני',
'יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'],
monthNamesShort: ['ינו','פבר','מרץ','אפר','מאי','יוני',
'יולי','אוג','ספט','אוק','נוב','דצמ'],
dayNames: ['ראשון','שני','שלישי','רביעי','חמישי','שישי','שבת'],
dayNamesShort: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
dayNamesMin: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 0,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
datepicker.setDefaults(datepicker.regional['he']);
return datepicker.regional['he'];
}));

View file

@ -0,0 +1,36 @@
/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Ressol (ressol@gmail.com). */
(function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define([ "../jquery.ui.datepicker" ], factory );
} else {
// Browser globals
factory( jQuery.datepicker );
}
}(function( datepicker ) {
datepicker.regional['zh-TW'] = {
closeText: '關閉',
prevText: '&#x3C;上月',
nextText: '下月&#x3E;',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
datepicker.setDefaults(datepicker.regional['zh-TW']);
return datepicker.regional['zh-TW'];
}));

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<div class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,31 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date"
});
});
</script>
</head>
<body>
<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>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

View file

@ -0,0 +1,28 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker Demos</title>
</head>
<body>
<ul>
<li><a href="default.html">Default functionality</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 &amp; 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>
</ul>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<script src="datepicker-ar.js"></script>
<script src="datepicker-fr.js"></script>
<script src="datepicker-he.js"></script>
<script src="datepicker-zh-TW.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"/>&nbsp;
<select id="locale">
<option value="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</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>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict date range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Dates in other months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>

View file

@ -0,0 +1,32 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Show week of the year</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>