1797 lines
63 KiB
JavaScript
1797 lines
63 KiB
JavaScript
|
module('Options', {
|
||
|
|
setup: function(){},
|
||
|
|
teardown: function(){
|
||
|
|
$('#qunit-fixture *').each(function(){
|
||
|
|
var t = $(this);
|
||
|
|
if ('datepicker' in t.data())
|
||
|
|
t.datepicker('remove');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Autoclose', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
autoclose: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.is(':visible'), 'Picker is visible');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
equal(target.text(), '4'); // Mar 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
ok(picker.is(':not(:visible)'), 'Picker is hidden');
|
||
|
|
datesEqual(dp.dates[0], UTCDate(2012, 2, 4));
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Custom date formatter functions', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2015-09-18T00:00:00.000Z')
|
||
|
|
.datepicker({
|
||
|
|
format: {
|
||
|
|
/*
|
||
|
|
Say our UI should display a week ahead,
|
||
|
|
but textbox should store the actual date.
|
||
|
|
This is useful if we need UI to select local dates,
|
||
|
|
but store in UTC
|
||
|
|
*/
|
||
|
|
toDisplay: function (date, format, language) {
|
||
|
|
var d = new Date(date);
|
||
|
|
d.setDate(d.getDate() - 7);
|
||
|
|
return d.toISOString();
|
||
|
|
},
|
||
|
|
toValue: function (date, format, language) {
|
||
|
|
var d = new Date(date);
|
||
|
|
d.setDate(d.getDate() + 7);
|
||
|
|
return new Date(d);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
autoclose: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
//Value is ISO format and is 7 days older than UI
|
||
|
|
equal(input.val(), '2015-09-18T00:00:00.000Z');
|
||
|
|
datesEqual(dp.dates[0], UTCDate(2015, 8, 25));
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2015, 8, 25));
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.is(':visible'), 'Picker is visible');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(5)');
|
||
|
|
equal(target.text(), '4'); // Sep 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
ok(picker.is(':not(:visible)'), 'Picker is hidden');
|
||
|
|
//Value is now 28th Aug 2015 in ISO format
|
||
|
|
//and is 7 days older than UI
|
||
|
|
equal(input.val(), '2015-08-28T00:00:00.000Z');
|
||
|
|
datesEqual(dp.dates[0], UTCDate(2015, 8, 4));
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2015, 8, 4));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: year view (integer)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 1
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':visible'), 'Months view visible');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: year view (string)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 'year'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':visible'), 'Months view visible');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: decade view (integer)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 2
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: decade view (string)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 'decade'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: century view (integer)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 3
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':visible'), 'Decades view visible');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: century view (string)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 'century'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':visible'), 'Decades view visible');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':not(:visible)'), 'Centuries view hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: millennium view (integer)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 4
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':visible'), 'Centuries view visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: millennium view (string)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 'millennium'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':not(:visible)'), 'Years view hidden');
|
||
|
|
ok(picker.find('.datepicker-decades').is(':not(:visible)'), 'Decades view hidden');
|
||
|
|
ok(picker.find('.datepicker-centuries').is(':visible'), 'Centuries view visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: today button not default', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':not(:visible)'), 'Today button not visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: today visibility when enabled', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
todayBtn: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
picker.find('.datepicker-days thead th.datepicker-switch').click();
|
||
|
|
ok(picker.find('.datepicker-months').is(':visible'), 'Months view visible');
|
||
|
|
ok(picker.find('.datepicker-months tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
picker.find('.datepicker-months thead th.datepicker-switch').click();
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
ok(picker.find('.datepicker-years tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: data-api', function(){
|
||
|
|
var input = $('<input data-date-today-btn="true" />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: moves to today\'s date', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
todayBtn: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tfoot .today');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
var d = new Date(),
|
||
|
|
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate());
|
||
|
|
datesEqual(dp.viewDate, today);
|
||
|
|
datesEqual(dp.dates[0], UTCDate(2012, 2, 5));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: moves to days view', function(){
|
||
|
|
var viewModes = $.fn.datepicker.DPGlobal.viewModes;
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: viewModes.length - 1,
|
||
|
|
todayBtn: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('tfoot .today').filter(':visible');
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Button: "linked" selects today\'s date', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
todayBtn: "linked"
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .today').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tfoot .today');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
var d = new Date(),
|
||
|
|
today = UTCDate(d.getFullYear(), d.getMonth(), d.getDate());
|
||
|
|
datesEqual(dp.viewDate, today);
|
||
|
|
datesEqual(dp.dates[0], today);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Today Highlight: today\'s date is not highlighted by default', patch_date(function(Date){
|
||
|
|
Date.now = UTCDate(2012, 2, 15);
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'March 2012', 'Title is "March 2012"');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(15)');
|
||
|
|
ok(!target.hasClass('today'), 'Today is not marked with "today" class');
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(14)');
|
||
|
|
ok(!target.hasClass('today'), 'Yesterday is not marked with "today" class');
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(16)');
|
||
|
|
ok(!target.hasClass('today'), 'Tomorrow is not marked with "today" class');
|
||
|
|
}));
|
||
|
|
|
||
|
|
test('Today Highlight: today\'s date is highlighted when not active', patch_date(function(Date){
|
||
|
|
Date.now = new Date(2012, 2, 15);
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
todayHighlight: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'March 2012', 'Title is "March 2012"');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(15)');
|
||
|
|
ok(target.hasClass('today'), 'Today is marked with "today" class');
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(14)');
|
||
|
|
ok(!target.hasClass('today'), 'Yesterday is not marked with "today" class');
|
||
|
|
target = picker.find('.datepicker-days tbody td:contains(16)');
|
||
|
|
ok(!target.hasClass('today'), 'Tomorrow is not marked with "today" class');
|
||
|
|
}));
|
||
|
|
|
||
|
|
test('Clear Button: clear visibility when enabled', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
clearBtn: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .clear').is(':visible'), 'Clear button visible');
|
||
|
|
|
||
|
|
picker.find('.datepicker-days thead th.datepicker-switch').click();
|
||
|
|
ok(picker.find('.datepicker-months').is(':visible'), 'Months view visible');
|
||
|
|
ok(picker.find('.datepicker-months tfoot .clear').is(':visible'), 'Clear button visible');
|
||
|
|
|
||
|
|
picker.find('.datepicker-months thead th.datepicker-switch').click();
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
ok(picker.find('.datepicker-years tfoot .clear').is(':visible'), 'Clear button visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Clear Button: clears input value', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
clearBtn: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .clear').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tfoot .clear');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
equal(input.val(),'',"Input value has been cleared.");
|
||
|
|
ok(picker.is(':visible'), 'Picker is visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Clear Button: hides datepicker if autoclose is on', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
clearBtn: true,
|
||
|
|
autoclose: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
ok(picker.find('.datepicker-days tfoot .clear').is(':visible'), 'Today button visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days tfoot .clear');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
equal(input.val(),'',"Input value has been cleared.");
|
||
|
|
ok(picker.is(':not(:visible)'), 'Picker is hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Active Toggle Default: when active date is selected it is not unset', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
// open our datepicker
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 selected');
|
||
|
|
|
||
|
|
// click on our active date
|
||
|
|
target = picker.find('.datepicker-days .day.active');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
// make sure it's still set
|
||
|
|
equal(input.val(), '2012-03-05', "Input value has not been cleared.");
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Active Toggle Enabled (single date): when active date is selected it is unset', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
toggleActive: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
// open our datepicker
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 selected');
|
||
|
|
|
||
|
|
// click on our active date
|
||
|
|
target = picker.find('.datepicker-days .day.active');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
// make sure it's no longer set
|
||
|
|
equal(input.val(), '', "Input value has been cleared.");
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Active Toggle Multidate Default: when one of the active dates is selected it is unset', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
multidate: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
// open our datepicker
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 in dates');
|
||
|
|
|
||
|
|
// Select additional date
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 4), '2012-03-04 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-04');
|
||
|
|
|
||
|
|
// Unselect additional date
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
target.click();
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 4)) === -1, '2012-03-04 no longer in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Active Toggle Disabled: when active date is selected it remains', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
toggleActive: false
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
// open our datepicker
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 selected');
|
||
|
|
|
||
|
|
// click on our active date
|
||
|
|
target = picker.find('.datepicker-days .day.active');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
// make sure it's still set
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 still selected');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 5));
|
||
|
|
equal(input.val(), '2012-03-05');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Active Toggle Multidate Disabled: when activeToggle is set to false, but multidate is set, the option is ignored and selecting an active date it is unset', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
multidate: true,
|
||
|
|
toggleActive: false
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
// open our datepicker
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 in dates');
|
||
|
|
|
||
|
|
// Select additional date
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 4), '2012-03-04 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-04');
|
||
|
|
|
||
|
|
// Unselect additional date
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
target.click();
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 4)) === -1, '2012-03-04 no longer in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('DaysOfWeekDisabled', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
daysOfWeekDisabled: '1,5'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(22)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(24)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(26)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('DaysOfWeekHighlighted', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startDate: '2012-10-02',
|
||
|
|
daysOfWeekHighlighted: '1,5'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(0)');
|
||
|
|
ok(!target.hasClass('highlighted'), 'Day of week is not highlighted');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(22)');
|
||
|
|
ok(target.hasClass('highlighted'), 'Day of week is highlighted');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(24)');
|
||
|
|
ok(!target.hasClass('highlighted'), 'Day of week is not highlighted');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(26)');
|
||
|
|
ok(target.hasClass('highlighted'), 'Day of week is highlighted');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('DatesDisabled', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
datesDisabled: ['2012-10-1', '2012-10-10', '2012-10-20']
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(1)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(2)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(10)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(11)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(20)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(21)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('DatesDisabled as attribute', function(){
|
||
|
|
var input = $('<input data-date-dates-disabled="2012-10-1,2012-10-10,2012-10-20" />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(1)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(2)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(10)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(11)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(20)');
|
||
|
|
ok(target.hasClass('disabled'), 'Day of week is disabled');
|
||
|
|
ok(target.hasClass('disabled-date'), 'Date is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(21)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Day of week is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('BeforeShowDay', function(){
|
||
|
|
|
||
|
|
var beforeShowDay = function(date) {
|
||
|
|
switch (date.getDate()){
|
||
|
|
case 25:
|
||
|
|
return {
|
||
|
|
tooltip: 'Example tooltip',
|
||
|
|
classes: 'active'
|
||
|
|
};
|
||
|
|
case 26:
|
||
|
|
return "test26";
|
||
|
|
case 27:
|
||
|
|
return {enabled: false, classes: 'test27'};
|
||
|
|
case 28:
|
||
|
|
return false;
|
||
|
|
case 30:
|
||
|
|
return { content: "foo" + date.getDate() }
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
beforeShowDay: beforeShowDay
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(25)');
|
||
|
|
equal(target.attr('title'), 'Example tooltip', '25th has tooltip');
|
||
|
|
ok(!target.hasClass('disabled'), '25th is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(26)');
|
||
|
|
ok(target.hasClass('test26'), '26th has test26 class');
|
||
|
|
ok(!target.hasClass('disabled'), '26th is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(27)');
|
||
|
|
ok(target.hasClass('test27'), '27th has test27 class');
|
||
|
|
ok(target.hasClass('disabled'), '27th is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(28)');
|
||
|
|
ok(target.hasClass('disabled'), '28th is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(29)');
|
||
|
|
ok(!target.hasClass('disabled'), '29th is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(30)');
|
||
|
|
ok(target.text() == "foo30", '30th has custom content');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('BeforeShowMonth regress .day content', function() {
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
beforeShowDay: function(date) {
|
||
|
|
return {
|
||
|
|
content: '<strong>foo123</strong>'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(30)');
|
||
|
|
target.trigger('click');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 9, 30));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('BeforeShowMonth', function () {
|
||
|
|
|
||
|
|
var beforeShowMonth = function (date) {
|
||
|
|
switch (date.getMonth()) {
|
||
|
|
case 0:
|
||
|
|
return {
|
||
|
|
tooltip: 'Example tooltip',
|
||
|
|
classes: 'active'
|
||
|
|
};
|
||
|
|
case 2:
|
||
|
|
return "testMarch";
|
||
|
|
case 4:
|
||
|
|
return {enabled: false, classes: 'testMay'};
|
||
|
|
case 5:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
beforeShowMonth: beforeShowMonth
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(0)');
|
||
|
|
equal(target.attr('title'), 'Example tooltip', '1st has tooltip');
|
||
|
|
ok(!target.hasClass('disabled'), 'January is enabled');
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(2)');
|
||
|
|
ok(target.hasClass('testMarch'), 'March has testMarch class');
|
||
|
|
ok(!target.hasClass('disabled'), 'March enabled');
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(4)');
|
||
|
|
ok(target.hasClass('testMay'), 'May has testMay class');
|
||
|
|
ok(target.hasClass('disabled'), 'May is disabled');
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(5)');
|
||
|
|
ok(target.hasClass('disabled'), 'June is disabled');
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(6)');
|
||
|
|
ok(!target.hasClass('disabled'), 'July is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
test('BeforeShowYear', function () {
|
||
|
|
|
||
|
|
var beforeShowYear = function (date) {
|
||
|
|
switch (date.getFullYear()) {
|
||
|
|
case 2013:
|
||
|
|
return {
|
||
|
|
tooltip: 'Example tooltip',
|
||
|
|
classes: 'active'
|
||
|
|
};
|
||
|
|
case 2014:
|
||
|
|
return "test2014";
|
||
|
|
case 2015:
|
||
|
|
return {enabled: false, classes: 'test2015'};
|
||
|
|
case 2016:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
beforeShowYear: beforeShowYear
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-years tbody span:nth(4)');
|
||
|
|
equal(target.attr('title'), 'Example tooltip', '5th has tooltip');
|
||
|
|
ok(!target.hasClass('disabled'), '2013, 5th is enabled');
|
||
|
|
target = picker.find('.datepicker-years tbody span:nth(5)');
|
||
|
|
ok(target.hasClass('test2014'), '6th has test2014 class');
|
||
|
|
ok(!target.hasClass('disabled'), '2014, 6th is enabled');
|
||
|
|
target = picker.find('.datepicker-years tbody span:nth(6)');
|
||
|
|
ok(target.hasClass('test2015'), '2015, 7th has test2015 class');
|
||
|
|
ok(target.hasClass('disabled'), '2015, 7th is disabled');
|
||
|
|
target = picker.find('.datepicker-years tbody span:nth(7)');
|
||
|
|
ok(target.hasClass('disabled'), '2016, 8th is disabled');
|
||
|
|
target = picker.find('.datepicker-years tbody span:nth(8)');
|
||
|
|
ok(!target.hasClass('disabled'), '2017, 9th is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('beforeShowDecade', function () {
|
||
|
|
var beforeShowDecade = function (date) {
|
||
|
|
switch (date.getFullYear()) {
|
||
|
|
case 2030:
|
||
|
|
return {
|
||
|
|
tooltip: 'Example tooltip',
|
||
|
|
classes: 'active'
|
||
|
|
};
|
||
|
|
case 2040:
|
||
|
|
return "test2040";
|
||
|
|
case 2050:
|
||
|
|
return {enabled: false, classes: 'test2050'};
|
||
|
|
case 2060:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('03/05/2012')
|
||
|
|
.datepicker({ beforeShowDecade: beforeShowDecade }),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-decades tbody span:nth(4)');
|
||
|
|
equal(target.attr('title'), 'Example tooltip', '5th has tooltip');
|
||
|
|
ok(!target.hasClass('disabled'), '2030, 5th is enabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-decades tbody span:nth(5)');
|
||
|
|
ok(target.hasClass('test2040'), '6th has test2040 class');
|
||
|
|
ok(!target.hasClass('disabled'), '2040, 6th is enabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-decades tbody span:nth(6)');
|
||
|
|
ok(target.hasClass('test2050'), '2050, 7th has test2050 class');
|
||
|
|
ok(target.hasClass('disabled'), '2050, 7th is disabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-decades tbody span:nth(7)');
|
||
|
|
ok(target.hasClass('disabled'), '2060, 8th is disabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-decades tbody span:nth(8)');
|
||
|
|
ok(!target.hasClass('disabled'), '2070, 9th is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('beforeShowCentury', function () {
|
||
|
|
var beforeShowCentury = function (date) {
|
||
|
|
switch (date.getFullYear()) {
|
||
|
|
case 2300:
|
||
|
|
return {
|
||
|
|
tooltip: 'Example tooltip',
|
||
|
|
classes: 'active'
|
||
|
|
};
|
||
|
|
case 2400:
|
||
|
|
return "test2400";
|
||
|
|
case 2500:
|
||
|
|
return {enabled: false, classes: 'test2500'};
|
||
|
|
case 2600:
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('03/05/2012')
|
||
|
|
.datepicker({ beforeShowCentury: beforeShowCentury }),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-centuries tbody span:nth(4)');
|
||
|
|
equal(target.attr('title'), 'Example tooltip', '5th has tooltip');
|
||
|
|
ok(!target.hasClass('disabled'), '2300, 5th is enabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-centuries tbody span:nth(5)');
|
||
|
|
ok(target.hasClass('test2400'), '6th has test2400 class');
|
||
|
|
ok(!target.hasClass('disabled'), '2400, 6th is enabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-centuries tbody span:nth(6)');
|
||
|
|
ok(target.hasClass('test2500'), '2500, 7th has test2500 class');
|
||
|
|
ok(target.hasClass('disabled'), '2500, 7th is disabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-centuries tbody span:nth(7)');
|
||
|
|
ok(target.hasClass('disabled'), '2600, 8th is disabled');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-centuries tbody span:nth(8)');
|
||
|
|
ok(!target.hasClass('disabled'), '2700, 9th is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Orientation: values are parsed correctly', function(){
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker');
|
||
|
|
|
||
|
|
equal(dp.o.orientation.x, 'auto');
|
||
|
|
equal(dp.o.orientation.y, 'auto');
|
||
|
|
|
||
|
|
dp._process_options({orientation: ''});
|
||
|
|
equal(dp.o.orientation.x, 'auto', 'Empty value');
|
||
|
|
equal(dp.o.orientation.y, 'auto', 'Empty value');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'left'});
|
||
|
|
equal(dp.o.orientation.x, 'left', '"left"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"left"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'right'});
|
||
|
|
equal(dp.o.orientation.x, 'right', '"right"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"right"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'top'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"top"');
|
||
|
|
equal(dp.o.orientation.y, 'top', '"top"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'bottom'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"bottom"');
|
||
|
|
equal(dp.o.orientation.y, 'bottom', '"bottom"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'left top'});
|
||
|
|
equal(dp.o.orientation.x, 'left', '"left top"');
|
||
|
|
equal(dp.o.orientation.y, 'top', '"left top"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'left bottom'});
|
||
|
|
equal(dp.o.orientation.x, 'left', '"left bottom"');
|
||
|
|
equal(dp.o.orientation.y, 'bottom', '"left bottom"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'right top'});
|
||
|
|
equal(dp.o.orientation.x, 'right', '"right top"');
|
||
|
|
equal(dp.o.orientation.y, 'top', '"right top"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'right bottom'});
|
||
|
|
equal(dp.o.orientation.x, 'right', '"right bottom"');
|
||
|
|
equal(dp.o.orientation.y, 'bottom', '"right bottom"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'left right'});
|
||
|
|
equal(dp.o.orientation.x, 'left', '"left right"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"left right"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'right left'});
|
||
|
|
equal(dp.o.orientation.x, 'right', '"right left"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"right left"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'top bottom'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"top bottom"');
|
||
|
|
equal(dp.o.orientation.y, 'top', '"top bottom"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'bottom top'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"bottom top"');
|
||
|
|
equal(dp.o.orientation.y, 'bottom', '"bottom top"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'foo bar'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"foo bar"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"foo bar"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'foo left'});
|
||
|
|
equal(dp.o.orientation.x, 'left', '"foo left"');
|
||
|
|
equal(dp.o.orientation.y, 'auto', '"foo left"');
|
||
|
|
|
||
|
|
dp._process_options({orientation: 'top bar'});
|
||
|
|
equal(dp.o.orientation.x, 'auto', '"top bar"');
|
||
|
|
equal(dp.o.orientation.y, 'top', '"top bar"');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('startDate', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startDate: new Date(2012, 9, 26)
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(25)');
|
||
|
|
ok(target.hasClass('disabled'), 'Previous day is disabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(26)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Specified date is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(27)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Next day is enabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('endDate', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
endDate: new Date(2012, 9, 26)
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(25)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Previous day is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(26)');
|
||
|
|
ok(!target.hasClass('disabled'), 'Specified date is enabled');
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(27)');
|
||
|
|
ok(target.hasClass('disabled'), 'Next day is disabled');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Multidate', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
multidate: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 (initial date) in dates');
|
||
|
|
|
||
|
|
// Select first
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
equal(target.text(), '4'); // Mar 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 4), '2012-03-04 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-04');
|
||
|
|
|
||
|
|
// Select second
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(15)');
|
||
|
|
equal(target.text(), '12'); // Mar 12
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 12), '2012-03-12 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 12));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-04,2012-03-12');
|
||
|
|
|
||
|
|
// Deselect first
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
equal(target.text(), '4'); // Mar 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 4)) === -1, '2012-03-04 no longer in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-12');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Multidate with limit', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
multidate: 2
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Initial value is selected
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 5)) !== -1, '2012-03-05 (initial date) in dates');
|
||
|
|
|
||
|
|
// Select first
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
equal(target.text(), '4'); // Mar 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 4), '2012-03-04 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 4));
|
||
|
|
equal(input.val(), '2012-03-05,2012-03-04');
|
||
|
|
|
||
|
|
// Select second
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(15)');
|
||
|
|
equal(target.text(), '12'); // Mar 12
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 12), '2012-03-12 in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 12));
|
||
|
|
equal(input.val(), '2012-03-04,2012-03-12');
|
||
|
|
|
||
|
|
// Select third
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(20)');
|
||
|
|
equal(target.text(), '17'); // Mar 17
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
datesEqual(dp.dates.get(-1), UTCDate(2012, 2, 17), '2012-03-17 in dates');
|
||
|
|
ok(dp.dates.contains(UTCDate(2012, 2, 4)) === -1, '2012-03-04 no longer in dates');
|
||
|
|
datesEqual(dp.viewDate, UTCDate(2012, 2, 17));
|
||
|
|
equal(input.val(), '2012-03-12,2012-03-17');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Multidate Separator', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
multidate: true,
|
||
|
|
multidateSeparator: ' '
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
// Select first
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(7)');
|
||
|
|
equal(target.text(), '4'); // Mar 4
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
equal(input.val(), '2012-03-05 2012-03-04');
|
||
|
|
|
||
|
|
// Select second
|
||
|
|
target = picker.find('.datepicker-days tbody td:nth(15)');
|
||
|
|
equal(target.text(), '12'); // Mar 12
|
||
|
|
|
||
|
|
target.click();
|
||
|
|
equal(input.val(), '2012-03-05 2012-03-04 2012-03-12');
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
test("Picker is shown on input focus when showOnFocus is not defined", function () {
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2014-01-01')
|
||
|
|
.datepicker({
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
ok(picker.is(":visible"), "Datepicker is visible");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
test("Picker is shown on input focus when showOnFocus is true", function () {
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2014-01-01')
|
||
|
|
.datepicker({
|
||
|
|
showOnFocus: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
ok(picker.is(":visible"), "Datepicker is visible");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
test("Picker is hidden on input focus when showOnFocus is false", function () {
|
||
|
|
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2014-01-01')
|
||
|
|
.datepicker({
|
||
|
|
showOnFocus: false
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
ok(picker.is(":hidden"), "Datepicker is hidden");
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Container', function(){
|
||
|
|
var testContainer = $('<div class="date-picker-container"/>')
|
||
|
|
.appendTo('#qunit-fixture'),
|
||
|
|
input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
container: '.date-picker-container',
|
||
|
|
startDate: new Date(2012, 9, 26)
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
target = dp.picker;
|
||
|
|
input.focus();
|
||
|
|
equal(target.parent()[0], testContainer[0], 'Container is not the testContainer that was specificed');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Default View Date (Object)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
defaultViewDate: { year: 1977, month: 04, day: 25 }
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'May 1977');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Default View Date (Date)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
defaultViewDate: new Date(1977, 4, 25)
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'May 1977');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Default View Date (String)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
defaultViewDate: "1977-05-24"
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'May 1977');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Immediate Updates', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2014-01-01')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
immediateUpdates: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
// Change month
|
||
|
|
input.focus();
|
||
|
|
picker.find('.datepicker-days .next').click();
|
||
|
|
equal(input.val(), '2014-02-01');
|
||
|
|
|
||
|
|
// Change year
|
||
|
|
picker.find('.datepicker-days .datepicker-switch').click();
|
||
|
|
picker.find('.datepicker-months .next').click();
|
||
|
|
equal(input.val(), '2015-02-01');
|
||
|
|
|
||
|
|
// Change decade set (doesn't update input)
|
||
|
|
picker.find('.datepicker-months .datepicker-switch').click();
|
||
|
|
picker.find('.datepicker-years .next').click();
|
||
|
|
equal(input.val(), '2015-02-01');
|
||
|
|
|
||
|
|
// Change century set (doesn't update input)
|
||
|
|
picker.find('.datepicker-years .datepicker-switch').click();
|
||
|
|
picker.find('.datepicker-decades .next').click();
|
||
|
|
equal(input.val(), '2015-02-01');
|
||
|
|
|
||
|
|
// Change millennium set (doesn't update input)
|
||
|
|
picker.find('.datepicker-decades .datepicker-switch').click();
|
||
|
|
picker.find('.datepicker-centuries .next').click();
|
||
|
|
equal(input.val(), '2015-02-01');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('forceParse: false on enter on invalid date', function () {
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('123456789')
|
||
|
|
.datepicker({forceParse: false})
|
||
|
|
.focus();
|
||
|
|
|
||
|
|
input.trigger({
|
||
|
|
type: 'keydown',
|
||
|
|
keyCode: 13,
|
||
|
|
shiftKey: false
|
||
|
|
});
|
||
|
|
|
||
|
|
equal(input.val(), '123456789', 'date not parsed');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('forceParse: false on mousedown on invalid date', function () {
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('123456789')
|
||
|
|
.datepicker({forceParse: false})
|
||
|
|
.focus();
|
||
|
|
|
||
|
|
$(document).trigger({
|
||
|
|
type: 'mousedown'
|
||
|
|
});
|
||
|
|
|
||
|
|
equal(input.val(), '123456789', 'date not parsed');
|
||
|
|
});
|
||
|
|
|
||
|
|
//datepicker-dropdown
|
||
|
|
|
||
|
|
test('Enable on readonly options (default)', function(){
|
||
|
|
var input = $('<input readonly="readonly" />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({format: "dd-mm-yyyy"}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
ok(!picker.is(':visible'));
|
||
|
|
input.focus();
|
||
|
|
ok(picker.is(':visible'));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Enable on readonly options (false)', function(){
|
||
|
|
var input = $('<input readonly="readonly" />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: "dd-mm-yyyy",
|
||
|
|
enableOnReadonly: false
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
ok(!picker.is(':visible'));
|
||
|
|
input.focus();
|
||
|
|
ok(!picker.is(':visible'));
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Startview: year view visible after date pick', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
startView: 2,
|
||
|
|
minViewMode: 1,
|
||
|
|
autoclose: true
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-years tbody td:nth(7)');
|
||
|
|
target.click();
|
||
|
|
target = picker.find('.datepicker-years tbody td:nth(4)');
|
||
|
|
target.click();
|
||
|
|
target = picker.find('.datepicker-years tbody td:nth(20)');
|
||
|
|
target.click();
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.datepicker-days').is(':not(:visible)'), 'Days view hidden');
|
||
|
|
ok(picker.find('.datepicker-months').is(':not(:visible)'), 'Months view hidden');
|
||
|
|
ok(picker.find('.datepicker-years').is(':visible'), 'Years view visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Title: none', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.is(':visible'), 'Picker is visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days thead .datepicker-title');
|
||
|
|
ok(target.is(':not(:visible)'), 'Title is hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Title: with value', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
title: 'Some Title'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.is(':visible'), 'Picker is visible');
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-days thead .datepicker-title');
|
||
|
|
ok(target.is(':visible'), 'Title is visible');
|
||
|
|
equal(target.text(), 'Some Title');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('i18n: Leverage i18n titleFormat when available.', patch_date(function(Date){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2015年04月21日')
|
||
|
|
.datepicker({
|
||
|
|
language: 'zh-CN'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), '2015年04月', 'Title is in Chinese: 2015年04月');
|
||
|
|
}));
|
||
|
|
|
||
|
|
test('i18n: Leverage English (default) i18n titleFormat when translation key for specified language is not available.', patch_date(function(Date){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('04/21/2015')
|
||
|
|
.datepicker({
|
||
|
|
language: 'aa-BB'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
equal(picker.find('.datepicker-days thead .datepicker-switch').text(), 'April 2015', 'Title is in default format: April 2015');
|
||
|
|
}));
|
||
|
|
|
||
|
|
test('Z-index Offset: none', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker(),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.parent().css('z-index', 234);
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
equal(dp.o.zIndexOffset, 10, 'Z-index offset option defaults to 10.');
|
||
|
|
equal(picker.css('z-index'), 244, 'Picker Z-index offset is respected.');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Z-index Offset: with value', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
zIndexOffset: 1000
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.parent().css('z-index', 234);
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
equal(dp.o.zIndexOffset, 1000, 'Z-index offset option is accepted.');
|
||
|
|
equal(picker.css('z-index'), 1234, 'Picker Z-index offset is respected.');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('templates', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
templates: {
|
||
|
|
leftArrow: '<span class="glyphicon glyphicon-arrow-left"></span>',
|
||
|
|
rightArrow: '</table>'
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
equal(picker.find('.datepicker-days .prev').prop('innerHTML'), '<span class="glyphicon glyphicon-arrow-left"></span>');
|
||
|
|
equal(picker.find('.datepicker-days .next').prop('innerHTML'), $('<div>').html('»').text());
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Nav arrow html templates with span tag', function () {
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
templates: {
|
||
|
|
leftArrow: '<span></span>',
|
||
|
|
rightArrow: '<span></span>'
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
target = picker.find('.datepicker-months tbody span:nth(9)');
|
||
|
|
ok(target.hasClass('active'), 'Month is selected');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Nav arrow html templates .prev click', function () {
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-10-26')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
startView: 1,
|
||
|
|
templates: {
|
||
|
|
leftArrow: '<i></i>'
|
||
|
|
}
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
picker.find('.datepicker-months thead .prev i').trigger('click');
|
||
|
|
target = picker.find('.datepicker-months thead .datepicker-switch');
|
||
|
|
equal(target.text(), '2011');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('Visibility of the prev and next arrows for decade/century/millenium views with startDate and endDate', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('01/01/2015')
|
||
|
|
.datepicker({
|
||
|
|
format: 'dd/mm/yyyy',
|
||
|
|
startView: 2,
|
||
|
|
startDate: '01/12/2014',
|
||
|
|
endDate: '01/12/2016'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
target = picker.find('.datepicker-years thead th.prev');
|
||
|
|
ok(target.hasClass('disabled'), 'Prev switcher is hidden');
|
||
|
|
target = picker.find('.datepicker-years thead th.next');
|
||
|
|
ok(target.hasClass('disabled'), 'Next switcher is hidden');
|
||
|
|
|
||
|
|
picker.find('.datepicker-years thead th.datepicker-switch').click();
|
||
|
|
target = picker.find('.datepicker-decades thead th.prev');
|
||
|
|
ok(target.hasClass('disabled'), 'Prev switcher is hidden');
|
||
|
|
target = picker.find('.datepicker-decades thead th.next');
|
||
|
|
ok(target.hasClass('disabled'), 'Next switcher is hidden');
|
||
|
|
|
||
|
|
picker.find('.datepicker-decades thead th.datepicker-switch').click();
|
||
|
|
target = picker.find('.datepicker-centuries thead th.prev');
|
||
|
|
ok(target.hasClass('disabled'), 'Prev switcher is hidden');
|
||
|
|
target = picker.find('.datepicker-centuries thead th.next');
|
||
|
|
ok(target.hasClass('disabled'), 'Next switcher is hidden');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('date cells (outdated)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker(),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
picker.find('.datepicker-days .day').each(function(){
|
||
|
|
ok(this.hasAttribute('data-date'));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
test('keepEmptyValues: none (default is false)', function() {
|
||
|
|
var proxy_element = $('<div />').appendTo('#qunit-fixture'),
|
||
|
|
input_from = $('<input />').val('2016-04-01').appendTo('#qunit-fixture'),
|
||
|
|
input_to = $('<input />').appendTo('#qunit-fixture'),
|
||
|
|
dp = proxy_element.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
inputs: [input_from, input_to]
|
||
|
|
}),
|
||
|
|
input_from_dp = input_from.data('datepicker');
|
||
|
|
|
||
|
|
input_from.focus();
|
||
|
|
input_from_dp.picker.find('.old.day').eq(0).click();
|
||
|
|
|
||
|
|
equal(input_from.val(), '2016-03-27');
|
||
|
|
equal(input_to.val(), '2016-03-27', 'Input_from value should be distributed.');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('keepEmptyValues: true', function() {
|
||
|
|
var proxy_element = $('<div />').appendTo('#qunit-fixture'),
|
||
|
|
input_from = $('<input />').val('2016-04-01').appendTo('#qunit-fixture'),
|
||
|
|
input_to = $('<input />').appendTo('#qunit-fixture'),
|
||
|
|
dp = proxy_element.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
inputs: [input_from, input_to],
|
||
|
|
keepEmptyValues: true
|
||
|
|
}),
|
||
|
|
input_from_dp = input_from.data('datepicker');
|
||
|
|
|
||
|
|
input_from.focus();
|
||
|
|
input_from_dp.picker.find('.old.day').eq(0).click();
|
||
|
|
|
||
|
|
equal(input_from.val(), '2016-03-27');
|
||
|
|
equal(input_to.val(), '', 'Input_from value should not be distributed.');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('maxViewMode and navigation switch', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
maxViewMode: 0
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
|
||
|
|
picker.find('.datepicker-days thead th.datepicker-switch').click();
|
||
|
|
ok(picker.find('.datepicker-days').is(':visible'), 'Days view visible');
|
||
|
|
});
|
||
|
|
|
||
|
|
test('updateViewDate', function() {
|
||
|
|
expect(8);
|
||
|
|
|
||
|
|
var input = $('<input value="08/03/1990"/>')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.datepicker({
|
||
|
|
defaultViewDate: {
|
||
|
|
year: 1945,
|
||
|
|
month: 4,
|
||
|
|
day: 8
|
||
|
|
},
|
||
|
|
updateViewDate: false
|
||
|
|
})
|
||
|
|
.on('changeMonth', function() {
|
||
|
|
var msg = shouldTriggerChangeMonth ? 'changeMonth must be triggered' : 'changeMonth must not be triggered';
|
||
|
|
ok(shouldTriggerChangeMonth, msg);
|
||
|
|
})
|
||
|
|
.on('changeYear', function() {
|
||
|
|
var msg = shouldTriggerChangeYear ? 'changeYear must be triggered' : 'changeYear must not be triggered';
|
||
|
|
ok(shouldTriggerChangeYear, msg);
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
shouldTriggerChangeMonth = false,
|
||
|
|
shouldTriggerChangeYear = false,
|
||
|
|
monthShown = picker.find('.datepicker-days thead th.datepicker-switch');
|
||
|
|
|
||
|
|
equal(monthShown.text(), "May 1945", 'uses defaultViewDate on initialization');
|
||
|
|
input.datepicker('setDate', new Date(1945, 8, 2));
|
||
|
|
equal(monthShown.text(), "May 1945", 'does not change viewDate on `setDate` method');
|
||
|
|
input.focus();
|
||
|
|
picker.find('.datepicker-days tbody tr td.day.new:first').click();
|
||
|
|
equal(monthShown.text(), "May 1945", 'does not change viewDate if a day in next month is selected');
|
||
|
|
shouldTriggerChangeMonth = true;
|
||
|
|
picker.find('.datepicker-days thead th.next').click();
|
||
|
|
equal(monthShown.text(), 'June 1945', 'changing month must still be possible'); // and must trigger `changeMonth` event
|
||
|
|
shouldTriggerChangeYear = true;
|
||
|
|
picker.find('.datepicker-days thead th.datepicker-switch').click();
|
||
|
|
picker.find('.datepicker-months thead th.next').click();
|
||
|
|
picker.find('.datepicker-months tbody .month:first').click();
|
||
|
|
equal(monthShown.text(), 'January 1946', 'changing year must still be possible'); // and must trigger `changeYear` and `changeMonth` events
|
||
|
|
});
|
||
|
|
test('Week Days: Week days default visibility (or enabled)', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd'
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.dow').length > 0, 'Week days added to view');
|
||
|
|
});
|
||
|
|
test('Week Days: Week days visibility when disabled', function(){
|
||
|
|
var input = $('<input />')
|
||
|
|
.appendTo('#qunit-fixture')
|
||
|
|
.val('2012-03-05')
|
||
|
|
.datepicker({
|
||
|
|
format: 'yyyy-mm-dd',
|
||
|
|
showWeekDays: false
|
||
|
|
}),
|
||
|
|
dp = input.data('datepicker'),
|
||
|
|
picker = dp.picker,
|
||
|
|
target;
|
||
|
|
|
||
|
|
input.focus();
|
||
|
|
ok(picker.find('.dow').length === 0, 'Week days not added to view');
|
||
|
|
});
|