/**
|
Bootstrap-datetimepicker.
|
Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).
|
Before usage you should manually include dependent js and css:
|
|
<link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link>
|
<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
|
and set `language` option.
|
|
@class datetime
|
@extends abstractinput
|
@final
|
@since 1.4.4
|
@example
|
<a href="#" id="last_seen" data-type="datetime" data-pk="1" data-url="/post" title="Select date & time">15/03/2013 12:45</a>
|
<script>
|
$(function(){
|
$('#last_seen').editable({
|
format: 'yyyy-mm-dd hh:ii',
|
viewformat: 'dd/mm/yyyy hh:ii',
|
datetimepicker: {
|
weekStart: 1
|
}
|
}
|
});
|
});
|
</script>
|
**/
|
(function ($) {
|
"use strict";
|
|
var DateTime = function (options) {
|
this.init('datetime', options, DateTime.defaults);
|
this.initPicker(options, DateTime.defaults);
|
};
|
|
$.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);
|
|
$.extend(DateTime.prototype, {
|
initPicker: function(options, defaults) {
|
//'format' is set directly from settings or data-* attributes
|
|
//by default viewformat equals to format
|
if(!this.options.viewformat) {
|
this.options.viewformat = this.options.format;
|
}
|
|
//try parse datetimepicker config defined as json string in data-datetimepicker
|
options.datetimepicker = $.fn.editableutils.tryParseJson(options.datetimepicker, true);
|
|
//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
|
this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
|
format: this.options.viewformat
|
});
|
|
//language
|
this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';
|
|
//store DPglobal
|
this.dpg = $.fn.datetimepicker.DPGlobal;
|
|
//store parsed formats
|
this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
|
this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
|
},
|
|
render: function () {
|
this.$input.datetimepicker(this.options.datetimepicker);
|
|
//adjust container position when viewMode changes
|
//see https://github.com/smalot/bootstrap-datetimepicker/pull/80
|
this.$input.on('changeMode', function(e) {
|
var f = $(this).closest('form').parent();
|
//timeout here, otherwise container changes position before form has new size
|
setTimeout(function(){
|
f.triggerHandler('resize');
|
}, 0);
|
});
|
|
//"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) {
|
//formatDate works with UTCDate!
|
var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
|
if(element) {
|
DateTime.superclass.value2html.call(this, text, element);
|
} else {
|
return text;
|
}
|
},
|
|
html2value: function(html) {
|
//parseDate return utc date!
|
var value = this.parseDate(html, this.parsedViewFormat);
|
return value ? this.fromUTC(value) : null;
|
},
|
|
value2str: function(value) {
|
//formatDate works with UTCDate!
|
return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
|
},
|
|
str2value: function(str) {
|
//parseDate return utc date!
|
var value = this.parseDate(str, this.parsedFormat);
|
return value ? this.fromUTC(value) : null;
|
},
|
|
value2submit: function(value) {
|
return this.value2str(value);
|
},
|
|
value2input: function(value) {
|
if(value) {
|
this.$input.data('datetimepicker').setDate(value);
|
}
|
},
|
|
input2value: function() {
|
//date may be cleared, in that case getDate() triggers error
|
var dt = this.$input.data('datetimepicker');
|
return dt.date ? dt.getDate() : null;
|
},
|
|
activate: function() {
|
},
|
|
clear: function() {
|
this.$input.data('datetimepicker').date = null;
|
this.$input.find('.active').removeClass('active');
|
if(!this.options.showbuttons) {
|
this.$input.closest('form').submit();
|
}
|
},
|
|
autosubmit: function() {
|
this.$input.on('mouseup', '.minute', function(e){
|
var $form = $(this).closest('form');
|
setTimeout(function() {
|
$form.submit();
|
}, 200);
|
});
|
},
|
|
//convert date from local to utc
|
toUTC: function(value) {
|
return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value;
|
},
|
|
//convert date from utc to local
|
fromUTC: function(value) {
|
return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value;
|
},
|
|
/*
|
For incorrect date bootstrap-datetimepicker returns current date that is not suitable
|
for datetimefield.
|
This function returns null for incorrect date.
|
*/
|
parseDate: function(str, format) {
|
var date = null, formattedBack;
|
if(str) {
|
date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
|
if(typeof str === 'string') {
|
formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
|
if(str !== formattedBack) {
|
date = null;
|
}
|
}
|
}
|
return date;
|
}
|
|
});
|
|
DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
|
/**
|
@property tpl
|
@default <div></div>
|
**/
|
tpl:'<div class="editable-date well"></div>',
|
/**
|
@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>
|
Possible tokens are: <code>d, dd, m, mm, yy, yyyy, h, i</code>
|
|
@property format
|
@type string
|
@default yyyy-mm-dd hh:ii
|
**/
|
format:'yyyy-mm-dd hh:ii',
|
formatType:'standard',
|
/**
|
Format used for displaying date. Also applied when converting date from element's text on init.
|
If not specified equals to <code>format</code>
|
|
@property viewformat
|
@type string
|
@default null
|
**/
|
viewformat: null,
|
/**
|
Configuration of datetimepicker.
|
Full list of options: https://github.com/smalot/bootstrap-datetimepicker
|
|
@property datetimepicker
|
@type object
|
@default { }
|
**/
|
datetimepicker:{
|
todayHighlight: false,
|
autoclose: false
|
},
|
/**
|
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.datetime = DateTime;
|
|
}(window.jQuery));
|
