diff --git a/src/editable-form/editable-form-utils.js b/src/editable-form/editable-form-utils.js
index cb16236..9ccc7ad 100644
--- a/src/editable-form/editable-form-utils.js
+++ b/src/editable-form/editable-form-utils.js
@@ -155,13 +155,25 @@
var TypeConstructor, typeOptions, input,
type = options.type;
- if(type === 'date' && options.mode === 'inline') {
- if($.fn.editabletypes.datefield) {
- type = 'datefield';
- } else if($.fn.editabletypes.dateuifield) {
- type = 'dateuifield';
- }
- }
+ //`date` is some kind of virtual type that is transformed to one of exact types
+ //depending on mode and core lib
+ if(type === 'date') {
+ //inline
+ if(options.mode === 'inline') {
+ if($.fn.editabletypes.datefield) {
+ type = 'datefield';
+ } else if($.fn.editabletypes.dateuifield) {
+ type = 'dateuifield';
+ }
+ //popup
+ } else {
+ if($.fn.editabletypes.date) {
+ type = 'date';
+ } else if($.fn.editabletypes.dateui) {
+ type = 'dateui';
+ }
+ }
+ }
//create input of specified type. Input will be used for converting value, not in form
if(typeof $.fn.editabletypes[type] === 'function') {
diff --git a/src/editable-form/editable-form.js b/src/editable-form/editable-form.js
index b52e71c..c97c58d 100644
--- a/src/editable-form/editable-form.js
+++ b/src/editable-form/editable-form.js
@@ -60,7 +60,7 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@param {Object} event event object
**/
this.$div.triggerHandler('rendering');
-
+
//render input
$.when(this.input.render())
.then($.proxy(function () {
diff --git a/src/inputs/abstract.js b/src/inputs/abstract.js
index 3370ddb..a258001 100644
--- a/src/inputs/abstract.js
+++ b/src/inputs/abstract.js
@@ -76,7 +76,7 @@ To create your own input you can inherit from this class.
},
/**
- Converts string received from server into value.
+ Converts string received from server into value. Usually from `data-value` attribute.
@method str2value(str)
@param {string} str
@@ -87,7 +87,7 @@ To create your own input you can inherit from this class.
},
/**
- Converts value for submitting to server
+ Converts value for submitting to server. Result can be string or object.
@method value2submit(value)
@param {mixed} value
diff --git a/src/inputs/date/datefield.js b/src/inputs/date/datefield.js
index 55737d7..dc9c8d6 100644
--- a/src/inputs/date/datefield.js
+++ b/src/inputs/date/datefield.js
@@ -38,16 +38,8 @@ Automatically shown in inline mode.
},
- value2str: function(value) {
- return value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
- },
-
- value2submit: function(value) {
- return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : null;
- },
-
value2input: function(value) {
- this.$field.val(this.value2str(value));
+ this.$field.val(value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '');
this.$input.datepicker('update');
},
@@ -70,7 +62,7 @@ Automatically shown in inline mode.
DateField.defaults = $.extend({}, $.fn.editabletypes.date.defaults, {
/**
@property tpl
- @default <input type="text">
+ @default
**/
tpl:'<div class="input-append date"><input class="input-small" type="text"/><span class="add-on"><i class="icon-th"></i></span></div>',
/**
@@ -79,13 +71,14 @@ Automatically shown in inline mode.
**/
inputclass: '',
+ /* datepicker config */
datepicker: {
weekStart: 0,
startView: 0,
- autoclose: true,
- keyboardNavigation: false
+ autoclose: true
},
-
+
+ /* disable clear link */
clear: false
});
diff --git a/src/inputs/dateui/dateui.js b/src/inputs/dateui/dateui.js
index 49e7b34..dc3f31f 100644
--- a/src/inputs/dateui/dateui.js
+++ b/src/inputs/dateui/dateui.js
@@ -26,30 +26,29 @@ $(function(){
var DateUI = function (options) {
this.init('dateui', options, DateUI.defaults);
-
- //set popular options directly from settings or data-* attributes
- var directOptions = $.fn.editableutils.sliceObj(this.options, ['format']);
-
- //overriding datepicker config (as by default jQuery extend() is not recursive)
- this.options.datepicker = $.extend({}, DateUI.defaults.datepicker, directOptions, options.datepicker);
-
- //by default viewformat equals to format
- if(!this.options.viewformat) {
- this.options.viewformat = this.options.datepicker.format;
- }
-
- //correct formats: replace yyyy with yy
- this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy');
- this.options.datepicker.format = this.options.datepicker.format.replace('yyyy', 'yy');
-
- //copy format to dateFormat (dateFormat option required for ui datepicker).
- //This allows common option 'format' for all datepickers
- this.options.datepicker.dateFormat = this.options.datepicker.format;
+ this.initPicker(options, DateUI.defaults);
};
$.fn.editableutils.inherit(DateUI, $.fn.editabletypes.abstractinput);
$.extend(DateUI.prototype, {
+ initPicker: function(options, defaults) {
+ //by default viewformat equals to format
+ if(!this.options.viewformat) {
+ this.options.viewformat = this.options.format;
+ }
+
+ //correct formats: replace yyyy with yy (for compatibility with bootstrap datepicker)
+ this.options.viewformat = this.options.viewformat.replace('yyyy', 'yy');
+ this.options.format = this.options.format.replace('yyyy', 'yy');
+
+ //overriding datepicker config (as by default jQuery extend() is not recursive)
+ //since 1.4 datepicker internally uses viewformat instead of format. Format is for submit only
+ this.options.datepicker = $.extend({}, defaults.datepicker, options.datepicker, {
+ dateFormat: this.options.viewformat
+ });
+ },
+
render: function () {
DateUI.superclass.render.call(this);
this.$input.datepicker(this.options.datepicker);
@@ -83,7 +82,7 @@ $(function(){
},
value2str: function(value) {
- return $.datepicker.formatDate(this.options.datepicker.dateFormat, value);
+ return $.datepicker.formatDate(this.options.format, value);
},
str2value: function(str) {
@@ -94,13 +93,13 @@ $(function(){
//if string does not match format, UI datepicker throws exception
var d;
try {
- d = $.datepicker.parseDate(this.options.datepicker.dateFormat, str);
+ d = $.datepicker.parseDate(this.options.format, str);
} catch(e) {}
return d;
},
- value2submit: function(value) {
+ value2submit: function(value) {
return this.value2str(value);
},
@@ -189,6 +188,5 @@ $(function(){
});
$.fn.editabletypes.dateui = DateUI;
- $.fn.editabletypes.date = DateUI;
}(window.jQuery));
diff --git a/src/inputs/dateui/dateuifield.js b/src/inputs/dateui/dateuifield.js
new file mode 100644
index 0000000..a8b9cc9
--- /dev/null
+++ b/src/inputs/dateui/dateuifield.js
@@ -0,0 +1,80 @@
+/**
+jQuery UI datefield input - modification for inline mode.
+Shows normal <input type="text"> and binds popup datepicker.
+Automatically shown in inline mode.
+**/
+(function ($) {
+
+ var DateUIField = function (options) {
+ this.init('dateuifield', options, DateUIField.defaults);
+ this.initPicker(options, DateUIField.defaults);
+ };
+
+ $.fn.editableutils.inherit(DateUIField, $.fn.editabletypes.dateui);
+
+ $.extend(DateUIField.prototype, {
+ render: function () {
+ $.fn.editabletypes.dateui.superclass.render.call(this);
+ this.$field = this.$input.find('input');
+ this.$field.datepicker(this.options.datepicker);
+
+ /*
+ if(this.options.clear) {
+ this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
+ e.preventDefault();
+ e.stopPropagation();
+ this.clear();
+ }, this));
+ }
+ */
+ },
+
+ value2input: function(value) {
+ this.$field.val($.datepicker.formatDate(this.options.viewformat, value));
+ },
+
+ input2value: function() {
+ return this.html2value(this.$field.val());
+ },
+
+ activate: function() {
+ if(this.$field.is(':visible')) {
+ this.$field.focus();
+ $.fn.editableutils.setCursorPosition(this.$field.get(0), this.$field.val().length);
+ }
+ },
+
+ autosubmit: function() {
+ //reset autosubmit to empty
+ }
+ });
+
+ DateUIField.defaults = $.extend({}, $.fn.editabletypes.dateui.defaults, {
+ /**
+ @property tpl
+ @default <input type="text">
+ **/
+ tpl: '<div><input type="text" /></div>',
+ /**
+ @property inputclass
+ @default ''
+ **/
+ inputclass: '',
+
+ /* datepicker config */
+ datepicker: {
+ showOn: "button",
+ buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
+ buttonImageOnly: true,
+ firstDay: 0,
+ changeYear: true,
+ changeMonth: true
+ },
+
+ /* disable clear link */
+ clear: false
+ });
+
+ $.fn.editabletypes.dateuifield = DateUIField;
+
+}(window.jQuery));
\ No newline at end of file
diff --git a/test/loader.js b/test/loader.js
index c2b37be..bc4d32f 100644
--- a/test/loader.js
+++ b/test/loader.js
@@ -95,6 +95,7 @@ define(function () {
'jqueryui/js/jquery-ui-1.9.1.custom'
],
'inputs/dateui/dateui': ['inputs/abstract'],
+ 'inputs/dateui/dateuifield': ['inputs/dateui/dateui'],
//plain
//'inputs/dateui/dateui': ['inputs/abstract', 'inputs/date/bootstrap-datepicker/js/bootstrap-datepicker'],
@@ -136,7 +137,7 @@ define(function () {
shim['element/editable-element'].deps.push('containers/editable-popover');
} else if(f === 'jqueryui') {
//jqueryui
- shim['editable-form/editable-form'].deps.push('inputs/dateui/dateui');
+ shim['editable-form/editable-form'].deps.push('inputs/dateui/dateuifield');
shim['element/editable-element'].deps.push('editable-form/editable-form-jqueryui');
shim['element/editable-element'].deps.push('containers/editable-tooltip');
} else {