bootstrap-editable-datetimepicker.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. /**
  2. Bootstrap-datetimepicker.
  3. Based on [smalot bootstrap-datetimepicker plugin](https://github.com/smalot/bootstrap-datetimepicker).
  4. Before usage you should manually include dependent js and css:
  5. <link href="css/datetimepicker.css" rel="stylesheet" type="text/css"></link>
  6. <script src="js/bootstrap-datetimepicker.js"></script>
  7. For **i18n** you should include js file from here: https://github.com/smalot/bootstrap-datetimepicker/tree/master/js/locales
  8. and set `language` option.
  9. @class datetime
  10. @extends abstractinput
  11. @final
  12. @since 1.4.4
  13. @example
  14. <a href="#" id="last_seen" data-type="datetime" data-pk="1" data-url="/post" title="Select date & time">15/03/2013 12:45</a>
  15. <script>
  16. $(function(){
  17. $('#last_seen').editable({
  18. format: 'yyyy-mm-dd hh:ii',
  19. viewformat: 'dd/mm/yyyy hh:ii',
  20. datetimepicker: {
  21. weekStart: 1
  22. }
  23. }
  24. });
  25. });
  26. </script>
  27. **/
  28. (function ($) {
  29. "use strict";
  30. var DateTime = function (options) {
  31. this.init('datetime', options, DateTime.defaults);
  32. this.initPicker(options, DateTime.defaults);
  33. };
  34. $.fn.editableutils.inherit(DateTime, $.fn.editabletypes.abstractinput);
  35. $.extend(DateTime.prototype, {
  36. initPicker: function (options, defaults) {
  37. //'format' is set directly from settings or data-* attributes
  38. //by default viewformat equals to format
  39. if (!this.options.viewformat) {
  40. this.options.viewformat = this.options.format;
  41. }
  42. //try parse datetimepicker config defined as json string in data-datetimepicker
  43. options.datetimepicker = $.fn.editableutils.tryParseJson(options.datetimepicker, true);
  44. //overriding datetimepicker config (as by default jQuery extend() is not recursive)
  45. //since 1.4 datetimepicker internally uses viewformat instead of format. Format is for submit only
  46. this.options.datetimepicker = $.extend({}, defaults.datetimepicker, options.datetimepicker, {
  47. format: this.options.viewformat
  48. });
  49. //language
  50. this.options.datetimepicker.language = this.options.datetimepicker.language || 'en';
  51. //store DPglobal
  52. this.dpg = $.fn.datetimepicker.DPGlobal;
  53. //store parsed formats
  54. this.parsedFormat = this.dpg.parseFormat(this.options.format, this.options.formatType);
  55. this.parsedViewFormat = this.dpg.parseFormat(this.options.viewformat, this.options.formatType);
  56. },
  57. render: function () {
  58. this.$input.datetimepicker(this.options.datetimepicker);
  59. //adjust container position when viewMode changes
  60. //see https://github.com/smalot/bootstrap-datetimepicker/pull/80
  61. this.$input.on('changeMode', function (e) {
  62. var f = $(this).closest('form').parent();
  63. //timeout here, otherwise container changes position before form has new size
  64. setTimeout(function () {
  65. f.triggerHandler('resize');
  66. }, 0);
  67. });
  68. //"clear" link
  69. if (this.options.clear) {
  70. this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function (e) {
  71. e.preventDefault();
  72. e.stopPropagation();
  73. this.clear();
  74. }, this));
  75. this.$tpl.parent().append($('<div class="editable-clear">').append(this.$clear));
  76. }
  77. },
  78. value2html: function (value, element) {
  79. //formatDate works with UTCDate!
  80. var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
  81. if (element) {
  82. DateTime.superclass.value2html.call(this, text, element);
  83. } else {
  84. return text;
  85. }
  86. },
  87. html2value: function (html) {
  88. //parseDate return utc date!
  89. var value = this.parseDate(html, this.parsedViewFormat);
  90. return value ? this.fromUTC(value) : null;
  91. },
  92. value2str: function (value) {
  93. //formatDate works with UTCDate!
  94. return value ? this.dpg.formatDate(this.toUTC(value), this.parsedFormat, this.options.datetimepicker.language, this.options.formatType) : '';
  95. },
  96. str2value: function (str) {
  97. //parseDate return utc date!
  98. var value = this.parseDate(str, this.parsedFormat);
  99. return value ? this.fromUTC(value) : null;
  100. },
  101. value2submit: function (value) {
  102. return this.value2str(value);
  103. },
  104. value2input: function (value) {
  105. if (value) {
  106. this.$input.data('datetimepicker').setDate(value);
  107. }
  108. },
  109. input2value: function () {
  110. //date may be cleared, in that case getDate() triggers error
  111. var dt = this.$input.data('datetimepicker');
  112. return dt.date ? dt.getDate() : null;
  113. },
  114. activate: function () {
  115. },
  116. clear: function () {
  117. this.$input.data('datetimepicker').date = null;
  118. this.$input.find('.active').removeClass('active');
  119. if (!this.options.showbuttons) {
  120. this.$input.closest('form').submit();
  121. }
  122. },
  123. autosubmit: function () {
  124. this.$input.on('mouseup', '.minute', function (e) {
  125. var $form = $(this).closest('form');
  126. setTimeout(function () {
  127. $form.submit();
  128. }, 200);
  129. });
  130. },
  131. //convert date from local to utc
  132. toUTC: function (value) {
  133. return value ? new Date(value.valueOf() - value.getTimezoneOffset() * 60000) : value;
  134. },
  135. //convert date from utc to local
  136. fromUTC: function (value) {
  137. return value ? new Date(value.valueOf() + value.getTimezoneOffset() * 60000) : value;
  138. },
  139. /*
  140. For incorrect date bootstrap-datetimepicker returns current date that is not suitable
  141. for datetimefield.
  142. This function returns null for incorrect date.
  143. */
  144. parseDate: function (str, format) {
  145. var date = null, formattedBack;
  146. if (str) {
  147. date = this.dpg.parseDate(str, format, this.options.datetimepicker.language, this.options.formatType);
  148. if (typeof str === 'string') {
  149. formattedBack = this.dpg.formatDate(date, format, this.options.datetimepicker.language, this.options.formatType);
  150. if (str !== formattedBack) {
  151. date = null;
  152. }
  153. }
  154. }
  155. return date;
  156. }
  157. });
  158. DateTime.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
  159. /**
  160. @property tpl
  161. @default <div></div>
  162. **/
  163. tpl: '<div class="editable-date well"></div>',
  164. /**
  165. @property inputclass
  166. @default null
  167. **/
  168. inputclass: null,
  169. /**
  170. Format used for sending value to server. Also applied when converting date from <code>data-value</code> attribute.<br>
  171. Possible tokens are: <code>d, dd, m, mm, yy, yyyy, h, i</code>
  172. @property format
  173. @type string
  174. @default yyyy-mm-dd hh:ii
  175. **/
  176. format: 'yyyy-mm-dd hh:ii',
  177. formatType: 'standard',
  178. /**
  179. Format used for displaying date. Also applied when converting date from element's text on init.
  180. If not specified equals to <code>format</code>
  181. @property viewformat
  182. @type string
  183. @default null
  184. **/
  185. viewformat: null,
  186. /**
  187. Configuration of datetimepicker.
  188. Full list of options: https://github.com/smalot/bootstrap-datetimepicker
  189. @property datetimepicker
  190. @type object
  191. @default { }
  192. **/
  193. datetimepicker: {
  194. todayHighlight: false,
  195. autoclose: false
  196. },
  197. /**
  198. Text shown as clear date button.
  199. If <code>false</code> clear button will not be rendered.
  200. @property clear
  201. @type boolean|string
  202. @default 'x clear'
  203. **/
  204. clear: '&times; clear'
  205. });
  206. $.fn.editabletypes.datetime = DateTime;
  207. }(window.jQuery));
  208. /**
  209. Bootstrap datetimefield input - datetime input for inline mode.
  210. Shows normal <input type="text"> and binds popup datetimepicker.
  211. Automatically shown in inline mode.
  212. @class datetimefield
  213. @extends datetime
  214. **/
  215. (function ($) {
  216. "use strict";
  217. var DateTimeField = function (options) {
  218. this.init('datetimefield', options, DateTimeField.defaults);
  219. this.initPicker(options, DateTimeField.defaults);
  220. };
  221. $.fn.editableutils.inherit(DateTimeField, $.fn.editabletypes.datetime);
  222. $.extend(DateTimeField.prototype, {
  223. render: function () {
  224. this.$input = this.$tpl.find('input');
  225. this.setClass();
  226. this.setAttr('placeholder');
  227. this.$tpl.datetimepicker(this.options.datetimepicker);
  228. //need to disable original event handlers
  229. this.$input.off('focus keydown');
  230. //update value of datepicker
  231. this.$input.keyup($.proxy(function () {
  232. this.$tpl.removeData('date');
  233. this.$tpl.datetimepicker('update');
  234. }, this));
  235. },
  236. value2input: function (value) {
  237. this.$input.val(this.value2html(value));
  238. this.$tpl.datetimepicker('update');
  239. },
  240. input2value: function () {
  241. return this.html2value(this.$input.val());
  242. },
  243. activate: function () {
  244. $.fn.editabletypes.text.prototype.activate.call(this);
  245. },
  246. autosubmit: function () {
  247. //reset autosubmit to empty
  248. }
  249. });
  250. DateTimeField.defaults = $.extend({}, $.fn.editabletypes.datetime.defaults, {
  251. /**
  252. @property tpl
  253. **/
  254. 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>',
  255. /**
  256. @property inputclass
  257. @default 'input-medium'
  258. **/
  259. inputclass: 'input-medium',
  260. /* datetimepicker config */
  261. datetimepicker: {
  262. todayHighlight: false,
  263. autoclose: true
  264. }
  265. });
  266. $.fn.editabletypes.datetimefield = DateTimeField;
  267. }(window.jQuery));