pikaday-responsive.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. /**
  2. * This file has been modified from its original version.
  3. *
  4. * var $ = jQuery; has been added for jQuery no conflict mode.
  5. * $el.wrap("<span class='pikaday__container'></span>"); has been changed to $el.wrap("<div class='pikaday__container'></div>"); so that the container is a div.
  6. * placeholder: "Select a date", has been changed to placeholder: "", to remove the placeholder.
  7. *
  8. * Modernizr dependency has been removed.
  9. */
  10. (function (root, factory) {
  11. if (typeof define === 'function') {
  12. define('pikaday-responsive', ['exports'], function (exports) {
  13. return (exports['default'] = factory());
  14. });
  15. } else if (typeof module === 'object') {
  16. module.exports = factory();
  17. } else {
  18. root.pikadayResponsive = factory();
  19. }
  20. }(this, function () {
  21. var $ = jQuery;
  22. // Check if all dependencies are loaded
  23. if (!moment) {
  24. console.error("You need to load moment.js in order to use pikaday-responsive.");
  25. return;
  26. }
  27. if (!jQuery) {
  28. console.error("You need to load jQuery in order to use pikaday-responsive.");
  29. return;
  30. }
  31. if (!Pikaday) {
  32. console.error("You need to load pikaday in order to use pikaday-responsive.");
  33. return;
  34. }
  35. var defaultOptions = {
  36. format: "YYYY-MM-DD",
  37. outputFormat: "YYYY-MM-DD",
  38. checkIfNativeDate: function () {
  39. return false;
  40. },
  41. classes: "",
  42. placeholder: "",
  43. pikadayOptions: {},
  44. dayOffset: 0
  45. };
  46. return function (el, options) {
  47. var $el = $(el);
  48. var settings = $.extend({}, defaultOptions, options);
  49. // The container element for the input
  50. var $container;
  51. // The actual input field
  52. var $input;
  53. // The display input field
  54. var $display;
  55. // The actual output value
  56. var obj = {
  57. pikaday: null,
  58. value: null,
  59. date: null,
  60. element: $el[0]
  61. };
  62. // Check if first param is <input>
  63. if (!$el.length || $el[0].tagName !== "INPUT") {
  64. console.error("pikadayResponsive expects an input-field as its first element.", $el[0]);
  65. return false;
  66. }
  67. // The original input field is made hidden. This field will contain the actual value.
  68. $el.attr("type", "hidden");
  69. // Wrap the input in a container
  70. $el.wrap("<div class='pikaday__container'></div>");
  71. $container = $el.parent(".pikaday__container");
  72. if (settings.checkIfNativeDate()) {
  73. // Use native date picker
  74. $input = $("<input type='date' class='pikaday__invisible' placeholder='" + settings.placeholder + "' />");
  75. $container.append($input);
  76. $display = $("<input type='text' readonly='readonly' class='pikaday__display pikaday__display--native " + settings.classes + "' placeholder='" + settings.placeholder + "' />");
  77. $container.append($display);
  78. $input.on("change", function () {
  79. var val = $(this).val();
  80. $display.removeClass("is-empty");
  81. if (!val) {
  82. obj.date = null;
  83. obj.value = null;
  84. $display.addClass("is-empty");
  85. } else {
  86. obj.date = moment(val, "YYYY-MM-DD");
  87. obj.value = obj.date.format(settings.outputFormat);
  88. }
  89. // Convert numbers (unix timestamp) to ints
  90. if (obj.value * 1 === parseInt(obj.value, 10)) {
  91. obj.value *= 1;
  92. }
  93. $el.val(obj.value);
  94. if (obj.date) {
  95. $display.val(obj.date.format(settings.format));
  96. } else {
  97. $display.val(null);
  98. }
  99. $el.trigger("change");
  100. $el.trigger("change-date", [obj]);
  101. });
  102. } else {
  103. // Use Pikaday
  104. $input = $("<input type='text' class='pikaday__display pikaday__display--pikaday " + settings.classes + "' placeholder='" + settings.placeholder + "' />");
  105. $container.append($input);
  106. var hasSelected = false;
  107. var selectTimer = null;
  108. obj.pikaday = new Pikaday($.extend({}, settings.pikadayOptions, {
  109. field: $input[0],
  110. format: settings.format,
  111. }));
  112. $input.on("change", function () {
  113. if (hasSelected) {
  114. return;
  115. }
  116. hasSelected = true;
  117. selectTimer = window.setTimeout(function () {
  118. hasSelected = false;
  119. }, 10);
  120. var val = $(this).val();
  121. $input.removeClass("is-empty");
  122. if (!val) {
  123. obj.date = null;
  124. obj.value = null;
  125. $input.addClass("is-empty")
  126. } else {
  127. obj.date = moment(val, settings.format);
  128. // Add an optional day offset to account for time zones
  129. obj.date.add(settings.dayOffset, "day");
  130. obj.value = obj.date.format(settings.outputFormat);
  131. $(this).val(obj.date.format(settings.format));
  132. }
  133. // Convert numbers (unix timestamp) to ints
  134. if (obj.value * 1 === parseInt(obj.value, 10)) {
  135. obj.value *= 1;
  136. }
  137. $el.val(obj.value);
  138. // Wait 1ms in order to circumvent bug where events weren't triggered
  139. setTimeout(function () {
  140. $el.trigger("change");
  141. $el.trigger("change-date", [obj]);
  142. }, 1);
  143. });
  144. }
  145. /**
  146. * This function sets the date to a specific value.
  147. *
  148. * @method setDate
  149. * @param date It is preferred to give a moment-object as param, but vanilla Dates or strings in the outputFormat work too
  150. * @returns Object The moment-date that was used to set the date
  151. */
  152. var setDate = function (date, format) {
  153. // If date is null, reset the field
  154. if (!date) {
  155. if (obj.pikaday) {
  156. obj.pikaday.setDate(null);
  157. } else {
  158. $input.val(null);
  159. $input.trigger("change");
  160. }
  161. return null;
  162. }
  163. // Format date into moment-date
  164. if (typeof date === "object" && typeof date.format !== "function") {
  165. date = moment(date);
  166. }
  167. if (typeof date === "string") {
  168. if (typeof format === "undefined" || !format) {
  169. format = settings.outputFormat;
  170. }
  171. date = moment(date, format);
  172. }
  173. if (typeof date === "number") {
  174. date = moment(date);
  175. }
  176. if (obj.pikaday) {
  177. obj.pikaday.setMoment(date);
  178. } else {
  179. $input.val(date.format("YYYY-MM-DD"));
  180. $input.trigger("change");
  181. }
  182. return date;
  183. };
  184. if ($el.val()) {
  185. setDate($el.val());
  186. }
  187. obj.setDate = setDate;
  188. return obj;
  189. }
  190. }));