mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
236 lines
8.5 KiB
JavaScript
236 lines
8.5 KiB
JavaScript
(function( $ ) {
|
|
|
|
module( "datepicker: options" );
|
|
|
|
test( "appendTo", function() {
|
|
expect( 6 );
|
|
var container,
|
|
detached = $( "<div>" ),
|
|
input = $( "#datepicker" );
|
|
|
|
input.datepicker();
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, document.body, "defaults to body" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input.datepicker({ appendTo: "#qunit-fixture" });
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, $( "#qunit-fixture" )[ 0 ], "child of specified element" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input.datepicker({ appendTo: "#does-not-exist" });
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, document.body, "set to body if element does not exist" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input.datepicker()
|
|
.datepicker( "option", "appendTo", "#qunit-fixture" );
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, $( "#qunit-fixture" )[ 0 ], "modified after init" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input.datepicker({ appendTo: detached });
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, detached[ 0 ], "detached jQuery object" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input.datepicker({ appendTo: detached[ 0 ] });
|
|
container = input.datepicker( "widget" ).parent()[ 0 ];
|
|
equal( container, detached[ 0 ], "detached DOM element" );
|
|
input.datepicker( "destroy" );
|
|
});
|
|
|
|
test("buttons", function() {
|
|
expect( 3 );
|
|
|
|
var button,
|
|
buttons = {
|
|
"Ok": function() {},
|
|
"Cancel": function() {}
|
|
},
|
|
element = $( "#datepicker" ).datepicker({ buttons: buttons });
|
|
|
|
button = element.datepicker( "widget" ).find( ".ui-calendar-buttonpane button" );
|
|
equal( button.length, 2, "number of buttons" );
|
|
ok( button.parent().hasClass( "ui-calendar-buttonset" ), "buttons in container");
|
|
ok( element.datepicker( "widget" ).hasClass( "ui-calendar-buttons" ), "calendar wrapper adds class about having buttons" );
|
|
});
|
|
|
|
test( "dateFormat", function() {
|
|
expect( 2 );
|
|
var input = $( "#datepicker" ).val( "1/1/14" ).datepicker(),
|
|
picker = input.datepicker( "widget" ),
|
|
firstDayLink = picker.find( "td[id]:first a" );
|
|
|
|
input.datepicker( "open" );
|
|
firstDayLink.trigger( "mousedown" );
|
|
equal( input.val(), "1/1/14", "default formatting" );
|
|
|
|
input.datepicker( "option", "dateFormat", { date: "full" } );
|
|
equal( input.val(), "Wednesday, January 1, 2014", "updated formatting" );
|
|
|
|
input.datepicker( "destroy" );
|
|
});
|
|
|
|
test( "eachDay", function() {
|
|
expect( 5 );
|
|
var timestamp,
|
|
input = $( "#datepicker" ).datepicker(),
|
|
picker = input.datepicker( "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( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );
|
|
|
|
// Do not render the 1st of the month
|
|
input.datepicker( "option", "eachDay", function( day ) {
|
|
if ( day.date === 1 ) {
|
|
day.render = false;
|
|
}
|
|
});
|
|
firstCell = picker.find( "td[id]:first" );
|
|
timestamp = parseInt( firstCell.find( "a" ).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.
|
|
input.datepicker( "option", "eachDay", function( day ) {
|
|
if ( day.date === 1 ) {
|
|
day.selectable = false;
|
|
}
|
|
});
|
|
firstCell = picker.find( "td[id]:first" );
|
|
equal( firstCell.find( "a" ).length, 0, "the 1st is not selectable" );
|
|
|
|
input.datepicker( "option", "eachDay", function( day ) {
|
|
if ( day.date === 1 ) {
|
|
day.extraClasses = "ui-custom";
|
|
}
|
|
});
|
|
ok( picker.find( "td[id]:first a" ).hasClass( "ui-custom" ), "extraClasses applied" );
|
|
|
|
input.datepicker( "destroy" );
|
|
});
|
|
|
|
asyncTest( "position", function() {
|
|
expect( 3 );
|
|
var input = $( "<input>" ).datepicker().appendTo( "body" ).css({
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0
|
|
}),
|
|
container = input.datepicker( "widget" );
|
|
|
|
input.datepicker( "open" );
|
|
setTimeout(function() {
|
|
closeEnough( input.offset().left, container.offset().left, 1, "left sides line up by default" );
|
|
closeEnough( container.offset().top, input.offset().top + input.outerHeight(), 1,
|
|
"datepicker directly under input by default" );
|
|
|
|
// Change the position option using option()
|
|
input.datepicker( "option", "position", {
|
|
my: "left top",
|
|
at: "right bottom"
|
|
});
|
|
closeEnough( container.offset().left, input.offset().left + input.outerWidth(), 1,
|
|
"datepicker on right hand side of input after position change" );
|
|
|
|
input.remove();
|
|
start();
|
|
});
|
|
});
|
|
|
|
test( "showWeek", function() {
|
|
expect( 7 );
|
|
var input = $( "#datepicker" ).datepicker(),
|
|
container = input.datepicker( "widget" );
|
|
|
|
equal( container.find( "thead th" ).length, 7, "just 7 days, no column cell" );
|
|
equal( container.find( ".ui-calendar-week-col" ).length, 0,
|
|
"no week column cells present" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input = $( "#datepicker" ).datepicker({ showWeek: true });
|
|
container = input.datepicker( "widget" );
|
|
equal( container.find( "thead th" ).length, 8, "7 days + a column cell" );
|
|
ok( container.find( "thead th:first" ).is( ".ui-calendar-week-col" ),
|
|
"first cell should have ui-calendar-week-col class name" );
|
|
equal( container.find( ".ui-calendar-week-col" ).length,
|
|
container.find( "tr" ).length, "one week cell for each week" );
|
|
input.datepicker( "destroy" );
|
|
|
|
input = $( "#datepicker" ).datepicker();
|
|
container = input.datepicker( "widget" );
|
|
equal( container.find( "thead th" ).length, 7, "no week column" );
|
|
input.datepicker( "option", "showWeek", true );
|
|
equal( container.find( "thead th" ).length, 8, "supports changing option after init" );
|
|
});
|
|
|
|
test( "min / max", function() {
|
|
expect( 14 );
|
|
|
|
var inp = TestHelpers.datepicker.init( "#datepicker" ),
|
|
minDate = new Date( 2008, 2 - 1, 29 ),
|
|
maxDate = new Date( 2008, 12 - 1, 7 );
|
|
|
|
inp.val( "6/4/08" ).datepicker( "option", { min: minDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min" );
|
|
ok( inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { min: null } ).val( "1/4/08" ).datepicker( "option", { min: minDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ), "Min/max - value < min" );
|
|
ok( !inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { min: null } ).val( "6/4/08" ).datepicker( "option", { max: maxDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value < max" );
|
|
ok( inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { max: null } ).val( "1/4/09" ).datepicker( "option", { max: maxDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2009, 1 - 1, 4 ), "Min/max - setDate > max" );
|
|
ok( !inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { max: null } ).val( "1/4/08" ).datepicker( "option", { min: minDate, max: maxDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 1 - 1, 4 ), "Min/max - value < min" );
|
|
ok( !inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { max: null } ).val( "6/4/08" ).datepicker( "option", { min: minDate, max: maxDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2008, 6 - 1, 4 ), "Min/max - value > min, < max" );
|
|
ok( inp.datepicker( "isValid" ) );
|
|
|
|
inp.datepicker( "option", { max: null } ).val( "1/4/09" ).datepicker( "option", { min: minDate, max: maxDate } );
|
|
TestHelpers.datepicker.equalsDate( inp.datepicker( "valueAsDate" ), new Date( 2009, 1 - 1, 4 ), "Min/max - value > max" );
|
|
ok( !inp.datepicker( "isValid" ) );
|
|
});
|
|
|
|
test( "Stop datepicker from appearing with beforeOpen event handler", function() {
|
|
expect( 3 );
|
|
|
|
var input = TestHelpers.datepicker.init( "#datepicker", {
|
|
beforeOpen: function() {}
|
|
});
|
|
|
|
input.datepicker( "open" );
|
|
ok( input.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns nothing" );
|
|
input.datepicker( "close" ).datepicker( "destroy" );
|
|
|
|
input = TestHelpers.datepicker.init( "#datepicker", {
|
|
beforeOpen: function() {
|
|
return true;
|
|
}
|
|
});
|
|
input.datepicker( "open" );
|
|
ok( input.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns true" );
|
|
input.datepicker( "close" ).datepicker( "destroy" );
|
|
|
|
input = TestHelpers.datepicker.init( "#datepicker", {
|
|
beforeOpen: function() {
|
|
return false;
|
|
}
|
|
});
|
|
input.datepicker( "open" );
|
|
ok( !input.datepicker( "widget" ).is( ":visible" ), "beforeOpen returns false" );
|
|
input.datepicker( "destroy" );
|
|
});
|
|
|
|
})(jQuery);
|