123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321 |
- /**
- 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));
- /**
- Bootstrap datetimefield input - datetime input for inline mode.
- Shows normal <input type="text"> and binds popup datetimepicker.
- Automatically shown in inline mode.
- @class datetimefield
- @extends datetime
- **/
- (function ($) {
- "use strict";
- var DateTimeField = function (options) {
- this.init('datetimefield', options, DateTimeField.defaults);
- this.initPicker(options, DateTimeField.defaults);
- };
- $.fn.editableutils.inherit(DateTimeField, $.fn.editabletypes.datetime);
- $.extend(DateTimeField.prototype, {
- render: function () {
- this.$input = this.$tpl.find('input');
- this.setClass();
- this.setAttr('placeholder');
- this.$tpl.datetimepicker(this.options.datetimepicker);
- //need to disable original event handlers
- this.$input.off('focus keydown');
- //update value of datepicker
- this.$input.keyup($.proxy(function () {
- this.$tpl.removeData('date');
- this.$tpl.datetimepicker('update');
- }, this));
- },
- value2input: function (value) {
- this.$input.val(this.value2html(value));
- this.$tpl.datetimepicker('update');
- },
- input2value: function () {
- return this.html2value(this.$input.val());
- },
- activate: function () {
- $.fn.editabletypes.text.prototype.activate.call(this);
- },
- autosubmit: function () {
- //reset autosubmit to empty
- }
- });
- DateTimeField.defaults = $.extend({}, $.fn.editabletypes.datetime.defaults, {
- /**
- @property tpl
- **/
- tpl: '<div class="input-group date"><input type="text" class="form-control" readonly><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>',
- /**
- @property inputclass
- @default 'input-medium'
- **/
- inputclass: 'input-medium',
- /* datetimepicker config */
- datetimepicker: {
- todayHighlight: false,
- autoclose: true
- }
- });
- $.fn.editabletypes.datetimefield = DateTimeField;
- }(window.jQuery));
|