Skip to content

Calendar: minor fixes #1432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Calendar: minor fixes #1432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e87e6ac
Datepicker: Make Calendar pass-through options more dynamic
fnagel Jan 20, 2015
cf3e574
Datepicker: Remove whitespace
fnagel Jan 20, 2015
8cbbe1e
Calendar: Use button instead of link elements for day items
fnagel Jan 20, 2015
854fc85
Calendar: Fix border style for multiple months
fnagel Jan 20, 2015
0fd288f
Calendar: Clean up styles, add comments
fnagel Jan 30, 2015
54aec0c
Calendar: Adjust styles to match theme changes
fnagel Jan 30, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions tests/unit/calendar/calendar_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ asyncTest( "mouse", function() {
date = new Date();

function step1() {
$( "tbody a:contains(10)", element ).simulate( "mousedown" );
$( "tbody button:contains(10)", element ).simulate( "mousedown" );
date.setDate( 10 );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
Expand All @@ -315,7 +315,7 @@ asyncTest( "mouse", function() {
);

element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
$( ".ui-calendar-calendar tbody a:contains(12)", element ).simulate( "mousedown" );
$( ".ui-calendar-calendar tbody button:contains(12)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 12 ),
Expand All @@ -325,7 +325,7 @@ asyncTest( "mouse", function() {
// Previous/next
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
$( ".ui-calendar-prev", element ).simulate( "click" );
$( ".ui-calendar-calendar tbody a:contains(16)", element ).simulate( "mousedown" );
$( ".ui-calendar-calendar tbody button:contains(16)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
new Date( 2008, 1 - 1, 16 ),
Expand All @@ -334,7 +334,7 @@ asyncTest( "mouse", function() {

element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
$( ".ui-calendar-next", element ).simulate( "click" );
$( ".ui-calendar-calendar tbody a:contains(18)", element ).simulate( "mousedown" );
$( ".ui-calendar-calendar tbody button:contains(18)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
new Date( 2008, 3 - 1, 18 ),
Expand All @@ -354,7 +354,7 @@ asyncTest( "mouse", function() {
});

$( ".ui-calendar-prev", element ).simulate( "click" );
$( "tbody a:contains(16)", element ).simulate( "mousedown" );
$( "tbody button:contains(16)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 16 ),
Expand All @@ -372,7 +372,7 @@ asyncTest( "mouse", function() {
});

$( ".ui-calendar-next", element ).simulate( "click" );
$( "tbody a:contains(18)", element ).simulate( "mousedown" );
$( "tbody button:contains(18)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 18 ),
Expand Down
10 changes: 8 additions & 2 deletions tests/unit/calendar/calendar_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,10 @@ test( "value", function() {
var element = $( "#calendar" ).calendar();

element.calendar( "value", "1/1/14" );
ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "first day marked as selected" );
ok( element.find( "button[data-timestamp]:first" )
.hasClass( "ui-state-active" ),
"first day marked as selected"
);
equal( element.calendar( "value" ), "1/1/14", "getter" );

element.calendar( "value", "abc" );
Expand All @@ -58,7 +61,10 @@ test( "valueAsDate", function() {
date2;

element.calendar( "valueAsDate", new Date( 2014, 0, 1 ) );
ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "First day marked as selected" );
ok( element.find( "button[data-timestamp]:first" )
.hasClass( "ui-state-active" ),
"First day marked as selected"
);
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );

element.calendar( "destroy" );
Expand Down
12 changes: 6 additions & 6 deletions tests/unit/calendar/calendar_options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ test( "dateFormat", function() {
var element = $( "#calendar" ).calendar({
value: "1/1/14"
}),
firstDayLink = element.calendar( "widget" ).find( "td[id]:first a" );
firstDayLink = element.calendar( "widget" ).find( "td[id]:first button" );

firstDayLink.trigger( "mousedown" );
equal( element.calendar( "value" ), "1/1/14", "default formatting" );
Expand All @@ -128,8 +128,8 @@ test( "eachDay", function() {
picker = input.calendar( "widget" ),
firstCell = picker.find( "td[id]:first" );

equal( firstCell.find( "a" ).length, 1, "days are selectable by default" );
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
equal( firstCell.find( "button" ).length, 1, "days are selectable by default" );
timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );

// Do not render the 1st of the month
Expand All @@ -139,7 +139,7 @@ test( "eachDay", function() {
}
});
firstCell = picker.find( "td[id]:first" );
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
equal( new Date( timestamp ).getDate(), 2, "first available day is the 2nd" );

// Display the 1st of the month but make it not selectable.
Expand All @@ -149,14 +149,14 @@ test( "eachDay", function() {
}
});
firstCell = picker.find( "td[id]:first" );
equal( firstCell.find( "a" ).length, 0, "the 1st is not selectable" );
ok( firstCell.find( "button" ).prop( "disabled" ), "the 1st is not selectable" );

input.calendar( "option", "eachDay", function( day ) {
if ( day.date === 1 ) {
day.extraClasses = "ui-custom";
}
});
ok( picker.find( "td[id]:first a" ).hasClass( "ui-custom" ), "extraClasses applied" );
ok( picker.find( "td[id]:first button" ).hasClass( "ui-custom" ), "extraClasses applied" );

input.calendar( "destroy" );
});
Expand Down
2 changes: 1 addition & 1 deletion tests/unit/datepicker/datepicker_core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ asyncTest( "mouse", function() {

setTimeout(function() {
input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" );
$( ".ui-calendar-calendar tbody a:contains(12)", picker ).simulate( "mousedown", {} );
$( ".ui-calendar-calendar tbody button:contains(12)", picker ).simulate( "mousedown", {} );
TestHelpers.datepicker.equalsDate(
input.datepicker( "valueAsDate" ),
new Date( 2008, 4 - 1, 12 ),
Expand Down
4 changes: 2 additions & 2 deletions tests/unit/datepicker/datepicker_events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ test( "close", function() {
shouldFire = false;
input.datepicker( "open" );
shouldFire = true;
input.datepicker( "widget" ).find( "tbody tr:first a:first" ).simulate( "mousedown" );
input.datepicker( "widget" ).find( "tbody tr:first button:first" ).simulate( "mousedown" );
});

test( "open", function() {
Expand Down Expand Up @@ -96,7 +96,7 @@ asyncTest( "select", function() {
.simulate( "focus" )
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
setTimeout(function() {
widget.find( "tbody tr:first a:first" ).simulate( "mousedown" );
widget.find( "tbody tr:first button:first" ).simulate( "mousedown" );
input.datepicker( "close" );
step2();
}, 100 );
Expand Down
10 changes: 8 additions & 2 deletions tests/unit/datepicker/datepicker_methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,10 @@ test( "value", function() {
equal( input.val(), "1/1/14", "input's value set" );

input.datepicker( "open" );
ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "first day marked as selected" );
ok(
picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
"first day marked as selected"
);
equal( input.datepicker( "value" ), "1/1/14", "getter" );

input.val( "abc" );
Expand All @@ -88,7 +91,10 @@ test( "valueAsDate", function() {

input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
equal( input.val(), "1/1/14", "Input's value set" );
ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "First day marked as selected" );
ok(
picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
"First day marked as selected"
);
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );

input.val( "a/b/c" );
Expand Down
61 changes: 19 additions & 42 deletions themes/base/calendar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
width: 17em;
padding: .2em .2em 0;
}

/* calendar header */
.ui-calendar .ui-calendar-header {
position: relative;
padding: .2em 0;
Expand All @@ -21,30 +23,20 @@
cursor: pointer;
position: absolute;
top: 2px;
width: 19px;
height: 18px;
width: 36px;
height: 31px;
}
.ui-calendar .ui-calendar-prev:not(.ui-state-hover):not(.ui-state-focus),
.ui-calendar .ui-calendar-next:not(.ui-state-hover):not(.ui-state-focus) {
background: none;
border: none;
}
.ui-calendar .ui-calendar-prev-hover,
.ui-calendar .ui-calendar-next-hover {
top: 1px;
}
.ui-calendar .ui-calendar-prev {
left: 2px;
}
.ui-calendar .ui-calendar-next {
right: 2px;
}
.ui-calendar .ui-calendar-prev-hover {
left: 1px;
}
.ui-calendar .ui-calendar-next-hover {
right: 1px;
}
.ui-calendar .ui-calendar-prev .ui-icon,
.ui-calendar .ui-calendar-next .ui-icon {
display: block;
Expand All @@ -58,14 +50,8 @@
line-height: 1.8em;
text-align: center;
}
.ui-calendar .ui-calendar-title select {
font-size: 1em;
margin: 1px 0;
}
.ui-calendar select.ui-calendar-month,
.ui-calendar select.ui-calendar-year {
width: 49%;
}

/* calendar grid */
.ui-calendar table {
width: 100%;
font-size: .9em;
Expand All @@ -82,13 +68,22 @@
border: 0;
padding: 1px;
}
.ui-calendar td span,
.ui-calendar td a {
.ui-calendar td button {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
cursor: pointer;
width: 100%;
}
.ui-calendar td button::-moz-focus-inner {
padding: 0;
border: 0;
}
.ui-calendar .ui-state-disabled button {
cursor: default;
}

/* button pane */
.ui-calendar .ui-calendar-buttonpane {
background-image: none;
margin: .7em 0 0 0;
Expand All @@ -115,25 +110,13 @@
display: inline-block;
}
.ui-calendar-multi .ui-calendar-group {
width: 17em;
float: left;
}
.ui-calendar-multi .ui-calendar-group table {
width: 95%;
margin: 0 2.5% .4em;
}
.ui-calendar-multi-2 .ui-calendar-group {
width: 50%;
}
.ui-calendar-multi-3 .ui-calendar-group {
width: 33.3%;
}
.ui-calendar-multi-4 .ui-calendar-group {
width: 25%;
}
.ui-calendar-multi .ui-calendar-group-last .ui-calendar-header,
.ui-calendar-multi .ui-calendar-group-middle .ui-calendar-header {
border-left-width: 0;
}
.ui-calendar-multi .ui-calendar-buttonpane {
clear: left;
}
Expand Down Expand Up @@ -173,9 +156,3 @@
.ui-calendar-rtl .ui-calendar-group {
float: right;
}
.ui-calendar-rtl .ui-calendar-group-last .ui-calendar-header,
.ui-calendar-rtl .ui-calendar-group-middle .ui-calendar-header {
border-right-width: 0;
border-left-width: 1px;
}

27 changes: 14 additions & 13 deletions ui/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ return $.widget( "ui.calendar", {
this.date.adjust( "M", this.options.numberOfMonths );
this.refresh();
},
"mousedown .ui-calendar-calendar a": function( event ) {
"mousedown .ui-calendar-calendar button": function( event ) {
event.preventDefault();

// TODO Exclude clicks on lead days or handle them correctly
Expand All @@ -85,8 +85,8 @@ return $.widget( "ui.calendar", {
},
"mouseenter .ui-calendar-header button": "_hover",
"mouseleave .ui-calendar-header button": "_hover",
"mouseenter .ui-calendar-calendar a": "_hover",
"mouseleave .ui-calendar-calendar a": "_hover",
"mouseenter .ui-calendar-calendar button": "_hover",
"mouseleave .ui-calendar-calendar button": "_hover",
"keydown .ui-calendar-calendar": "_handleKeydown"
});

Expand Down Expand Up @@ -152,7 +152,7 @@ return $.widget( "ui.calendar", {
.removeClass( "ui-state-focus" );

this.activeDescendant = this.grid.find(
this._sanitizeSelector( "#" + id ) + " > a"
this._sanitizeSelector( "#" + id ) + " > button"
).addClass( "ui-state-focus" );
},

Expand Down Expand Up @@ -191,15 +191,15 @@ return $.widget( "ui.calendar", {

// TODO: Shouldn't we pass date as a parameter to build* fns instead of setting this.date?
this.date = months[ i ];
headerClass = "ui-calendar-header ui-widget-header ui-helper-clearfix";
if ( months[ i ].first ) {
headerClass = "ui-corner-left";
headerClass += " ui-corner-left";
} else if ( months[ i ].last ) {
headerClass = "ui-corner-right";
headerClass += " ui-corner-right";
}

html += "<div class='ui-calendar-group'>" +
"<div class='ui-calendar-header ui-widget-header ui-helper-clearfix " +
headerClass + "'>";
"<div class='" + headerClass + "'>";
if ( months[ i ].first ) {
html += this._buildPreviousLink();
} else if ( months[ i ].last ) {
Expand Down Expand Up @@ -351,8 +351,8 @@ return $.widget( "ui.calendar", {
},

_buildDayElement: function( day, selectable ) {
var classes = [ "ui-state-default" ],
content = "";
var attributes, content,
classes = [ "ui-state-default" ];

if ( day === this.date && selectable ) {
classes.push( "ui-state-focus" );
Expand All @@ -368,12 +368,13 @@ return $.widget( "ui.calendar", {
classes.push( day.extraClasses.split( " " ) );
}

classes = " class='" + classes.join( " " ) + "'";
attributes = " class='" + classes.join( " " ) + "'";
if ( selectable ) {
content = "<a href='#' tabindex='-1' data-timestamp='" + day.timestamp + "'" + classes + ">" + day.date + "</a>";
attributes += " tabindex='-1' data-timestamp='" + day.timestamp + "'";
} else {
content = "<span" + classes + ">" + day.date + "</span>";
attributes += " disabled='disabled'";
}
content = "<button" + attributes + ">" + day.date + "</button>";

if ( day.today ) {
content += "<span class='ui-helper-hidden-accessible'>, " + this._getTranslation( "currentText" ) + "</span>";
Expand Down
Loading