module('Events', {
setup: function(){
this.input = $('')
.appendTo('#qunit-fixture')
.datepicker({format: "dd-mm-yyyy"})
.focus(); // Activate for visibility checks
this.dp = this.input.data('datepicker')
this.picker = this.dp.picker;
},
teardown: function(){
this.picker.remove();
}
});
test('Selecting a year from decade view triggers changeYear', function(){
var target,
triggered = 0;
this.input.on('changeYear', function(){
triggered++;
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days thead th.datepicker-switch');
ok(target.is(':visible'), 'View switcher is visible');
target.click();
ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
equal(this.dp.viewMode, 1);
// Not modified when switching modes
datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
target = this.picker.find('.datepicker-months thead th.datepicker-switch');
ok(target.is(':visible'), 'View switcher is visible');
target.click();
ok(this.picker.find('.datepicker-years').is(':visible'), 'Year picker is visible');
equal(this.dp.viewMode, 2);
// Not modified when switching modes
datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
// Change years to test internal state changes
target = this.picker.find('.datepicker-years tbody span:contains(2010)');
target.click();
equal(this.dp.viewMode, 1);
// Only viewDate modified
datesEqual(this.dp.viewDate, UTCDate(2010, 2, 1));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
equal(triggered, 1);
});
test('Navigating forward/backward from month view triggers changeYear', function(){
var target,
triggered = 0;
this.input.on('changeYear', function(){
triggered++;
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days thead th.datepicker-switch');
ok(target.is(':visible'), 'View switcher is visible');
target.click();
ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
equal(this.dp.viewMode, 1);
target = this.picker.find('.datepicker-months thead th.prev');
ok(target.is(':visible'), 'Prev switcher is visible');
target.click();
ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
equal(triggered, 1);
target = this.picker.find('.datepicker-months thead th.next');
ok(target.is(':visible'), 'Next switcher is visible');
target.click();
ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
equal(triggered, 2);
});
test('Selecting a month from year view triggers changeMonth', function(){
var target,
triggered = 0;
this.input.on('changeMonth', function(){
triggered++;
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days thead th.datepicker-switch');
ok(target.is(':visible'), 'View switcher is visible');
target.click();
ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
equal(this.dp.viewMode, 1);
// Not modified when switching modes
datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
target = this.picker.find('.datepicker-months tbody span:contains(Apr)');
target.click();
equal(this.dp.viewMode, 0);
// Only viewDate modified
datesEqual(this.dp.viewDate, UTCDate(2011, 3, 1));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
equal(triggered, 1);
});
test('Navigating forward/backward from month view triggers changeMonth', function(){
var target,
triggered = 0;
this.input.on('changeMonth', function(){
triggered++;
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days thead th.prev');
ok(target.is(':visible'), 'Prev switcher is visible');
target.click();
ok(this.picker.find('.datepicker-days').is(':visible'), 'Day picker is visible');
equal(triggered, 1);
target = this.picker.find('.datepicker-days thead th.next');
ok(target.is(':visible'), 'Next switcher is visible');
target.click();
ok(this.picker.find('.datepicker-days').is(':visible'), 'Day picker is visible');
equal(triggered, 2);
});
test('format() returns a formatted date string', function(){
var target,
error, out;
this.input.on('changeDate', function(e){
try{
out = e.format();
}
catch(e){
error = e;
}
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days tbody td:nth(15)');
target.click();
datesEqual(this.dp.viewDate, UTCDate(2011, 2, 14));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 14));
equal(error, undefined)
equal(out, '14-03-2011');
});
test('format(altformat) returns a formatted date string', function(){
var target,
error, out;
this.input.on('changeDate', function(e){
try{
out = e.format('m/d/yy');
}
catch(e){
error = e;
}
});
equal(this.dp.viewMode, 0);
target = this.picker.find('.datepicker-days tbody td:nth(15)');
target.click();
datesEqual(this.dp.viewDate, UTCDate(2011, 2, 14));
datesEqual(this.dp.dates[0], UTCDate(2011, 2, 14));
equal(error, undefined)
equal(out, '3/14/11');
});
test('format(ix) returns a formatted date string of the ix\'th date selected', function(){
var target,
error, out;
this.dp._process_options({multidate: true});
this.input.on('changeDate', function(e){
try{
out = e.format(2);
}
catch(e){
error = e;
}
});
target = this.picker.find('.datepicker-days tbody td:nth(7)');
equal(target.text(), '6'); // Mar 6
target.click();
target = this.picker.find('.datepicker-days tbody td:nth(15)');
equal(target.text(), '14'); // Mar 16
target.click();
equal(this.dp.dates.length, 3);
equal(error, undefined);
equal(out, '14-03-2011');
});
test('format(ix, altformat) returns a formatted date string', function(){
var target,
error, out;
this.dp._process_options({multidate: true});
this.input.on('changeDate', function(e){
try{
out = e.format(2, 'm/d/yy');
}
catch(e){
error = e;
}
});
target = this.picker.find('.datepicker-days tbody td:nth(7)');
equal(target.text(), '6'); // Mar 6
target.click();
target = this.picker.find('.datepicker-days tbody td:nth(15)');
equal(target.text(), '14'); // Mar 16
target.click();
equal(this.dp.dates.length, 3);
equal(error, undefined);
equal(out, '3/14/11');
});
test('Clear button: triggers change and changeDate events', function(){
this.input = $('')
.appendTo('#qunit-fixture')
.datepicker({
format: "dd-mm-yyyy",
clearBtn: true
})
.focus(); // Activate for visibility checks
this.dp = this.input.data('datepicker');
this.picker = this.dp.picker;
var target,
triggered_change = 0,
triggered_changeDate = 0;
this.input.on({
changeDate: function(){
triggered_changeDate++;
},
change: function(){
triggered_change++;
}
});
this.input.focus();
ok(this.picker.find('.datepicker-days').is(':visible'), 'Days view visible');
ok(this.picker.find('.datepicker-days tfoot .clear').is(':visible'), 'Clear button visible');
target = this.picker.find('.datepicker-days tfoot .clear');
target.click();
equal(triggered_change, 1);
equal(triggered_changeDate, 1);
});
test('setDate: triggers change and changeDate events', function(){
this.input = $('')
.appendTo('#qunit-fixture')
.datepicker({
format: "dd-mm-yyyy"
})
.focus(); // Activate for visibility checks
this.dp = this.input.data('datepicker');
this.picker = this.dp.picker;
var target,
triggered_change = 0,
triggered_changeDate = 0;
this.input.on({
changeDate: function(){
triggered_changeDate++;
},
change: function(){
triggered_change++;
}
});
this.input.focus();
ok(this.picker.find('.datepicker-days').is(':visible'), 'Days view visible');
this.dp.setDate(new Date(2011, 2, 5));
equal(triggered_change, 2);
equal(triggered_changeDate, 1);
});