tracer/x-editable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix lint errors

Browse Source
This commit is contained in:
vitalets 2013-06-23 17:16:15 +04:00
parent 46d77f50bb
commit 89cccbb860
7 changed files with 216 additions and 211 deletions

42
src/containers/editable-container.js

@ -141,13 +141,13 @@ Applied as jQuery method.
nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed) nochange: $.proxy(function(){ this.hide('nochange'); }, this), //click on submit button (value NOT changed)
cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on calcel button cancel: $.proxy(function(){ this.hide('cancel'); }, this), //click on calcel button
show: $.proxy(function() { show: $.proxy(function() {
if(this.delayedHide) { if(this.delayedHide) {
this.hide(this.delayedHide.reason); this.hide(this.delayedHide.reason);
this.delayedHide = false; this.delayedHide = false;
} else { } else {
this.setPosition(); this.setPosition();
} }
}, this), //re-position container every time form is shown (occurs each time after loading state) }, this), //re-position container every time form is shown (occurs each time after loading state)
rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown rendering: $.proxy(this.setPosition, this), //this allows to place container correctly when loading shown
resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed resize: $.proxy(this.setPosition, this), //this allows to re-position container when form size is changed
rendered: $.proxy(function(){ rendered: $.proxy(function(){
@ -230,16 +230,16 @@ Applied as jQuery method.
//if form is saving value, schedule hide //if form is saving value, schedule hide
if(this.$form.data('editableform').isSaving) { if(this.$form.data('editableform').isSaving) {
this.delayedHide = {reason: reason}; this.delayedHide = {reason: reason};
return; return;
} else { } else {
this.delayedHide = false; this.delayedHide = false;
} }
this.$element.removeClass('editable-open'); this.$element.removeClass('editable-open');
this.innerHide(); this.innerHide();
/** /**
Fired when container was hidden. It occurs on both save or cancel. Fired when container was hidden. It occurs on both save or cancel.
**Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one. **Note:** Bootstrap popover has own `hidden` event that now cannot be separated from x-editable's one.
The workaround is to check `arguments.length` that is always `2` for x-editable. The workaround is to check `arguments.length` that is always `2` for x-editable.
@ -253,20 +253,20 @@ Applied as jQuery method.
//auto-open next editable //auto-open next editable
$(this).closest('tr').next().find('.editable').editable('show'); $(this).closest('tr').next().find('.editable').editable('show');
} }
}); });
**/ **/
this.$element.triggerHandler('hidden', reason || 'manual'); this.$element.triggerHandler('hidden', reason || 'manual');
}, },
/* internal show method. To be overwritten in child classes */ /* internal show method. To be overwritten in child classes */
innerShow: function () { innerShow: function () {
}, },
/* internal hide method. To be overwritten in child classes */ /* internal hide method. To be overwritten in child classes */
innerHide: function () { innerHide: function () {
}, },
/** /**
Toggles container visibility (show / hide) Toggles container visibility (show / hide)

17
src/editable-form/editable-form-utils.js

@ -222,16 +222,21 @@
//see http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr //see http://stackoverflow.com/questions/7264899/detect-css-transitions-using-javascript-and-without-modernizr
supportsTransitions: function () { supportsTransitions: function () {
var b = document.body || document.documentElement; var b = document.body || document.documentElement,
var s = b.style; s = b.style,
var p = 'transition'; p = 'transition',
if(typeof s[p] == 'string') {return true; } v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
if(typeof s[p] === 'string') {
return true;
}
// Tests for vendor specific prop // Tests for vendor specific prop
v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'],
p = p.charAt(0).toUpperCase() + p.substr(1); p = p.charAt(0).toUpperCase() + p.substr(1);
for(var i=0; i<v.length; i++) { for(var i=0; i<v.length; i++) {
if(typeof s[v[i] + p] == 'string') { return true; } if(typeof s[v[i] + p] === 'string') {
return true;
}
} }
return false; return false;
} }

26
src/editable-form/editable-form.js

@ -224,30 +224,30 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
//sending data to server //sending data to server
$.when(this.save(submitValue)) $.when(this.save(submitValue))
.done($.proxy(function(response) { .done($.proxy(function(response) {
this.isSaving = false; this.isSaving = false;
//run success callback //run success callback
var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null; var res = typeof this.options.success === 'function' ? this.options.success.call(this.options.scope, response, newValue) : null;
//if success callback returns false --> keep form open and do not activate input //if success callback returns false --> keep form open and do not activate input
if(res === false) { if(res === false) {
this.error(false); this.error(false);
this.showForm(false); this.showForm(false);
return; return;
} }
//if success callback returns string --> keep form open, show error and activate input //if success callback returns string --> keep form open, show error and activate input
if(typeof res === 'string') { if(typeof res === 'string') {
this.error(res); this.error(res);
this.showForm(); this.showForm();
return; return;
} }
//if success callback returns object like {newValue: <something>} --> use that value instead of submitted //if success callback returns object like {newValue: <something>} --> use that value instead of submitted
//it is usefull if you want to chnage value in url-function //it is usefull if you want to chnage value in url-function
if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) { if(res && typeof res === 'object' && res.hasOwnProperty('newValue')) {
newValue = res.newValue; newValue = res.newValue;
} }
//clear error message //clear error message
this.error(false); this.error(false);
@ -264,20 +264,20 @@ Editableform is linked with one of input types, e.g. 'text', 'select' etc.
@example @example
$('#form-div').on('save'), function(e, params){ $('#form-div').on('save'), function(e, params){
if(params.newValue === 'username') {...} if(params.newValue === 'username') {...}
}); });
**/ **/
this.$div.triggerHandler('save', {newValue: newValue, submitValue: submitValue, response: response}); this.$div.triggerHandler('save', {newValue: newValue, submitValue: submitValue, response: response});
}, this)) }, this))
.fail($.proxy(function(xhr) { .fail($.proxy(function(xhr) {
this.isSaving = false; this.isSaving = false;
var msg; var msg;
if(typeof this.options.error === 'function') { if(typeof this.options.error === 'function') {
msg = this.options.error.call(this.options.scope, xhr, newValue); msg = this.options.error.call(this.options.scope, xhr, newValue);
} else { } else {
msg = typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!'; msg = typeof xhr === 'string' ? xhr : xhr.responseText || xhr.statusText || 'Unknown error!';
} }
this.error(msg); this.error(msg);
this.showForm(); this.showForm();
}, this)); }, this));

44
src/element/editable-element.js

@ -89,7 +89,7 @@ Makes editable any HTML element on the page. Applied as jQuery method.
//if display is function it's far more convinient to have autotext = always to render correctly on init //if display is function it's far more convinient to have autotext = always to render correctly on init
//see https://github.com/vitalets/x-editable-yii/issues/34 //see https://github.com/vitalets/x-editable-yii/issues/34
if(typeof this.options.display === 'function') { if(typeof this.options.display === 'function') {
this.options.autotext = 'always' this.options.autotext = 'always';
} }
//check conditions for autotext: //check conditions for autotext:
@ -277,17 +277,17 @@ Makes editable any HTML element on the page. Applied as jQuery method.
*/ */
if(isEmpty !== undefined) { if(isEmpty !== undefined) {
this.isEmpty = isEmpty; this.isEmpty = isEmpty;
} else { } else {
//detect empty //detect empty
if($.trim(this.$element.html()) === '') { if($.trim(this.$element.html()) === '') {
this.isEmpty = true; this.isEmpty = true;
} else if($.trim(this.$element.text()) !== '') { } else if($.trim(this.$element.text()) !== '') {
this.isEmpty = false; this.isEmpty = false;
} else { } else {
//e.g. '<img>' //e.g. '<img>'
this.isEmpty = !this.$element.height() || !this.$element.width(); this.isEmpty = !this.$element.height() || !this.$element.width();
} }
} }
//emptytext shown only for enabled //emptytext shown only for enabled
if(!this.options.disabled) { if(!this.options.disabled) {
@ -546,18 +546,18 @@ Makes editable any HTML element on the page. Applied as jQuery method.
**/ **/
case 'getValue': case 'getValue':
if(arguments.length === 2 && arguments[1] === true) { //isSingle = true if(arguments.length === 2 && arguments[1] === true) { //isSingle = true
result = this.eq(0).data(datakey).value; result = this.eq(0).data(datakey).value;
} else { } else {
this.each(function () { this.each(function () {
var $this = $(this), data = $this.data(datakey); var $this = $(this), data = $this.data(datakey);
if (data && data.value !== undefined && data.value !== null) { if (data && data.value !== undefined && data.value !== null) {
result[data.options.name] = data.input.value2submit(data.value); result[data.options.name] = data.input.value2submit(data.value);
} }
}); });
} }
return result; return result;
/** /**
This method collects values from several editable elements and submit them all to server. This method collects values from several editable elements and submit them all to server.
Internally it runs client-side validation for all fields and submits only in case of success. Internally it runs client-side validation for all fields and submits only in case of success.
See <a href="#newrecord">creating new records</a> for details. See <a href="#newrecord">creating new records</a> for details.

80
src/inputs/abstract.js

@ -7,23 +7,23 @@ To create your own input you can inherit from this class.
**/ **/
(function ($) { (function ($) {
"use strict"; "use strict";
//types //types
$.fn.editabletypes = {}; $.fn.editabletypes = {};
var AbstractInput = function () { }; var AbstractInput = function () { };
AbstractInput.prototype = { AbstractInput.prototype = {
/** /**
Initializes input Initializes input
@method init() @method init()
**/ **/
init: function(type, options, defaults) { init: function(type, options, defaults) {
this.type = type; this.type = type;
this.options = $.extend({}, defaults, options); this.options = $.extend({}, defaults, options);
}, },
/* /*
this method called before render to init $tpl that is inserted in DOM this method called before render to init $tpl that is inserted in DOM
*/ */
@ -37,107 +37,107 @@ To create your own input you can inherit from this class.
/** /**
Renders input from tpl. Can return jQuery deferred object. Renders input from tpl. Can return jQuery deferred object.
Can be overwritten in child objects Can be overwritten in child objects
@method render() @method render()
**/ **/
render: function() { render: function() {
}, },
/** /**
Sets element's html by value. Sets element's html by value.
@method value2html(value, element) @method value2html(value, element)
@param {mixed} value @param {mixed} value
@param {DOMElement} element @param {DOMElement} element
**/ **/
value2html: function(value, element) { value2html: function(value, element) {
$(element).text($.trim(value)); $(element).text($.trim(value));
}, },
/** /**
Converts element's html to value Converts element's html to value
@method html2value(html) @method html2value(html)
@param {string} html @param {string} html
@returns {mixed} @returns {mixed}
**/ **/
html2value: function(html) { html2value: function(html) {
return $('<div>').html(html).text(); return $('<div>').html(html).text();
}, },
/** /**
Converts value to string (for internal compare). For submitting to server used value2submit(). Converts value to string (for internal compare). For submitting to server used value2submit().
@method value2str(value) @method value2str(value)
@param {mixed} value @param {mixed} value
@returns {string} @returns {string}
**/ **/
value2str: function(value) { value2str: function(value) {
return value; return value;
}, },
/** /**
Converts string received from server into value. Usually from `data-value` attribute. Converts string received from server into value. Usually from `data-value` attribute.
@method str2value(str) @method str2value(str)
@param {string} str @param {string} str
@returns {mixed} @returns {mixed}
**/ **/
str2value: function(str) { str2value: function(str) {
return str; return str;
}, },
/** /**
Converts value for submitting to server. Result can be string or object. Converts value for submitting to server. Result can be string or object.
@method value2submit(value) @method value2submit(value)
@param {mixed} value @param {mixed} value
@returns {mixed} @returns {mixed}
**/ **/
value2submit: function(value) { value2submit: function(value) {
return value; return value;
}, },
/** /**
Sets value of input. Sets value of input.
@method value2input(value) @method value2input(value)
@param {mixed} value @param {mixed} value
**/ **/
value2input: function(value) { value2input: function(value) {
this.$input.val(value); this.$input.val(value);
}, },
/** /**
Returns value of input. Value can be object (e.g. datepicker) Returns value of input. Value can be object (e.g. datepicker)
@method input2value() @method input2value()
**/ **/
input2value: function() { input2value: function() {
return this.$input.val(); return this.$input.val();
}, },
/** /**
Activates input. For text it sets focus. Activates input. For text it sets focus.
@method activate() @method activate()
**/ **/
activate: function() { activate: function() {
if(this.$input.is(':visible')) { if(this.$input.is(':visible')) {
this.$input.focus(); this.$input.focus();
} }
}, },
/** /**
Creates input. Creates input.
@method clear() @method clear()
**/ **/
clear: function() { clear: function() {
this.$input.val(null); this.$input.val(null);
}, },
/** /**
method to escape html. method to escape html.
**/ **/
@ -147,7 +147,7 @@ To create your own input you can inherit from this class.
/** /**
attach handler to automatically submit form when value changed (useful when buttons not shown) attach handler to automatically submit form when value changed (useful when buttons not shown)
**/ **/
autosubmit: function() { autosubmit: function() {
}, },
@ -155,16 +155,16 @@ To create your own input you can inherit from this class.
/** /**
Additional actions when destroying element Additional actions when destroying element
**/ **/
destroy: function() { destroy: function() {
}, },
// -------- helper functions -------- // -------- helper functions --------
setClass: function() { setClass: function() {
if(this.options.inputclass) { if(this.options.inputclass) {
this.$input.addClass(this.options.inputclass); this.$input.addClass(this.options.inputclass);
} }
}, },
setAttr: function(attr) { setAttr: function(attr) {
if (this.options[attr] !== undefined && this.options[attr] !== null) { if (this.options[attr] !== undefined && this.options[attr] !== null) {
this.$input.attr(attr, this.options[attr]); this.$input.attr(attr, this.options[attr]);

122
src/inputs/date/date.js

@ -82,51 +82,51 @@ $(function(){
Date.superclass.value2html(text, element); Date.superclass.value2html(text, element);
}, },
html2value: function(html) { html2value: function(html) {
return this.parseDate(html, this.parsedViewFormat); return this.parseDate(html, this.parsedViewFormat);
}, },
value2str: function(value) { value2str: function(value) {
return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : ''; return value ? this.dpg.formatDate(value, this.parsedFormat, this.options.datepicker.language) : '';
}, },
str2value: function(str) { str2value: function(str) {
return this.parseDate(str, this.parsedFormat); return this.parseDate(str, this.parsedFormat);
}, },
value2submit: function(value) { value2submit: function(value) {
return this.value2str(value); return this.value2str(value);
}, },
value2input: function(value) { value2input: function(value) {
this.$input.bdatepicker('update', value); this.$input.bdatepicker('update', value);
}, },
input2value: function() { input2value: function() {
return this.$input.data('datepicker').date; return this.$input.data('datepicker').date;
}, },
activate: function() { activate: function() {
}, },
clear: function() { clear: function() {
this.$input.data('datepicker').date = null; this.$input.data('datepicker').date = null;
this.$input.find('.active').removeClass('active'); this.$input.find('.active').removeClass('active');
if(!this.options.showbuttons) { if(!this.options.showbuttons) {
this.$input.closest('form').submit(); this.$input.closest('form').submit();
} }
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('mouseup', '.day', function(e){ this.$input.on('mouseup', '.day', function(e){
if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) { if($(e.currentTarget).is('.old') || $(e.currentTarget).is('.new')) {
return; return;
} }
var $form = $(this).closest('form'); var $form = $(this).closest('form');
setTimeout(function() { setTimeout(function() {
$form.submit(); $form.submit();
}, 200); }, 200);
}); });
//changedate is not suitable as it triggered when showing datepicker. see #149 //changedate is not suitable as it triggered when showing datepicker. see #149
/* /*
this.$input.on('changeDate', function(e){ this.$input.on('changeDate', function(e){
@ -144,21 +144,21 @@ $(function(){
This function returns null for incorrect date. This function returns null for incorrect date.
*/ */
parseDate: function(str, format) { parseDate: function(str, format) {
var date = null, formattedBack; var date = null, formattedBack;
if(str) { if(str) {
date = this.dpg.parseDate(str, format, this.options.datepicker.language); date = this.dpg.parseDate(str, format, this.options.datepicker.language);
if(typeof str === 'string') { if(typeof str === 'string') {
formattedBack = this.dpg.formatDate(date, format, this.options.datepicker.language); formattedBack = this.dpg.formatDate(date, format, this.options.datepicker.language);
if(str !== formattedBack) { if(str !== formattedBack) {
date = null; date = null;
} }
} }
} }
return date; return date;
} }
}); });
Date.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { Date.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@ -168,30 +168,30 @@ $(function(){
/** /**
@property inputclass @property inputclass
@default null @default null
**/ **/
inputclass: null, inputclass: null,
/** /**
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br> Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
Possible tokens are: <code>d, dd, m, mm, yy, yyyy</code> Possible tokens are: <code>d, dd, m, mm, yy, yyyy</code>
@property format @property format
@type string @type string
@default yyyy-mm-dd @default yyyy-mm-dd
**/ **/
format:'yyyy-mm-dd', format:'yyyy-mm-dd',
/** /**
Format used for displaying date. Also applied when converting date from element's text on init. Format used for displaying date. Also applied when converting date from element's text on init.
If not specified equals to <code>format</code> If not specified equals to <code>format</code>
@property viewformat @property viewformat
@type string @type string
@default null @default null
**/ **/
viewformat: null, viewformat: null,
/** /**
Configuration of datepicker. Configuration of datepicker.
Full list of options: http://vitalets.github.com/bootstrap-datepicker Full list of options: http://vitalets.github.com/bootstrap-datepicker
@property datepicker @property datepicker
@type object @type object
@default { @default {
@ -210,14 +210,14 @@ $(function(){
/** /**
Text shown as clear date button. Text shown as clear date button.
If <code>false</code> clear button will not be rendered. If <code>false</code> clear button will not be rendered.
@property clear @property clear
@type boolean|string @type boolean|string
@default 'x clear' @default 'x clear'
**/ **/
clear: '&times; clear' clear: '&times; clear'
}); });
$.fn.editabletypes.date = Date; $.fn.editabletypes.date = Date;
}(window.jQuery)); }(window.jQuery));

96
src/inputs/datetime/datetime.js

@ -5,7 +5,7 @@ Before usage you should manually include dependent js and css:
<link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link> <link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link>
<script src="js/bootstrap-datetimepicker.js"></script> <script src="js/bootstrap-datetimepicker.js"></script>
For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
and set `language` option. and set `language` option.
@ -30,14 +30,14 @@ $(function(){
**/ **/
(function ($) { (function ($) {
"use strict"; "use strict";
var DateTime = function (options) { var DateTime = function (options) {
this.init('datetime', options, DateTime.defaults); this.init('datetime', options, DateTime.defaults);
this.initPicker(options, DateTime.defaults); this.initPicker(options, DateTime.defaults);
}; };
$.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput); $.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);
$.extend(DateTime.prototype, { $.extend(DateTime.prototype, {
initPicker: function(options, defaults) { initPicker: function(options, defaults) {
//'format' is set directly from settings or data-* attributes //'format' is set directly from settings or data-* attributes
@ -46,13 +46,13 @@ $(function(){
if(!this.options.viewformat) { if(!this.options.viewformat) {
this.options.viewformat = this.options.format; this.options.viewformat = this.options.format;
} }
//overriding datetimepicker config (as by default jQuery extend() is not recursive) //overriding datetimepicker config (as by default jQuery extend() is not recursive)
//since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only //since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only
this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, { this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
format: this.options.viewformat format: this.options.viewformat
}); });
//language //language
this.options.datetimepicker.language = this.options.datetimepicker.language || 'en'; this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';
@ -63,10 +63,10 @@ $(function(){
this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType); this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType); this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
}, },
render: function () { render: function () {
this.$input.datetimepicker(this.options.datetimepicker); this.$input.datetimepicker(this.options.datetimepicker);
//adjust container position when viewMode changes //adjust container position when viewMode changes
//see https://github.com/smalot/bootstrap-datetimepicker/pull/80 //see https://github.com/smalot/bootstrap-datetimepicker/pull/80
this.$input.on('changeMode', function(e) { this.$input.on('changeMode', function(e) {
@ -75,8 +75,8 @@ $(function(){
setTimeout(function(){ setTimeout(function(){
f.triggerHandler('resize'); f.triggerHandler('resize');
}, 0); }, 0);
}); });
//"clear" link //"clear" link
if(this.options.clear) { if(this.options.clear) {
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){ this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
@ -84,11 +84,11 @@ $(function(){
e.stopPropagation(); e.stopPropagation();
this.clear(); this.clear();
}, this)); }, this));
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear)); this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
} }
}, },
value2html: function(value, element) { value2html: function(value, element) {
//formatDate works with UTCDate! //formatDate works with UTCDate!
var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : ''; var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
@ -96,45 +96,45 @@ $(function(){
DateTime.superclass.value2html(text, element); DateTime.superclass.value2html(text, element);
} else { } else {
return text; return text;
} }
}, },
html2value: function(html) { html2value: function(html) {
//parseDate return utc date! //parseDate return utc date!
var value = this.parseDate(html, this.parsedViewFormat); var value = this.parseDate(html, this.parsedViewFormat);
return value ? this.fromUTC(value) : null; return value ? this.fromUTC(value) : null;
}, },
value2str: function(value) { value2str: function(value) {
//formatDate works with UTCDate! //formatDate works with UTCDate!
return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : ''; return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
}, },
str2value: function(str) { str2value: function(str) {
//parseDate return utc date! //parseDate return utc date!
var value = this.parseDate(str, this.parsedFormat); var value = this.parseDate(str, this.parsedFormat);
return value ? this.fromUTC(value) : null; return value ? this.fromUTC(value) : null;
}, },
value2submit: function(value) { value2submit: function(value) {
return this.value2str(value); return this.value2str(value);
}, },
value2input: function(value) { value2input: function(value) {
if(value) { if(value) {
this.$input.data('datetimepicker').setDate(value); this.$input.data('datetimepicker').setDate(value);
} }
}, },
input2value: function() { input2value: function() {
//date may be cleared, in that case getDate() triggers error //date may be cleared, in that case getDate() triggers error
var dt = this.$input.data('datetimepicker'); var dt = this.$input.data('datetimepicker');
return dt.date ? dt.getDate() : null; return dt.date ? dt.getDate() : null;
}, },
activate: function() { activate: function() {
}, },
clear: function() { clear: function() {
this.$input.data('datetimepicker').date = null; this.$input.data('datetimepicker').date = null;
this.$input.find('.active').removeClass('active'); this.$input.find('.active').removeClass('active');
@ -142,7 +142,7 @@ $(function(){
this.$input.closest('form').submit(); this.$input.closest('form').submit();
} }
}, },
autosubmit: function() { autosubmit: function() {
this.$input.on('mouseup', '.minute', function(e){ this.$input.on('mouseup', '.minute', function(e){
var $form = $(this).closest('form'); var $form = $(this).closest('form');
@ -151,38 +151,38 @@ $(function(){
}, 200); }, 200);
}); });
}, },
//convert date from local to utc //convert date from local to utc
toUTC: function(value) { toUTC: function(value) {
return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value; return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value;
}, },
//convert date from utc to local //convert date from utc to local
fromUTC: function(value) { fromUTC: function(value) {
return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value; return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value;
}, },
/* /*
For incorrect date bootstrap-datetimepicker returns current date that is not suitable For incorrect date bootstrap-datetimepicker returns current date that is not suitable
for datetimefield. for datetimefield.
This function returns null for incorrect date. This function returns null for incorrect date.
*/ */
parseDate: function(str, format) { parseDate: function(str, format) {
var date = null, formattedBack; var date = null, formattedBack;
if(str) { if(str) {
date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType); date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
if(typeof str === 'string') { if(typeof str === 'string') {
formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType); formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
if(str !== formattedBack) { if(str !== formattedBack) {
date = null; date = null;
} }
} }
} }
return date; return date;
} }
}); });
DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, { DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
/** /**
@property tpl @property tpl
@ -192,7 +192,7 @@ $(function(){
/** /**
@property inputclass @property inputclass
@default null @default null
**/ **/
inputclass: null, inputclass: null,
/** /**
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br> Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
@ -211,12 +211,12 @@ $(function(){
@property viewformat @property viewformat
@type string @type string
@default null @default null
**/ **/
viewformat: null, viewformat: null,
/** /**
Configuration of datetimepicker. Configuration of datetimepicker.
Full list of options: https://github.com/smalot/bootstrap-datetimepicker Full list of options: https://github.com/smalot/bootstrap-datetimepicker
@property datetimepicker @property datetimepicker
@type object @type object
@default { } @default { }
@ -228,13 +228,13 @@ $(function(){
/** /**
Text shown as clear date button. Text shown as clear date button.
If <code>false</code> clear button will not be rendered. If <code>false</code> clear button will not be rendered.
@property clear @property clear
@type boolean|string @type boolean|string
@default 'x clear' @default 'x clear'
**/ **/
clear: '&times; clear' clear: '&times; clear'
}); });
$.fn.editabletypes.datetime = DateTime; $.fn.editabletypes.datetime = DateTime;