123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507 |
- module('Events on initialization', {
- setup: function(){
- this.input = $('<input type="text" value="31-03-2011">')
- .appendTo('#qunit-fixture')
- }
- });
- test('When initializing the datepicker, it should trigger no change or changeDate events', function(){
- var triggered_change = 0,
- triggered_changeDate = 0;
- this.input.on({
- change: function(){
- triggered_change++;
- },
- changeDate: function(){
- triggered_changeDate++;
- }
- });
- this.input.datepicker({format: 'dd-mm-yyyy'});
- equal(triggered_change, 0);
- equal(triggered_changeDate, 0);
- });
- module('Events', {
- setup: function(){
- this.input = $('<input type="text" value="31-03-2011">')
- .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 = $('<input type="text" value="31-03-2011">')
- .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 = $('<input type="text" value="31-03-2011">')
- .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, 1);
- equal(triggered_changeDate, 1);
- });
- test('paste must update the date', function() {
- var dateToPaste = '22-07-2015';
- var evt = {
- type: 'paste',
- originalEvent: {
- clipboardData: {
- types: ['text/plain'],
- getData: function() { return dateToPaste; }
- },
- preventDefault: function() { evt.originalEvent.isDefaultPrevented = true; },
- isDefaultPrevented: false
- }
- };
- this.input.trigger(evt);
- datesEqual(this.dp.dates[0], UTCDate(2015, 6, 22));
- ok(evt.originalEvent.isDefaultPrevented, 'prevented original event');
- });
- test('clicking outside datepicker triggers \'hide\' event', function(){
- var $otherelement = $('<div />');
- $('body').append($otherelement);
- var isHideTriggered;
- this.input.on('hide', function() { isHideTriggered = true; });
- $otherelement.trigger('mousedown');
- ok(isHideTriggered, '\'hide\' event is not triggered');
- $otherelement.remove();
- });
- test('Selecting date from previous month triggers changeMonth', function() {
- var target,
- triggered = 0;
- this.input.on('changeMonth', function(){
- triggered++;
- });
- // find first day of previous month
- target = this.picker.find('.datepicker-days tbody td:first');
- target.click();
- // ensure event has been triggered
- equal(triggered, 1);
- });
- test('Selecting date from previous month in january triggers changeMonth/changeYear', function() {
- var target,
- triggeredM = 0,
- triggeredY = 0;
- this.input.val('01-01-2011');
- this.dp.update();
- this.input.on('changeMonth', function(){
- triggeredM++;
- });
- this.input.on('changeYear', function(){
- triggeredY++;
- });
- // find first day of previous month
- target = this.picker.find('.datepicker-days tbody td:first');
- target.click();
- // ensure event has been triggered
- equal(triggeredM, 1);
- equal(triggeredY, 1);
- });
- test('Selecting date from next month triggers changeMonth', function() {
- var target,
- triggered = 0;
- this.input.on('changeMonth', function(){
- triggered++;
- });
- // find first day of previous month
- target = this.picker.find('.datepicker-days tbody td:last');
- target.click();
- // ensure event has been triggered
- equal(triggered, 1);
- });
- test('Selecting date from next month in december triggers changeMonth/changeYear', function() {
- var target,
- triggeredM = 0,
- triggeredY = 0;
- this.input.val('01-12-2011');
- this.dp.update();
- this.input.on('changeMonth', function(){
- triggeredM++;
- });
- this.input.on('changeYear', function(){
- triggeredY++;
- });
- // find first day of previous month
- target = this.picker.find('.datepicker-days tbody td:last');
- target.click();
- // ensure event has been triggered
- equal(triggeredM, 1);
- equal(triggeredY, 1);
- });
- test('Changing view mode triggers changeViewMode', function () {
- var viewMode = -1,
- triggered = 0;
- this.input.val('22-07-2016');
- this.dp.update();
- this.input.on('changeViewMode', function (e) {
- viewMode = e.viewMode;
- triggered++;
- });
- // change from days to months
- this.picker.find('.datepicker-days .datepicker-switch').click();
- equal(triggered, 1);
- equal(viewMode, 1);
- // change from months to years
- this.picker.find('.datepicker-months .datepicker-switch').click();
- equal(triggered, 2);
- equal(viewMode, 2);
- // change from years to decade
- this.picker.find('.datepicker-years .datepicker-switch').click();
- equal(triggered, 3);
- equal(viewMode, 3);
- // change from decades to centuries
- this.picker.find('.datepicker-decades .datepicker-switch').click();
- equal(triggered, 4);
- equal(viewMode, 4);
- });
- test('Clicking inside content of date with custom beforeShowDay content works', function(){
- this.input = $('<input type="text" value="31-03-2011">')
- .appendTo('#qunit-fixture')
- .datepicker({
- format: "dd-mm-yyyy",
- beforeShowDay: function (date) { return { content: '<div><div>' + date.getDate() + '</div></div>' }; }
- })
- .focus(); // Activate for visibility checks
- this.dp = this.input.data('datepicker');
- this.picker = this.dp.picker;
- var target,
- triggered = 0;
- this.input.on('changeDate', function(){
- triggered++;
- });
- // find deepest date
- target = this.picker.find('.datepicker-days tbody td:first div div');
- target.click();
- // ensure event has been triggered
- equal(triggered, 1);
- });
|