date-range.blade.php 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. @extends('adminlte::components.form.input-group-component')
  2. {{-- Set errors bag internallly --}}
  3. @php($setErrorsBag($errors ?? null))
  4. {{-- Set input group item section --}}
  5. @section('input_group_item')
  6. {{-- Date Range Input --}}
  7. <input id="{{ $id }}" name="{{ $name }}"
  8. {{ $attributes->merge(['class' => $makeItemClass()]) }}>
  9. @overwrite
  10. {{-- Add plugin initialization and configuration code --}}
  11. @push('js')
  12. <script>
  13. $(() => {
  14. let usrCfg = _AdminLTE_DateRange.parseCfg( @json($config) );
  15. // Add support to display a placeholder. In this situation, the related
  16. // input won't be updated automatically and the cancel button will be
  17. // used to clear the input.
  18. @if($attributes->has('placeholder'))
  19. usrCfg.autoUpdateInput = false;
  20. $('#{{ $id }}').on('apply.daterangepicker', function(ev, picker)
  21. {
  22. let startDate = picker.startDate.format(picker.locale.format);
  23. let endDate = picker.endDate.format(picker.locale.format);
  24. let value = picker.singleDatePicker
  25. ? startDate
  26. : startDate + picker.locale.separator + endDate;
  27. $(this).val(value);
  28. });
  29. $('#{{ $id }}').on('cancel.daterangepicker', function(ev, picker)
  30. {
  31. $(this).val('');
  32. });
  33. @endif
  34. // Check if the default set of ranges should be enabled, and if a
  35. // default range should be set at initialization.
  36. @isset($enableDefaultRanges)
  37. usrCfg.ranges = usrCfg.ranges || _AdminLTE_DateRange.defaultRanges;
  38. let range = usrCfg.ranges[ @json($enableDefaultRanges) ];
  39. if (Array.isArray(range) && range.length > 1) {
  40. usrCfg.startDate = range[0];
  41. usrCfg.endDate = range[1];
  42. }
  43. @endisset
  44. // Add support to auto select the previous submitted value in case
  45. // of validation errors. Note the previous value may be a date range or
  46. // a single date depending on the plugin configuration.
  47. @if($errors->any() && $enableOldSupport)
  48. let oldRange = @json($getOldValue($errorKey, ""));
  49. let separator = " - ";
  50. if (usrCfg.locale && usrCfg.locale.separator) {
  51. separator = usrCfg.locale.separator;
  52. }
  53. // Update the related input.
  54. if (! usrCfg.autoUpdateInput) {
  55. $('#{{ $id }}').val(oldRange);
  56. }
  57. // Update the internal plugin data.
  58. if (oldRange) {
  59. oldRange = oldRange.split(separator);
  60. usrCfg.startDate = oldRange.length > 0 ? oldRange[0] : null;
  61. usrCfg.endDate = oldRange.length > 1 ? oldRange[1] : null;
  62. }
  63. @endif
  64. // Setup the underlying date range plugin.
  65. $('#{{ $id }}').daterangepicker(usrCfg);
  66. })
  67. </script>
  68. @endpush
  69. {{-- Register Javascript utility class for this component --}}
  70. @once
  71. @push('js')
  72. <script>
  73. class _AdminLTE_DateRange {
  74. /**
  75. * A default set of ranges options.
  76. */
  77. static defaultRanges = {
  78. 'Today': [
  79. moment().startOf('day'),
  80. moment().endOf('day')
  81. ],
  82. 'Yesterday': [
  83. moment().subtract(1, 'days').startOf('day'),
  84. moment().subtract(1, 'days').endOf('day')
  85. ],
  86. 'Last 7 Days': [
  87. moment().subtract(6, 'days'),
  88. moment()
  89. ],
  90. 'Last 30 Days': [
  91. moment().subtract(29, 'days'),
  92. moment()
  93. ],
  94. 'This Month': [
  95. moment().startOf('month'),
  96. moment().endOf('month')
  97. ],
  98. 'Last Month': [
  99. moment().subtract(1, 'month').startOf('month'),
  100. moment().subtract(1, 'month').endOf('month')
  101. ]
  102. }
  103. /**
  104. * Parse the php plugin configuration and eval the javascript code.
  105. *
  106. * cfg: A json with the php side configuration.
  107. */
  108. static parseCfg(cfg)
  109. {
  110. for (const prop in cfg) {
  111. let v = cfg[prop];
  112. if (typeof v === 'string' && v.startsWith('js:')) {
  113. cfg[prop] = eval(v.slice(3));
  114. } else if (typeof v === 'object') {
  115. cfg[prop] = _AdminLTE_DateRange.parseCfg(v);
  116. }
  117. }
  118. return cfg;
  119. }
  120. }
  121. </script>
  122. @endpush
  123. @endonce