/**
|
Combodate input - dropdown date and time picker.
|
Based on [combodate](http://vitalets.github.com/combodate) plugin (included). To use it you should manually include [momentjs](http://momentjs.com).
|
|
<script src="js/moment.min.js"></script>
|
|
Allows to input:
|
|
* only date
|
* only time
|
* both date and time
|
|
Please note, that format is taken from momentjs and **not compatible** with bootstrap-datepicker / jquery UI datepicker.
|
Internally value stored as `momentjs` object.
|
|
@class combodate
|
@extends abstractinput
|
@final
|
@since 1.4.0
|
@example
|
<a href="#" id="dob" data-type="combodate" data-pk="1" data-url="/post" data-value="1984-05-15" data-title="Select date"></a>
|
<script>
|
$(function(){
|
$('#dob').editable({
|
format: 'YYYY-MM-DD',
|
viewformat: 'DD.MM.YYYY',
|
template: 'D / MMMM / YYYY',
|
combodate: {
|
minYear: 2000,
|
maxYear: new Date().getFullYear(),
|
minuteStep: 1
|
}
|
}
|
});
|
});
|
</script>
|
**/
|
|
/*global moment*/
|
|
(function ($) {
|
"use strict";
|
|
var Constructor = function (options) {
|
this.init('combodate', options, Constructor.defaults);
|
|
//by default viewformat equals to format
|
if(!this.options.viewformat) {
|
this.options.viewformat = this.options.format;
|
}
|
|
//try parse combodate config defined as json string in data-combodate
|
options.combodate = $.fn.editableutils.tryParseJson(options.combodate, true);
|
|
//overriding combodate config (as by default jQuery extend() is not recursive)
|
this.options.combodate = $.extend({}, Constructor.defaults.combodate, options.combodate, {
|
format: this.options.format,
|
template: this.options.template
|
});
|
};
|
|
$.fn.editableutils.inherit(Constructor, $.fn.editabletypes.abstractinput);
|
|
$.extend(Constructor.prototype, {
|
render: function () {
|
this.$input.combodate(this.options.combodate);
|
|
if($.fn.editableform.engine === 'bs3') {
|
this.$input.siblings().find('select').addClass('form-control');
|
}
|
|
if(this.options.inputclass) {
|
this.$input.siblings().find('select').addClass(this.options.inputclass);
|
}
|
//"clear" link
|
/*
|
if(this.options.clear) {
|
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
|
e.preventDefault();
|
e.stopPropagation();
|
this.clear();
|
}, this));
|
|
this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
|
}
|
*/
|
},
|
|
value2html: function(value, element) {
|
var text = value ? value.format(this.options.viewformat) : '';
|
//$(element).text(text);
|
Constructor.superclass.value2html.call(this, text, element);
|
},
|
|
html2value: function(html) {
|
return html ? moment(html, this.options.viewformat) : null;
|
},
|
|
value2str: function(value) {
|
return value ? value.format(this.options.format) : '';
|
},
|
|
str2value: function(str) {
|
return str ? moment(str, this.options.format) : null;
|
},
|
|
value2submit: function(value) {
|
return this.value2str(value);
|
},
|
|
value2input: function(value) {
|
this.$input.combodate('setValue', value);
|
},
|
|
input2value: function() {
|
return this.$input.combodate('getValue', null);
|
},
|
|
activate: function() {
|
this.$input.siblings('.combodate').find('select').eq(0).focus();
|
},
|
|
/*
|
clear: function() {
|
this.$input.data('datepicker').date = null;
|
this.$input.find('.active').removeClass('active');
|
},
|
*/
|
|
autosubmit: function() {
|
|
}
|
|
});
|
|
Constructor.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
/**
|
@property tpl
|
@default <input type="text">
|
**/
|
tpl:'<input type="text">',
|
/**
|
@property inputclass
|
@default null
|
**/
|
inputclass: null,
|
/**
|
Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
|
See list of tokens in [momentjs docs](http://momentjs.com/docs/#/parsing/string-format)
|
|
@property format
|
@type string
|
@default YYYY-MM-DD
|
**/
|
format:'YYYY-MM-DD',
|
/**
|
Format used for displaying date. Also applied when converting date from element's text on init.
|
If not specified equals to `format`.
|
|
@property viewformat
|
@type string
|
@default null
|
**/
|
viewformat: null,
|
/**
|
Template used for displaying dropdowns.
|
|
@property template
|
@type string
|
@default D / MMM / YYYY
|
**/
|
template: 'D / MMM / YYYY',
|
/**
|
Configuration of combodate.
|
Full list of options: http://vitalets.github.com/combodate/#docs
|
|
@property combodate
|
@type object
|
@default null
|
**/
|
combodate: null
|
|
/*
|
(not implemented yet)
|
Text shown as clear date button.
|
If <code>false</code> clear button will not be rendered.
|
|
@property clear
|
@type boolean|string
|
@default 'x clear'
|
*/
|
//clear: '× clear'
|
});
|
|
$.fn.editabletypes.combodate = Constructor;
|
|
}(window.jQuery));
|
