use noConflict of bootstrap-datepicker, fix #156

CHANGELOG.txt

@@ -3,6 +3,7 @@ X-editable changelog
 
 Version 1.4.5 wip
 ----------------------------
+[bug #156] conflict of bootstrap datepicker and jQuery UI datepicker (vitalets)
 [enh] update bootstrap-datepicker to 1.1.2 (vitalets)
 [enh] allow follow links in disabled state (vitalets)
 [enh] update combodate to 1.0.4, fix #222 (vitalets)

src/inputs/date/bootstrap-datepicker/js/bootstrap-datepicker.js

@@ -18,7 +18,7 @@
  * limitations under the License.
  * ========================================================= */
 
-!function( $ ) {
+(function( $ ) {
 
 	function UTCDate(){
 		return new Date(Date.UTC.apply(Date, arguments));
@@ -36,7 +36,6 @@
 		this._process_options(options);
 
 		this.element = $(element);
-		this.format = DPGlobal.parseFormat(this.o.format);
 		this.isInline = false;
 		this.isInput = this.element.is('input');
 		this.component = this.element.is('.date') ? this.element.find('.add-on, .btn') : false;
@@ -103,7 +102,7 @@
 			if (!dates[lang]) {
 				lang = lang.split('-')[0];
 				if (!dates[lang])
-					lang = $.fn.datepicker.defaults.language;
+					lang = defaults.language;
 			}
 			o.language = lang;
 
@@ -247,10 +246,8 @@
 				type: event,
 				date: local_date,
 				format: $.proxy(function(altformat){
-					var format = this.format;
+					var format = altformat || this.o.format;
-					if (altformat)
+					return DPGlobal.formatDate(date, format, this.o.language);
-						format = DPGlobal.parseFormat(altformat);
-					return DPGlobal.formatDate(date, format, this.language);
 				}, this)
 			});
 		},
@@ -329,7 +326,7 @@
 
 		getFormattedDate: function(format) {
 			if (format === undefined)
-				format = this.format;
+				format = this.o.format;
 			return DPGlobal.formatDate(this.date, format, this.o.language);
 		},
 
@@ -378,7 +375,7 @@
 				delete this.element.data().date;
 			}
 
-			this.date = DPGlobal.parseDate(date, this.format, this.o.language);
+			this.date = DPGlobal.parseDate(date, this.o.format, this.o.language);
 
 			if(fromArgs) this.setValue();
 
@@ -636,10 +633,14 @@
 								this._setDate(date, which);
 								break;
 							case 'clear':
+								var element;
 								if (this.isInput)
-									this.element.val("");
+									element = this.element;
-								else
+								else if (this.component)
-									this.element.find('input').val("");
+									element = this.element.find('input');
+								if (element)
+									element.val("").change();
+								this._trigger('changeDate');
 								this.update();
 								if (this.o.autoclose)
 									this.hide();
@@ -949,7 +950,7 @@
 				return;
 		}
 		var d = dates[lang];
-		$.each($.fn.datepicker.locale_opts, function(i,k){
+		$.each(locale_opts, function(i,k){
 			if (k in d)
 				out[k] = d[k];
 		});
@@ -969,10 +970,10 @@
 			if (!data) {
 				var elopts = opts_from_el(this, 'date'),
 					// Preliminary otions
-					xopts = $.extend({}, $.fn.datepicker.defaults, elopts, options),
+					xopts = $.extend({}, defaults, elopts, options),
 					locopts = opts_from_locale(xopts.language),
 					// Options priority: js args, data-attrs, locales, defaults
-					opts = $.extend({}, $.fn.datepicker.defaults, locopts, elopts, options);
+					opts = $.extend({}, defaults, locopts, elopts, options);
 				if ($this.is('.input-daterange') || opts.inputs){
 					var ropts = {
 						inputs: opts.inputs || $this.find('input').toArray()
@@ -995,7 +996,7 @@
 			return this;
 	};
 
-	$.fn.datepicker.defaults = {
+	var defaults = $.fn.datepicker.defaults = {
 		autoclose: false,
 		beforeShowDay: $.noop,
 		calendarWeeks: false,
@@ -1014,7 +1015,7 @@
 		todayHighlight: false,
 		weekStart: 0
 	};
-	$.fn.datepicker.locale_opts = [
+	var locale_opts = $.fn.datepicker.locale_opts = [
 		'format',
 		'rtl',
 		'weekStart'
@@ -1069,6 +1070,8 @@
 		},
 		parseDate: function(date, format, language) {
 			if (date instanceof Date) return date;
+			if (typeof format === 'string')
+				format = DPGlobal.parseFormat(format);
 			if (/^[\-+]\d+[dmwy]([\s,]+[\-+]\d+[dmwy])*$/.test(date)) {
 				var part_re = /([\-+]\d+)([dmwy])/,
 					parts = date.match(/([\-+]\d+)([dmwy])/g),
@@ -1159,6 +1162,8 @@
 			return date;
 		},
 		formatDate: function(date, format, language){
+			if (typeof format === 'string')
+				format = DPGlobal.parseFormat(format);
 			var val = {
 				d: date.getUTCDate(),
 				D: dates[language].daysShort[date.getUTCDay()],
@@ -1244,4 +1249,4 @@
 		$('[data-provide="datepicker-inline"]').datepicker();
 	});
 
-}( window.jQuery );
+}( window.jQuery ));

src/inputs/date/date.js

@@ -26,6 +26,9 @@ $(function(){
 (function ($) {
     "use strict";
     
+    //store bootstrap-datepicker as bdateicker to exclude conflict with jQuery UI one
+    $.fn.bdatepicker = $.fn.datepicker.noConflict();    
+    
     var Date = function (options) {
         this.init('date', options, Date.defaults);
         this.initPicker(options, Date.defaults);
@@ -52,7 +55,7 @@ $(function(){
             this.options.datepicker.language = this.options.datepicker.language || 'en'; 
 
             //store DPglobal
-            this.dpg = $.fn.datepicker.DPGlobal; 
+            this.dpg = $.fn.bdatepicker.DPGlobal; 
 
             //store parsed formats
             this.parsedFormat = this.dpg.parseFormat(this.options.format);
@@ -60,7 +63,7 @@ $(function(){
         },
         
         render: function () {
-            this.$input.datepicker(this.options.datepicker);
+            this.$input.bdatepicker(this.options.datepicker);
             
             //"clear" link
             if(this.options.clear) {
@@ -96,7 +99,7 @@ $(function(){
        },                    
 
        value2input: function(value) {
-           this.$input.datepicker('update', value);
+           this.$input.bdatepicker('update', value);
        },
         
        input2value: function() { 
@@ -198,4 +201,4 @@ $(function(){
 
     $.fn.editabletypes.date = Date;
 
-}(window.jQuery));
+}(window.jQuery));

src/inputs/date/datefield.js

@@ -23,8 +23,9 @@ Automatically shown in inline mode.
             this.$input = this.$tpl.find('input');
             this.setClass();
             this.setAttr('placeholder');
-            
+    
-            this.$tpl.datepicker(this.options.datepicker);
+            //bootstrap-datepicker is set `bdateicker` to exclude conflict with jQuery UI one. (in date.js)        
+            this.$tpl.bdatepicker(this.options.datepicker);
             
             //need to disable original event handlers
             this.$input.off('focus keydown');
@@ -32,14 +33,14 @@ Automatically shown in inline mode.
             //update value of datepicker
             this.$input.keyup($.proxy(function(){
                this.$tpl.removeData('date');
-               this.$tpl.datepicker('update');
+               this.$tpl.bdatepicker('update');
             }, this));
             
         },   
         
        value2input: function(value) {
            this.$input.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
-           this.$tpl.datepicker('update');
+           this.$tpl.bdatepicker('update');
        },
         
        input2value: function() { 

test/unit/date.js

@@ -5,7 +5,7 @@ $(function () {
    module("date", {
         setup: function(){
             fx = $('#async-fixture');
-            dpg = $.fn.datepicker.DPGlobal;
+            dpg = $.fn.bdatepicker.DPGlobal;
             $.support.transition = false;
             mode = $.fn.editable.defaults.mode;
             $.fn.editable.defaults.mode = 'popup';

test/unit/datefield.js

@@ -5,7 +5,7 @@ $(function () {
    module("datefield", {
         setup: function(){
             fx = $('#async-fixture');
-            dpg = $.fn.datepicker.DPGlobal;
+            dpg = $.fn.bdatepicker.DPGlobal;
             $.support.transition = false;
             
             mode = $.fn.editable.defaults.mode;