datepicker.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. {% assign value = include.value | default: '2020-06-20' %}
  2. {% assign placeholder = include.placeholder | default: 'Select a date' %}
  3. {% assign id = include.id %}
  4. {% if id %}
  5. {% capture input %}
  6. <input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ id }}" value="{{ value }}"/>
  7. {% endcapture %}
  8. {% if include.inline %}
  9. <div class="datepicker-inline" id="datepicker-{{ id }}"></div>
  10. {% elsif include.layout == 'icon' %}
  11. <div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
  12. {{ input | replace: include.class, '' }}
  13. <span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
  14. </div>
  15. {% elsif include.layout == 'icon-prepend' %}
  16. <div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
  17. <span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
  18. {{ input | replace: include.class, '' }}
  19. </div>
  20. {% else %}
  21. {{ input }}
  22. {% endif %}
  23. {% comment %}
  24. {% capture script %}
  25. <script>
  26. // @formatter:off
  27. document.addEventListener("DOMContentLoaded", function () {
  28. {% if env == 'development' %}
  29. window.tabler_datepicker = window.tabler_datepicker || {};
  30. {% endif %}
  31. window.Litepicker && ({% if env == 'development' %}window.tabler_datepicker["datepicker-{{ id }}"] = {% endif %}new Litepicker({
  32. element: document.getElementById('datepicker-{{ id }}'),
  33. buttonText: {
  34. previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{% endcapture %}{{ icon | strip }}`,
  35. nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{% endcapture %}{{ icon | strip }}`,
  36. },
  37. {% if include.inline %}inlineMode: true,{% endif %}
  38. }));
  39. });
  40. // @formatter:on
  41. </script>
  42. {% endcapture %}
  43. {% endcomment %}
  44. {% if include.show-scripts %}
  45. {{ script }}
  46. {% else %}
  47. {% comment %}
  48. {% capture_global scripts %}
  49. {{ script }}
  50. {% endcapture_global %}
  51. {% endcomment %}
  52. {% endif %}
  53. {% endif %}