merge request for both bootstrap v2 and v3 support

Author: smalot

css/datetimepicker.css

@@ -359,7 +359,8 @@
   background: #eeeeee;
 }
 .input-append.date .add-on i,
-.input-prepend.date .add-on i {
+.input-prepend.date .add-on i,
+.input-group.date .input-group-addon span{
   cursor: pointer;
   width: 14px;
   height: 14px;

css/datetimepicker.min.css

@@ -20,6 +20,13 @@
  * limitations under the License.
  * ========================================================= */
 
+/*
+ * Improvement by CuGBabyBeaR @ 2013-09-12
+ * 
+ * Make it work in bootstrap v3
+ */
+
+
 !function( $ ) {
 
 	function UTCDate(){
@@ -36,6 +43,7 @@
 		var that = this;
 
 		this.element = $(element);
+
 		this.language = options.language || this.element.data('date-language') || "en";
 		this.language = this.language in dates ? this.language : "en";
 		this.isRTL = dates[this.language].rtl || false;
@@ -44,8 +52,11 @@
 		this.isInline = false;
 		this.isVisible = false;
 		this.isInput = this.element.is('input');
-		this.component = this.element.is('.date') ? this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar').parent() : false;
-		this.componentReset = this.element.is('.date') ? this.element.find('.add-on .icon-remove').parent() : false;
+
+		this.bootcssVer = this.isInput ? (this.element.is('.form-control') ? 3 : 2) : ( this.bootcssVer = this.element.is('.input-group') ? 3 : 2 );
+
+		this.component = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-th, .input-group-addon .glyphicon-time, .input-group-addon .glyphicon-calendar').parent() : this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar').parent()) : false;
+		this.componentReset = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-remove').parent() : this.element.find('.add-on .icon-remove').parent()): false;
 		this.hasInput = this.component && this.element.find('input').length;
 		if (this.component && this.component.length === 0) {
 			this.component = false;
@@ -54,8 +65,10 @@
 		this.linkFormat = DPGlobal.parseFormat(options.linkFormat || this.element.data('link-format') || DPGlobal.getDefaultFormat(this.formatType, 'link'), this.formatType);
 		this.minuteStep = options.minuteStep || this.element.data('minute-step') || 5;
 		this.pickerPosition = options.pickerPosition || this.element.data('picker-position') || 'bottom-right';
-				this.showMeridian = options.showMeridian || this.element.data('show-meridian') || false;
-				this.initialDate = options.initialDate || new Date();
+		this.showMeridian = options.showMeridian || this.element.data('show-meridian') || false;
+		this.initialDate = options.initialDate || new Date();
+
+		
 
 		this._attachEvents();
 
@@ -128,7 +141,7 @@
 			this.forceParse = this.element.data('date-force-parse');
 		}
 
-		this.picker = $(DPGlobal.template)
+		this.picker = $((this.bootcssVer == 3)? DPGlobal.templateV3 : DPGlobal.template)
 							.appendTo(this.isInline ? this.element : 'body')
 							.on({
 								click: $.proxy(this.click, this),
@@ -153,8 +166,14 @@
 		}
 		if (this.isRTL){
 			this.picker.addClass('datetimepicker-rtl');
-			this.picker.find('.prev i, .next i')
+			if (this.bootcssVer == 3) {
+				this.picker.find('.prev span, .next span')
+						.toggleClass('glyphicon-arrow-left glyphicon-arrow-right');
+			}else{
+				this.picker.find('.prev i, .next i')
 						.toggleClass('icon-arrow-left icon-arrow-right');
+			};
+	
 		}
 		$(document).on('mousedown', function (e) {
 			// Clicked outside the datetimepicker, hide it
@@ -1523,6 +1542,13 @@
 								'<th class="next"><i class="icon-arrow-right"/></th>'+
 							'</tr>'+
 						'</thead>',
+		headTemplateV3: '<thead>'+
+							'<tr>'+
+								'<th class="prev"><i class="glyphicon glyphicon-arrow-left"></i> </th>'+
+								'<th colspan="5" class="switch"></th>'+
+								'<th class="next"><i class="glyphicon glyphicon-arrow-right"></i> </th>'+
+							'</tr>'+
+						'</thead>',
 		contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',
 		footTemplate: '<tfoot><tr><th colspan="7" class="today"></th></tr></tfoot>'
 	};
@@ -1563,7 +1589,43 @@
 								'</table>'+
 							'</div>'+
 						'</div>';
-
+	DPGlobal.templateV3 = '<div class="datetimepicker">'+
+							'<div class="datetimepicker-minutes">'+
+								'<table class=" table-condensed">'+
+									DPGlobal.headTemplateV3+
+									DPGlobal.contTemplate+
+									DPGlobal.footTemplate+
+								'</table>'+
+							'</div>'+
+							'<div class="datetimepicker-hours">'+
+								'<table class=" table-condensed">'+
+									DPGlobal.headTemplateV3+
+									DPGlobal.contTemplate+
+									DPGlobal.footTemplate+
+								'</table>'+
+							'</div>'+
+							'<div class="datetimepicker-days">'+
+								'<table class=" table-condensed">'+
+									DPGlobal.headTemplateV3+
+									'<tbody></tbody>'+
+									DPGlobal.footTemplate+
+								'</table>'+
+							'</div>'+
+							'<div class="datetimepicker-months">'+
+								'<table class="table-condensed">'+
+									DPGlobal.headTemplateV3+
+									DPGlobal.contTemplate+
+									DPGlobal.footTemplate+
+								'</table>'+
+							'</div>'+
+							'<div class="datetimepicker-years">'+
+								'<table class="table-condensed">'+
+									DPGlobal.headTemplateV3+
+									DPGlobal.contTemplate+
+									DPGlobal.footTemplate+
+								'</table>'+
+							'</div>'+
+						'</div>';
 	$.fn.datetimepicker.DPGlobal = DPGlobal;
 
 

js/bootstrap-datetimepicker.js

@@ -407,8 +407,10 @@
 .datetimepicker tfoot tr:first-child th:hover {
     background: #eeeeee;
 }
+
 .input-append.date .add-on i,
-.input-prepend.date .add-on i {
+.input-prepend.date .add-on i,
+.input-group.date .input-group-addon span {
     cursor: pointer;
     width: 14px;
     height: 14px;