Permalink
Browse files

Extend data-api to all picker types, enact on click event, add tests

  • Loading branch information...
1 parent 2d768a6 commit f3bd620cc7beed87f1577bef1aabfab6bfd99d64 @eternicode eternicode committed Apr 4, 2013
Showing with 129 additions and 14 deletions.
  1. +13 −5 js/bootstrap-datepicker.js
  2. +114 −0 tests/suites/data-api.js
  3. +0 −8 tests/suites/options.js
  4. +2 −1 tests/tests.html
View
@@ -1141,11 +1141,19 @@
/* DATEPICKER DATA-API
* ================== */
- $(document).on('focus.datepicker.data-api', '[data-provide="datepicker"]', function(e){
- var $this = $(this);
- if ($this.data('datepicker')) return;
- e.preventDefault();
- $this.datepicker($this.data());
+ $(document).on(
+ 'focus.datepicker.data-api click.datepicker.data-api',
+ '[data-provide="datepicker"]',
+ function(e){
+ var $this = $(this);
+ if ($this.data('datepicker')) return;
+ e.preventDefault();
+ // component click requires us to explicitly show it
+ $this.datepicker('show');
+ }
+ );
+ $(function(){
+ $('[data-provide="datepicker-inline"]').datepicker();
});
}( window.jQuery );
View
@@ -0,0 +1,114 @@
+module('DATA-API');
+
+test('DATA-API: data-provide="datepicker" on input; focus', function(){
+ var input = $('<input data-provide="datepicker" />')
+ .appendTo('#qunit-fixture');
+ input.focus();
+ ok(input.data('datepicker'), 'datepicker is initialized by "focus" event');
+});
+
+test('DATA-API: data-provide="datepicker" on input; click', function(){
+ var input = $('<input data-provide="datepicker" />')
+ .appendTo('#qunit-fixture');
+ input.click();
+ ok(input.data('datepicker'), 'datepicker is initialized by "focus" event');
+});
+
+test('DATA-API: data-provide="datepicker" on component', function(){
+ var html, comp;
+
+ html = '<div class="input-append date" data-provide="datepicker">'+
+ '<input><span class="add-on"><i class="icon-th"></i></span>'+
+ '</div>';
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input').focus();
+ ok(comp.data('datepicker'), 'append component initialized by "focus" event on input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input').click();
+ ok(comp.data('datepicker'), 'append component initialized by "click" event on input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('.add-on').focus();
+ ok(comp.data('datepicker'), 'append component initialized by "focus" event on add-on');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('.add-on').click();
+ ok(comp.data('datepicker'), 'append component initialized by "click" event on add-on');
+ comp.remove();
+
+
+ html = '<div class="input-prepend date" data-provide="datepicker">'+
+ '<span class="add-on"><i class="icon-th"></i></span><input>'+
+ '</div>';
+
+ comp = $(html).prependTo('#qunit-fixture');
+ comp.find('input').focus();
+ ok(comp.data('datepicker'), 'prepend component initialized by "focus" event on input');
+ comp.remove();
+
+ comp = $(html).prependTo('#qunit-fixture');
+ comp.find('input').click();
+ ok(comp.data('datepicker'), 'prepend component initialized by "click" event on input');
+ comp.remove();
+
+ comp = $(html).prependTo('#qunit-fixture');
+ comp.find('.add-on').focus();
+ ok(comp.data('datepicker'), 'prepend component initialized by "focus" event on add-on');
+ comp.remove();
+
+ comp = $(html).prependTo('#qunit-fixture');
+ comp.find('.add-on').click();
+ ok(comp.data('datepicker'), 'prepend component initialized by "click" event on add-on');
+ comp.remove();
+});
+
+test('DATA-API: data-provide="datepicker" on button', function(){
+ var html, comp;
+
+ html = '<button data-provide="datepicker">';
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.focus();
+ ok(comp.data('datepicker'), 'button initialized by "focus" event on input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.click();
+ ok(comp.data('datepicker'), 'button initialized by "click" event on input');
+ comp.remove();
+});
+
+test('DATA-API: data-provide="datepicker" on rangepicker', function(){
+ var html, comp;
+
+ html = '<div class="input-daterange" data-provide="datepicker">'+
+ '<input class="datepicker">'+
+ '<span class="add-on">to</span>'+
+ '<input class="datepicker">'+
+ '</div>';
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input:first').focus();
+ ok(comp.data('datepicker'), 'range initialized by "focus" event on first input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input:first').click();
+ ok(comp.data('datepicker'), 'range initialized by "click" event on first input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input:last').focus();
+ ok(comp.data('datepicker'), 'range initialized by "focus" event on last input');
+ comp.remove();
+
+ comp = $(html).appendTo('#qunit-fixture');
+ comp.find('input:last').click();
+ ok(comp.data('datepicker'), 'range initialized by "click" event on last input');
+ comp.remove();
+});
View
@@ -283,11 +283,3 @@ test('DaysOfWeekDisabled', function(){
target = picker.find('.datepicker-days tbody td:nth(26)');
ok(target.hasClass('disabled'), 'Day of week is disabled');
});
-
-test('DATA-API: data-provide="datepicker"', function(){
- var input = $('<input data-provide="datepicker" />')
- .appendTo('#qunit-fixture');
- input.focus();
- ok(input.data('datepicker'), 'datepicker is initialized by "focus" event');
-});
-
View
@@ -35,6 +35,7 @@
<script src="suites/options.js"></script>
<script src="suites/inline.js"></script>
<script src="suites/calendar-weeks.js"></script>
+ <script src="suites/data-api.js"></script>
</head>
<body>
<h1 id="qunit-header">bootstrap-datepicker</h1>
@@ -44,4 +45,4 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>
</body>
-</html>
+</html>

0 comments on commit f3bd620

Please sign in to comment.