From f3bd620cc7beed87f1577bef1aabfab6bfd99d64 Mon Sep 17 00:00:00 2001
From: Andrew Rowls <andrew@eternicode.com>
Date: Thu, 4 Apr 2013 15:23:03 -0400
Subject: [PATCH] Extend data-api to all picker types, enact on click event,
 add tests

---
 js/bootstrap-datepicker.js |  18 ++++--
 tests/suites/data-api.js   | 114 +++++++++++++++++++++++++++++++++++++
 tests/suites/options.js    |   8 ---
 tests/tests.html           |   3 +-
 4 files changed, 129 insertions(+), 14 deletions(-)
 create mode 100644 tests/suites/data-api.js

diff --git a/js/bootstrap-datepicker.js b/js/bootstrap-datepicker.js
index 6f80b59..74dfd10 100644
--- a/js/bootstrap-datepicker.js
+++ b/js/bootstrap-datepicker.js
@@ -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 );
diff --git a/tests/suites/data-api.js b/tests/suites/data-api.js
new file mode 100644
index 0000000..a751f57
--- /dev/null
+++ b/tests/suites/data-api.js
@@ -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();
+});
diff --git a/tests/suites/options.js b/tests/suites/options.js
index 5db69f0..2cb33b9 100644
--- a/tests/suites/options.js
+++ b/tests/suites/options.js
@@ -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');
-});
-
diff --git a/tests/tests.html b/tests/tests.html
index bab4d9a..8112dba 100644
--- a/tests/tests.html
+++ b/tests/tests.html
@@ -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 @@
         <ol id="qunit-tests"></ol>
         <div id="qunit-fixture"></div>
     </body>
-</html>
\ No newline at end of file
+</html>