library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Calendar: Use button instead of link elements for day items

Browse Source 
Ref gh-1432
This commit is contained in:
Felix Nagel 2015-01-20 18:23:49 +01:00 committed by Scott González
parent a5734cdd4d
commit 11c1735275
8 changed files with 51 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tests/unit/calendar/calendar_core.js
View File

@ -306,7 +306,7 @@ asyncTest( "mouse", function() {
date = new Date(); date = new Date();
function step1() { function step1() {
$( "tbody a:contains(10)", element ).simulate( "mousedown" ); $( "tbody button:contains(10)", element ).simulate( "mousedown" );
date.setDate( 10 ); date.setDate( 10 );
TestHelpers.calendar.equalsDate( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
@ -315,7 +315,7 @@ asyncTest( "mouse", function() {
); );
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); 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( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 12 ), new Date( 2008, 2 - 1, 12 ),
@ -325,7 +325,7 @@ asyncTest( "mouse", function() {
// Previous/next // Previous/next
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
$( ".ui-calendar-prev", element ).simulate( "click" ); $( ".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( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
new Date( 2008, 1 - 1, 16 ), new Date( 2008, 1 - 1, 16 ),
@ -334,7 +334,7 @@ asyncTest( "mouse", function() {
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) ); element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
$( ".ui-calendar-next", element ).simulate( "click" ); $( ".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( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
new Date( 2008, 3 - 1, 18 ), new Date( 2008, 3 - 1, 18 ),
@ -354,7 +354,7 @@ asyncTest( "mouse", function() {
}); });
$( ".ui-calendar-prev", element ).simulate( "click" ); $( ".ui-calendar-prev", element ).simulate( "click" );
$( "tbody a:contains(16)", element ).simulate( "mousedown" ); $( "tbody button:contains(16)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 16 ), new Date( 2008, 2 - 1, 16 ),
@ -372,7 +372,7 @@ asyncTest( "mouse", function() {
}); });
$( ".ui-calendar-next", element ).simulate( "click" ); $( ".ui-calendar-next", element ).simulate( "click" );
$( "tbody a:contains(18)", element ).simulate( "mousedown" ); $( "tbody button:contains(18)", element ).simulate( "mousedown" );
TestHelpers.calendar.equalsDate( TestHelpers.calendar.equalsDate(
element.calendar( "valueAsDate" ), element.calendar( "valueAsDate" ),
new Date( 2008, 2 - 1, 18 ), new Date( 2008, 2 - 1, 18 ),

10
tests/unit/calendar/calendar_methods.js
View File

@ -42,7 +42,10 @@ test( "value", function() {
var element = $( "#calendar" ).calendar(); var element = $( "#calendar" ).calendar();
element.calendar( "value", "1/1/14" ); 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" ); equal( element.calendar( "value" ), "1/1/14", "getter" );
element.calendar( "value", "abc" ); element.calendar( "value", "abc" );
@ -58,7 +61,10 @@ test( "valueAsDate", function() {
date2; date2;
element.calendar( "valueAsDate", new Date( 2014, 0, 1 ) ); 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" ); TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
element.calendar( "destroy" ); element.calendar( "destroy" );

12
tests/unit/calendar/calendar_options.js
View File

@ -112,7 +112,7 @@ test( "dateFormat", function() {
var element = $( "#calendar" ).calendar({ var element = $( "#calendar" ).calendar({
value: "1/1/14" 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" ); firstDayLink.trigger( "mousedown" );
equal( element.calendar( "value" ), "1/1/14", "default formatting" ); equal( element.calendar( "value" ), "1/1/14", "default formatting" );
@ -128,8 +128,8 @@ test( "eachDay", function() {
picker = input.calendar( "widget" ), picker = input.calendar( "widget" ),
firstCell = picker.find( "td[id]:first" ); firstCell = picker.find( "td[id]:first" );
equal( firstCell.find( "a" ).length, 1, "days are selectable by default" ); equal( firstCell.find( "button" ).length, 1, "days are selectable by default" );
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 ); timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" ); equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );
// Do not render the 1st of the month // Do not render the 1st of the month
@ -139,7 +139,7 @@ test( "eachDay", function() {
} }
}); });
firstCell = picker.find( "td[id]:first" ); 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" ); equal( new Date( timestamp ).getDate(), 2, "first available day is the 2nd" );
// Display the 1st of the month but make it not selectable. // Display the 1st of the month but make it not selectable.
@ -149,14 +149,14 @@ test( "eachDay", function() {
} }
}); });
firstCell = picker.find( "td[id]:first" ); 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 ) { input.calendar( "option", "eachDay", function( day ) {
if ( day.date === 1 ) { if ( day.date === 1 ) {
day.extraClasses = "ui-custom"; 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" ); input.calendar( "destroy" );
}); });

2
tests/unit/datepicker/datepicker_core.js
View File

@ -136,7 +136,7 @@ asyncTest( "mouse", function() {
setTimeout(function() { setTimeout(function() {
input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" ); 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( TestHelpers.datepicker.equalsDate(
input.datepicker( "valueAsDate" ), input.datepicker( "valueAsDate" ),
new Date( 2008, 4 - 1, 12 ), new Date( 2008, 4 - 1, 12 ),

4
tests/unit/datepicker/datepicker_events.js
View File

@ -57,7 +57,7 @@ test( "close", function() {
shouldFire = false; shouldFire = false;
input.datepicker( "open" ); input.datepicker( "open" );
shouldFire = true; 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() { test( "open", function() {
@ -96,7 +96,7 @@ asyncTest( "select", function() {
.simulate( "focus" ) .simulate( "focus" )
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); .simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
setTimeout(function() { setTimeout(function() {
widget.find( "tbody tr:first a:first" ).simulate( "mousedown" ); widget.find( "tbody tr:first button:first" ).simulate( "mousedown" );
input.datepicker( "close" ); input.datepicker( "close" );
step2(); step2();
}, 100 ); }, 100 );

10
tests/unit/datepicker/datepicker_methods.js
View File

@ -72,7 +72,10 @@ test( "value", function() {
equal( input.val(), "1/1/14", "input's value set" ); equal( input.val(), "1/1/14", "input's value set" );
input.datepicker( "open" ); 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" ); equal( input.datepicker( "value" ), "1/1/14", "getter" );
input.val( "abc" ); input.val( "abc" );
@ -88,7 +91,10 @@ test( "valueAsDate", function() {
input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) ); input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
equal( input.val(), "1/1/14", "Input's value set" ); 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" ); TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
input.val( "a/b/c" ); input.val( "a/b/c" );

13
themes/base/calendar.css
View File

@ -82,12 +82,19 @@
border: 0; border: 0;
padding: 1px; padding: 1px;
} }
.ui-calendar td span, .ui-calendar td button {
.ui-calendar td a {
display: block; display: block;
padding: .2em; padding: .2em;
text-align: right; 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;
} }
.ui-calendar .ui-calendar-buttonpane { .ui-calendar .ui-calendar-buttonpane {
background-image: none; background-image: none;

19
ui/calendar.js
View File

@ -75,7 +75,7 @@ return $.widget( "ui.calendar", {
this.date.adjust( "M", this.options.numberOfMonths ); this.date.adjust( "M", this.options.numberOfMonths );
this.refresh(); this.refresh();
}, },
"mousedown .ui-calendar-calendar a": function( event ) { "mousedown .ui-calendar-calendar button": function( event ) {
event.preventDefault(); event.preventDefault();
// TODO Exclude clicks on lead days or handle them correctly // TODO Exclude clicks on lead days or handle them correctly
@ -85,8 +85,8 @@ return $.widget( "ui.calendar", {
}, },
"mouseenter .ui-calendar-header button": "_hover", "mouseenter .ui-calendar-header button": "_hover",
"mouseleave .ui-calendar-header button": "_hover", "mouseleave .ui-calendar-header button": "_hover",
"mouseenter .ui-calendar-calendar a": "_hover", "mouseenter .ui-calendar-calendar button": "_hover",
"mouseleave .ui-calendar-calendar a": "_hover", "mouseleave .ui-calendar-calendar button": "_hover",
"keydown .ui-calendar-calendar": "_handleKeydown" "keydown .ui-calendar-calendar": "_handleKeydown"
}); });
@ -152,7 +152,7 @@ return $.widget( "ui.calendar", {
.removeClass( "ui-state-focus" ); .removeClass( "ui-state-focus" );
this.activeDescendant = this.grid.find( this.activeDescendant = this.grid.find(
this._sanitizeSelector( "#" + id ) + " > a" this._sanitizeSelector( "#" + id ) + " > button"
).addClass( "ui-state-focus" ); ).addClass( "ui-state-focus" );
}, },
@ -351,8 +351,8 @@ return $.widget( "ui.calendar", {
}, },
_buildDayElement: function( day, selectable ) { _buildDayElement: function( day, selectable ) {
var classes = [ "ui-state-default" ], var attributes, content,
content = ""; classes = [ "ui-state-default" ];
if ( day === this.date && selectable ) { if ( day === this.date && selectable ) {
classes.push( "ui-state-focus" ); classes.push( "ui-state-focus" );
@ -368,12 +368,13 @@ return $.widget( "ui.calendar", {
classes.push( day.extraClasses.split( " " ) ); classes.push( day.extraClasses.split( " " ) );
} }
classes = " class='" + classes.join( " " ) + "'"; attributes = " class='" + classes.join( " " ) + "'";
if ( selectable ) { if ( selectable ) {
content = "<a href='#' tabindex='-1' data-timestamp='" + day.timestamp + "'" + classes + ">" + day.date + "</a>"; attributes += " tabindex='-1' data-timestamp='" + day.timestamp + "'";
} else { } else {
content = "<span" + classes + ">" + day.date + "</span>"; attributes += " disabled='disabled'";
} }
content = "<button" + attributes + ">" + day.date + "</button>";
if ( day.today ) { if ( day.today ) {
content += "<span class='ui-helper-hidden-accessible'>, " + this._getTranslation( "currentText" ) + "</span>"; content += "<span class='ui-helper-hidden-accessible'>, " + this._getTranslation( "currentText" ) + "</span>";