Skip to content
Merged
Show file tree
Hide file tree
Changes from 25 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
738a95e
Datepicker: Introduce value option
fnagel May 15, 2014
ee0f537
Calendar: Add calendar widget
fnagel Jun 3, 2014
ca654c5
Calendar: Add min and max option.
fnagel Jun 4, 2014
54b6e2f
Calendar: Remove select callback reference
fnagel Jun 4, 2014
56744d0
Datepicker: Code clean up for events
fnagel Jun 5, 2014
f3b058a
Datepicker: Remove unwanted keyboard shortcut
fnagel Jun 5, 2014
730cde5
Datepicker: Simplify usage of calendar options and avoid duplications
fnagel Jun 12, 2014
7e87b53
Datepicker tests: Add open and close unit tests
fnagel Jun 16, 2014
4fe8c4c
Datepicker: Improve document click event
fnagel Jun 17, 2014
f590a43
Calendar: Fix broken day table cell attributes
fnagel Jun 17, 2014
dd0bd1a
Datepicker tests: Rewrite event unit tests
fnagel Jun 17, 2014
dbdc846
Calendar: Fix multiple calendar styles
fnagel Jun 17, 2014
e1478cc
Calendar: Fix German localization
fnagel Jun 17, 2014
45bc3ec
Datepicker: Fix localization demo
fnagel Jun 18, 2014
0b54ad1
Datepicker: Several minor code improvements
fnagel Jun 18, 2014
f5b569d
Calendar: Fix hover event setting and removing
fnagel Jun 18, 2014
4d9c598
Datepicker: Improve localization handling, code style
fnagel Jun 19, 2014
d4ee2bc
Calendar: Add buttons option
fnagel Jun 19, 2014
5c168fb
Calendar: Adjust files to match reorganization of external directory
fnagel Jul 2, 2014
da2b9ae
Datepicker tests: Remove pass-through options unit tests
fnagel Aug 29, 2014
ad38ad4
Calendar: Use _on for link hover events
fnagel Aug 30, 2014
49c0102
Datepicker: Add missing handling for disabled option
fnagel Sep 1, 2014
73c1d18
Calendar: Remove option method overwrite
fnagel Nov 7, 2014
565a9e1
Calendar: Make use of _setOptions to call refresh
fnagel Dec 18, 2014
2309f4d
Calendar: Sanitize active descendant id selector
fnagel Dec 28, 2014
efe643e
Calendar: Clean up demos.
fnagel Jan 18, 2015
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ var
"core",
"accordion",
"autocomplete",
"calendar",
"button",
"datepicker",
"dialog",
Expand Down
1 change: 1 addition & 0 deletions build/tasks/testswarm.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ var versions = {
"Accordion": "accordion/accordion.html",
"Autocomplete": "autocomplete/autocomplete.html",
"Button": "button/button.html",
"Calendar": "calendar/calendar.html",
"Core": "core/core.html",
"Core_deprecated": "core/core_deprecated.html",
"Datepicker": "datepicker/datepicker.html",
Expand Down
16 changes: 10 additions & 6 deletions demos/datepicker/buttonbar.html → demos/calendar/buttonbar.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display button bar</title>
<title>jQuery UI Calendar - Display button bar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,23 +11,27 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
$( "#calendar" ).calendar({
buttons: {
"Today": function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drop the quotes.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

$( 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>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>
<p>Display a button for selecting Today's date with the <code>buttons</code> option.</p>
</div>
</body>
</html>
10 changes: 5 additions & 5 deletions demos/datepicker/inline.html → demos/calendar/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display inline</title>
<title>jQuery UI Calendar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,21 +11,21 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<title>jQuery UI Calendar - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
changeMonth: true,
changeYear: true
});
Expand All @@ -25,7 +25,7 @@
</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>
Expand Down
22 changes: 22 additions & 0 deletions demos/calendar/index.html
Original file line number Diff line number Diff line change
@@ -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 &amp; 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

multiple-calendars.html isn't listed, but it looks like it's just a duplicate of multiple-months.html, so we should delete that file.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


</body>
</html>
44 changes: 44 additions & 0 deletions demos/calendar/localization.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar - Localize calendar</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var calendar = $( "#calendar" ),
select = $( "#locale" );

Globalize.locale( select.val() );
calendar.calendar();

select.change( function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extraneous space

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

Globalize.locale( $( this ).val() );
calendar.calendar( "valueAsDate", calendar.calendar( "valueAsDate" ) );
});
});
</script>
</head>
<body>

<div id="calendar"></div>
<select id="locale">
<option value="de-DE" selected>German (Deutsch)</option>
<option value="en">English</option>
</select>

<div class="demo-description">
<p>Localize the calendar 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"calendar calendar"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

</div>
</body>
</html>
17 changes: 12 additions & 5 deletions demos/datepicker/min-max.html → demos/calendar/min-max.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Restrict date range</title>
<title>jQuery UI Calendar - Restrict date range</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,21 +11,28 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
var now = new Date(),
dateMin = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 1 ),
dateMax = new Date( now.getFullYear(), now.getMonth(), now.getDay() + 8 );

$( "#calendar" ).calendar({
min: dateMin,
max: dateMax
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<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>
<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 (new Date(2009, 1 - 1, 26)).</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put the example at the end in <code>.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

</div>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<title>jQuery UI Calendar - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
numberOfMonths: 3,
showButtonPanel: true
});
Expand All @@ -25,10 +25,10 @@
</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>
33 changes: 33 additions & 0 deletions demos/calendar/multiple-months.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Calendar - Display multiple months</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
<script src="../../external/date.js"></script>
<script src="../../external/localization.js"></script>
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#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>
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,12 +11,12 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
eachDay: function( day ) {
if ( day.lead ) {
day.render = true;
Expand All @@ -30,10 +30,10 @@
</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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Show week of the year</title>
<title>jQuery UI Calendar - Show week of the year</title>
<link rel="stylesheet" href="../../themes/base/all.css">
<script src="../../external/jquery/jquery.js"></script>
<script src="../../external/globalize/globalize.js"></script>
Expand All @@ -11,23 +11,23 @@
<script src="../../ui/core.js"></script>
<script src="../../ui/widget.js"></script>
<script src="../../ui/button.js"></script>
<script src="../../ui/calendar.js"></script>
<script src="../../ui/position.js"></script>
<script src="../../ui/datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
$( "#calendar" ).calendar({
showWeek: true
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>
<div id="calendar"></div>

<div class="demo-description">
<p>The datepicker can show the week of the year. The calculation follows
<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>
Expand Down
Loading