Skip to content

Commit c2924c7

Browse files
fnagelfnagel
committed
Calendar: Add calendar widget
Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling.
1 parent 62922fe commit c2924c7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+1738
-2306
lines changed

‎Gruntfile.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ var
2828
"core",
2929
"accordion",
3030
"autocomplete",
31+
"calendar",
3132
"button",
3233
"datepicker",
3334
"dialog",

‎build/tasks/testswarm.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ var versions = {
1414
"Accordion": "accordion/accordion.html",
1515
"Autocomplete": "autocomplete/autocomplete.html",
1616
"Button": "button/button.html",
17+
"Calendar": "calendar/calendar.html",
1718
"Core": "core/core.html",
1819
"Core_deprecated": "core/core_deprecated.html",
1920
"Datepicker": "datepicker/datepicker.html",

‎demos/datepicker/buttonbar.html renamed to ‎demos/calendar/buttonbar.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Display button bar</title>
5+
<title>jQuery UI Calendar - Display button bar</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,20 +11,20 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({
19+
$( "#calendar" ).calendar({
2020
showButtonPanel: true
2121
});
2222
});
2323
</script>
2424
</head>
2525
<body>
2626

27-
<p>Date: <input type="text" id="datepicker"></p>
27+
<div id="calendar"></div>
2828

2929
<div class="demo-description">
3030
<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>

‎demos/datepicker/inline.html renamed to ‎demos/calendar/default.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Display inline</title>
5+
<title>jQuery UI Calendar - Default functionality</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,21 +11,21 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker();
19+
$( "#calendar" ).calendar();
2020
});
2121
</script>
2222
</head>
2323
<body>
2424

25-
Date: <div id="datepicker"></div>
25+
<div id="calendar"></div>
2626

2727
<div class="demo-description">
28-
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
28+
<p>The calendar is a widget for selecting a date using a visual calendar representation.</p>
2929
</div>
3030
</body>
3131
</html>

‎demos/datepicker/dropdown-month-year.html renamed to ‎demos/calendar/dropdown-month-year.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
5+
<title>jQuery UI Calendar - Display month &amp; year menus</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({
19+
$( "#calendar" ).calendar({
2020
changeMonth: true,
2121
changeYear: true
2222
});
@@ -25,7 +25,7 @@
2525
</head>
2626
<body>
2727

28-
<p>Date: <input type="text" id="datepicker"></p>
28+
<div id="calendar"></div>
2929

3030
<div class="demo-description">
3131
<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>

‎demos/calendar/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery UI Calendar Demos</title>
7+
</head>
8+
<body>
9+
10+
<ul>
11+
<li><a href="default.html">Default functionality</a></li>
12+
<li><a href="buttonbar.html">Display button bar</a></li>
13+
<li><a href="dropdown-month-year.html">Display month &amp; year menus</a></li>
14+
<li><a href="localization.html">Localize calendar</a></li>
15+
<li><a href="min-max.html">Restrict date range</a></li>
16+
<li><a href="multiple-months.html">Display multiple months</a></li>
17+
<li><a href="other-months.html">Dates in other months</a></li>
18+
<li><a href="show-week.html">Show week of the year</a></li>
19+
</ul>
20+
21+
</body>
22+
</html>

‎demos/calendar/localization.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Calendar - Localize calendar</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../external/globalize/globalize.js"></script>
9+
<script src="../../external/date.js"></script>
10+
<script src="../../external/localization.js"></script>
11+
<script src="../../ui/core.js"></script>
12+
<script src="../../ui/widget.js"></script>
13+
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
15+
<script src="../../ui/position.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
18+
$(function() {
19+
var calendar = $( "#calendar" ).calendar(),
20+
date = calendar.calendar( "valueAsDate" );
21+
22+
$( "#locale" ).change( function() {
23+
Globalize.locale( $( this ).val() );
24+
calendar.calendar( "valueAsDate", date );
25+
});
26+
});
27+
</script>
28+
</head>
29+
<body>
30+
31+
<div id="calendar"></div>
32+
<select id="locale">
33+
<option value="de-DE" selected>German (Deutsch)</option>
34+
<option value="en">English</option>
35+
</select>
36+
37+
<div class="demo-description">
38+
<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>
39+
</div>
40+
</body>
41+
</html>

‎demos/datepicker/min-max.html renamed to ‎demos/calendar/min-max.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Restrict date range</title>
5+
<title>jQuery UI Calendar - Restrict date range</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,18 +11,18 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
19+
$( "#calendar" ).calendar({ minDate: -20, maxDate: "+1M +10D" });
2020
});
2121
</script>
2222
</head>
2323
<body>
2424

25-
<p>Date: <input type="text" id="datepicker"></p>
25+
<div id="calendar"></div>
2626

2727
<div class="demo-description">
2828
<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>

‎demos/datepicker/multiple-calendars.html renamed to ‎demos/calendar/multiple-calendars.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Display multiple months</title>
5+
<title>jQuery UI Calendar - Display multiple months</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({
19+
$( "#calendar" ).calendar({
2020
numberOfMonths: 3,
2121
showButtonPanel: true
2222
});
@@ -25,10 +25,10 @@
2525
</head>
2626
<body>
2727

28-
<p>Date: <input type="text" id="datepicker"></p>
28+
<div id="calendar"></div>
2929

3030
<div class="demo-description">
31-
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
31+
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
3232
</div>
3333
</body>
3434
</html>

‎demos/calendar/multiple-months.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Calendar - Display multiple months</title>
6+
<link rel="stylesheet" href="../../themes/base/all.css">
7+
<script src="../../external/jquery/jquery.js"></script>
8+
<script src="../../external/globalize/globalize.js"></script>
9+
<script src="../../external/date.js"></script>
10+
<script src="../../external/localization.js"></script>
11+
<script src="../../ui/core.js"></script>
12+
<script src="../../ui/widget.js"></script>
13+
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
15+
<script src="../../ui/position.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
18+
$(function() {
19+
$( "#calendar" ).calendar({
20+
numberOfMonths: 3
21+
});
22+
});
23+
</script>
24+
</head>
25+
<body>
26+
27+
<div id="calendar"></div>
28+
29+
<div class="demo-description">
30+
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
31+
</div>
32+
</body>
33+
</html>

‎demos/datepicker/other-months.html renamed to ‎demos/calendar/other-months.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Dates in other months</title>
5+
<title>jQuery UI Calendar - Dates in other months</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,12 +11,12 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({
19+
$( "#calendar" ).calendar({
2020
eachDay: function( day ) {
2121
if ( day.lead ) {
2222
day.render = true;
@@ -30,10 +30,10 @@
3030
</head>
3131
<body>
3232

33-
<p>Date: <input type="text" id="datepicker"></p>
33+
<div id="calendar"></div>
3434

3535
<div class="demo-description">
36-
<p>The datepicker can show dates that come from other than the main month
36+
<p>The calendar can show dates that come from other than the main month
3737
being displayed. These other dates can also be made selectable.</p>
3838
</div>
3939
</body>

‎demos/datepicker/show-week.html renamed to ‎demos/calendar/show-week.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Datepicker - Show week of the year</title>
5+
<title>jQuery UI Calendar - Show week of the year</title>
66
<link rel="stylesheet" href="../../themes/base/all.css">
77
<script src="../../external/jquery/jquery.js"></script>
88
<script src="../../external/globalize/globalize.js"></script>
@@ -11,23 +11,23 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
15-
<script src="../../ui/datepicker.js"></script>
1616
<link rel="stylesheet" href="../demos.css">
1717
<script>
1818
$(function() {
19-
$( "#datepicker" ).datepicker({
19+
$( "#calendar" ).calendar({
2020
showWeek: true
2121
});
2222
});
2323
</script>
2424
</head>
2525
<body>
2626

27-
<p>Date: <input type="text" id="datepicker"></p>
27+
<div id="calendar"></div>
2828

2929
<div class="demo-description">
30-
<p>The datepicker can show the week of the year. The calculation follows
30+
<p>The calendar can show the week of the year. The calculation follows
3131
<a href="http://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table">Unicode CLDR specification</a>.
3232
This means that some days from one year may be placed into weeks 'belonging' to another year.</p>
3333
</div>

‎demos/datepicker/alt-field.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@
1111
<script src="../../ui/core.js"></script>
1212
<script src="../../ui/widget.js"></script>
1313
<script src="../../ui/button.js"></script>
14+
<script src="../../ui/calendar.js"></script>
1415
<script src="../../ui/position.js"></script>
1516
<script src="../../ui/datepicker.js"></script>
1617
<link rel="stylesheet" href="../demos.css">
1718
<script>
1819
$(function() {
1920
$( "#datepicker" ).datepicker({
20-
select: function( event, ui ) {
21-
var date = Globalize.parseDate( ui.date, { date: "short" } );
21+
select: function( event ) {
22+
var date = $( "#datepicker" ).datepicker( "valueAsDate" );
2223
$( "#alternate" ).val( Globalize.format( date, { date: "long" } ) );
2324
}
2425
});

‎demos/datepicker/animation.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<script src="../../ui/effect-fold.js"></script>
1919
<script src="../../ui/effect-slide.js"></script>
2020
<script src="../../ui/button.js"></script>
21+
<script src="../../ui/calendar.js"></script>
2122
<script src="../../ui/position.js"></script>
2223
<script src="../../ui/datepicker.js"></script>
2324
<link rel="stylesheet" href="../demos.css">

0 commit comments

Comments
 (0)