events.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  1. module('Events on initialization', {
  2. setup: function(){
  3. this.input = $('<input type="text" value="31-03-2011">')
  4. .appendTo('#qunit-fixture')
  5. }
  6. });
  7. test('When initializing the datepicker, it should trigger no change or changeDate events', function(){
  8. var triggered_change = 0,
  9. triggered_changeDate = 0;
  10. this.input.on({
  11. change: function(){
  12. triggered_change++;
  13. },
  14. changeDate: function(){
  15. triggered_changeDate++;
  16. }
  17. });
  18. this.input.datepicker({format: 'dd-mm-yyyy'});
  19. equal(triggered_change, 0);
  20. equal(triggered_changeDate, 0);
  21. });
  22. module('Events', {
  23. setup: function(){
  24. this.input = $('<input type="text" value="31-03-2011">')
  25. .appendTo('#qunit-fixture')
  26. .datepicker({format: "dd-mm-yyyy"})
  27. .focus(); // Activate for visibility checks
  28. this.dp = this.input.data('datepicker');
  29. this.picker = this.dp.picker;
  30. },
  31. teardown: function(){
  32. this.picker.remove();
  33. }
  34. });
  35. test('Selecting a year from decade view triggers changeYear', function(){
  36. var target,
  37. triggered = 0;
  38. this.input.on('changeYear', function(){
  39. triggered++;
  40. });
  41. equal(this.dp.viewMode, 0);
  42. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  43. ok(target.is(':visible'), 'View switcher is visible');
  44. target.click();
  45. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  46. equal(this.dp.viewMode, 1);
  47. // Not modified when switching modes
  48. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
  49. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
  50. target = this.picker.find('.datepicker-months thead th.datepicker-switch');
  51. ok(target.is(':visible'), 'View switcher is visible');
  52. target.click();
  53. ok(this.picker.find('.datepicker-years').is(':visible'), 'Year picker is visible');
  54. equal(this.dp.viewMode, 2);
  55. // Not modified when switching modes
  56. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
  57. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
  58. // Change years to test internal state changes
  59. target = this.picker.find('.datepicker-years tbody span:contains(2010)');
  60. target.click();
  61. equal(this.dp.viewMode, 1);
  62. // Only viewDate modified
  63. datesEqual(this.dp.viewDate, UTCDate(2010, 2, 1));
  64. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
  65. equal(triggered, 1);
  66. });
  67. test('Navigating forward/backward from month view triggers changeYear', function(){
  68. var target,
  69. triggered = 0;
  70. this.input.on('changeYear', function(){
  71. triggered++;
  72. });
  73. equal(this.dp.viewMode, 0);
  74. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  75. ok(target.is(':visible'), 'View switcher is visible');
  76. target.click();
  77. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  78. equal(this.dp.viewMode, 1);
  79. target = this.picker.find('.datepicker-months thead th.prev');
  80. ok(target.is(':visible'), 'Prev switcher is visible');
  81. target.click();
  82. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  83. equal(triggered, 1);
  84. target = this.picker.find('.datepicker-months thead th.next');
  85. ok(target.is(':visible'), 'Next switcher is visible');
  86. target.click();
  87. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  88. equal(triggered, 2);
  89. });
  90. test('Selecting a month from year view triggers changeMonth', function(){
  91. var target,
  92. triggered = 0;
  93. this.input.on('changeMonth', function(){
  94. triggered++;
  95. });
  96. equal(this.dp.viewMode, 0);
  97. target = this.picker.find('.datepicker-days thead th.datepicker-switch');
  98. ok(target.is(':visible'), 'View switcher is visible');
  99. target.click();
  100. ok(this.picker.find('.datepicker-months').is(':visible'), 'Month picker is visible');
  101. equal(this.dp.viewMode, 1);
  102. // Not modified when switching modes
  103. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 31));
  104. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
  105. target = this.picker.find('.datepicker-months tbody span:contains(Apr)');
  106. target.click();
  107. equal(this.dp.viewMode, 0);
  108. // Only viewDate modified
  109. datesEqual(this.dp.viewDate, UTCDate(2011, 3, 1));
  110. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 31));
  111. equal(triggered, 1);
  112. });
  113. test('Navigating forward/backward from month view triggers changeMonth', function(){
  114. var target,
  115. triggered = 0;
  116. this.input.on('changeMonth', function(){
  117. triggered++;
  118. });
  119. equal(this.dp.viewMode, 0);
  120. target = this.picker.find('.datepicker-days thead th.prev');
  121. ok(target.is(':visible'), 'Prev switcher is visible');
  122. target.click();
  123. ok(this.picker.find('.datepicker-days').is(':visible'), 'Day picker is visible');
  124. equal(triggered, 1);
  125. target = this.picker.find('.datepicker-days thead th.next');
  126. ok(target.is(':visible'), 'Next switcher is visible');
  127. target.click();
  128. ok(this.picker.find('.datepicker-days').is(':visible'), 'Day picker is visible');
  129. equal(triggered, 2);
  130. });
  131. test('format() returns a formatted date string', function(){
  132. var target,
  133. error, out;
  134. this.input.on('changeDate', function(e){
  135. try{
  136. out = e.format();
  137. }
  138. catch(e){
  139. error = e;
  140. }
  141. });
  142. equal(this.dp.viewMode, 0);
  143. target = this.picker.find('.datepicker-days tbody td:nth(15)');
  144. target.click();
  145. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 14));
  146. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 14));
  147. equal(error, undefined);
  148. equal(out, '14-03-2011');
  149. });
  150. test('format(altformat) returns a formatted date string', function(){
  151. var target,
  152. error, out;
  153. this.input.on('changeDate', function(e){
  154. try{
  155. out = e.format('m/d/yy');
  156. }
  157. catch(e){
  158. error = e;
  159. }
  160. });
  161. equal(this.dp.viewMode, 0);
  162. target = this.picker.find('.datepicker-days tbody td:nth(15)');
  163. target.click();
  164. datesEqual(this.dp.viewDate, UTCDate(2011, 2, 14));
  165. datesEqual(this.dp.dates[0], UTCDate(2011, 2, 14));
  166. equal(error, undefined);
  167. equal(out, '3/14/11');
  168. });
  169. test('format(ix) returns a formatted date string of the ix\'th date selected', function(){
  170. var target,
  171. error, out;
  172. this.dp._process_options({multidate: true});
  173. this.input.on('changeDate', function(e){
  174. try{
  175. out = e.format(2);
  176. }
  177. catch(e){
  178. error = e;
  179. }
  180. });
  181. target = this.picker.find('.datepicker-days tbody td:nth(7)');
  182. equal(target.text(), '6'); // Mar 6
  183. target.click();
  184. target = this.picker.find('.datepicker-days tbody td:nth(15)');
  185. equal(target.text(), '14'); // Mar 16
  186. target.click();
  187. equal(this.dp.dates.length, 3);
  188. equal(error, undefined);
  189. equal(out, '14-03-2011');
  190. });
  191. test('format(ix, altformat) returns a formatted date string', function(){
  192. var target,
  193. error, out;
  194. this.dp._process_options({multidate: true});
  195. this.input.on('changeDate', function(e){
  196. try{
  197. out = e.format(2, 'm/d/yy');
  198. }
  199. catch(e){
  200. error = e;
  201. }
  202. });
  203. target = this.picker.find('.datepicker-days tbody td:nth(7)');
  204. equal(target.text(), '6'); // Mar 6
  205. target.click();
  206. target = this.picker.find('.datepicker-days tbody td:nth(15)');
  207. equal(target.text(), '14'); // Mar 16
  208. target.click();
  209. equal(this.dp.dates.length, 3);
  210. equal(error, undefined);
  211. equal(out, '3/14/11');
  212. });
  213. test('Clear button: triggers change and changeDate events', function(){
  214. this.input = $('<input type="text" value="31-03-2011">')
  215. .appendTo('#qunit-fixture')
  216. .datepicker({
  217. format: "dd-mm-yyyy",
  218. clearBtn: true
  219. })
  220. .focus(); // Activate for visibility checks
  221. this.dp = this.input.data('datepicker');
  222. this.picker = this.dp.picker;
  223. var target,
  224. triggered_change = 0,
  225. triggered_changeDate = 0;
  226. this.input.on({
  227. changeDate: function(){
  228. triggered_changeDate++;
  229. },
  230. change: function(){
  231. triggered_change++;
  232. }
  233. });
  234. this.input.focus();
  235. ok(this.picker.find('.datepicker-days').is(':visible'), 'Days view visible');
  236. ok(this.picker.find('.datepicker-days tfoot .clear').is(':visible'), 'Clear button visible');
  237. target = this.picker.find('.datepicker-days tfoot .clear');
  238. target.click();
  239. equal(triggered_change, 1);
  240. equal(triggered_changeDate, 1);
  241. });
  242. test('setDate: triggers change and changeDate events', function(){
  243. this.input = $('<input type="text" value="31-03-2011">')
  244. .appendTo('#qunit-fixture')
  245. .datepicker({
  246. format: "dd-mm-yyyy"
  247. })
  248. .focus(); // Activate for visibility checks
  249. this.dp = this.input.data('datepicker');
  250. this.picker = this.dp.picker;
  251. var target,
  252. triggered_change = 0,
  253. triggered_changeDate = 0;
  254. this.input.on({
  255. changeDate: function(){
  256. triggered_changeDate++;
  257. },
  258. change: function(){
  259. triggered_change++;
  260. }
  261. });
  262. this.input.focus();
  263. ok(this.picker.find('.datepicker-days').is(':visible'), 'Days view visible');
  264. this.dp.setDate(new Date(2011, 2, 5));
  265. equal(triggered_change, 1);
  266. equal(triggered_changeDate, 1);
  267. });
  268. test('paste must update the date', function() {
  269. var dateToPaste = '22-07-2015';
  270. var evt = {
  271. type: 'paste',
  272. originalEvent: {
  273. clipboardData: {
  274. types: ['text/plain'],
  275. getData: function() { return dateToPaste; }
  276. },
  277. preventDefault: function() { evt.originalEvent.isDefaultPrevented = true; },
  278. isDefaultPrevented: false
  279. }
  280. };
  281. this.input.trigger(evt);
  282. datesEqual(this.dp.dates[0], UTCDate(2015, 6, 22));
  283. ok(evt.originalEvent.isDefaultPrevented, 'prevented original event');
  284. });
  285. test('clicking outside datepicker triggers \'hide\' event', function(){
  286. var $otherelement = $('<div />');
  287. $('body').append($otherelement);
  288. var isHideTriggered;
  289. this.input.on('hide', function() { isHideTriggered = true; });
  290. $otherelement.trigger('mousedown');
  291. ok(isHideTriggered, '\'hide\' event is not triggered');
  292. $otherelement.remove();
  293. });
  294. test('Selecting date from previous month triggers changeMonth', function() {
  295. var target,
  296. triggered = 0;
  297. this.input.on('changeMonth', function(){
  298. triggered++;
  299. });
  300. // find first day of previous month
  301. target = this.picker.find('.datepicker-days tbody td:first');
  302. target.click();
  303. // ensure event has been triggered
  304. equal(triggered, 1);
  305. });
  306. test('Selecting date from previous month in january triggers changeMonth/changeYear', function() {
  307. var target,
  308. triggeredM = 0,
  309. triggeredY = 0;
  310. this.input.val('01-01-2011');
  311. this.dp.update();
  312. this.input.on('changeMonth', function(){
  313. triggeredM++;
  314. });
  315. this.input.on('changeYear', function(){
  316. triggeredY++;
  317. });
  318. // find first day of previous month
  319. target = this.picker.find('.datepicker-days tbody td:first');
  320. target.click();
  321. // ensure event has been triggered
  322. equal(triggeredM, 1);
  323. equal(triggeredY, 1);
  324. });
  325. test('Selecting date from next month triggers changeMonth', function() {
  326. var target,
  327. triggered = 0;
  328. this.input.on('changeMonth', function(){
  329. triggered++;
  330. });
  331. // find first day of previous month
  332. target = this.picker.find('.datepicker-days tbody td:last');
  333. target.click();
  334. // ensure event has been triggered
  335. equal(triggered, 1);
  336. });
  337. test('Selecting date from next month in december triggers changeMonth/changeYear', function() {
  338. var target,
  339. triggeredM = 0,
  340. triggeredY = 0;
  341. this.input.val('01-12-2011');
  342. this.dp.update();
  343. this.input.on('changeMonth', function(){
  344. triggeredM++;
  345. });
  346. this.input.on('changeYear', function(){
  347. triggeredY++;
  348. });
  349. // find first day of previous month
  350. target = this.picker.find('.datepicker-days tbody td:last');
  351. target.click();
  352. // ensure event has been triggered
  353. equal(triggeredM, 1);
  354. equal(triggeredY, 1);
  355. });
  356. test('Changing view mode triggers changeViewMode', function () {
  357. var viewMode = -1,
  358. triggered = 0;
  359. this.input.val('22-07-2016');
  360. this.dp.update();
  361. this.input.on('changeViewMode', function (e) {
  362. viewMode = e.viewMode;
  363. triggered++;
  364. });
  365. // change from days to months
  366. this.picker.find('.datepicker-days .datepicker-switch').click();
  367. equal(triggered, 1);
  368. equal(viewMode, 1);
  369. // change from months to years
  370. this.picker.find('.datepicker-months .datepicker-switch').click();
  371. equal(triggered, 2);
  372. equal(viewMode, 2);
  373. // change from years to decade
  374. this.picker.find('.datepicker-years .datepicker-switch').click();
  375. equal(triggered, 3);
  376. equal(viewMode, 3);
  377. // change from decades to centuries
  378. this.picker.find('.datepicker-decades .datepicker-switch').click();
  379. equal(triggered, 4);
  380. equal(viewMode, 4);
  381. });
  382. test('Clicking inside content of date with custom beforeShowDay content works', function(){
  383. this.input = $('<input type="text" value="31-03-2011">')
  384. .appendTo('#qunit-fixture')
  385. .datepicker({
  386. format: "dd-mm-yyyy",
  387. beforeShowDay: function (date) { return { content: '<div><div>' + date.getDate() + '</div></div>' }; }
  388. })
  389. .focus(); // Activate for visibility checks
  390. this.dp = this.input.data('datepicker');
  391. this.picker = this.dp.picker;
  392. var target,
  393. triggered = 0;
  394. this.input.on('changeDate', function(){
  395. triggered++;
  396. });
  397. // find deepest date
  398. target = this.picker.find('.datepicker-days tbody td:first div div');
  399. target.click();
  400. // ensure event has been triggered
  401. equal(triggered, 1);
  402. });