use input replace button

Author: wuyue92tree

adminlteui/templates/adminlte/date_range_filter.html

@@ -2,11 +2,14 @@
 {% get_current_language as LANGUAGE_CODE %}
 
 <div class="form-group" style="margin-bottom: 5px;">
-    <button id="id_filter_{{ field_name }}" type="button" class="btn btn-default pull-right">
-        <i class="fa fa-calendar"></i><span> {{ title }} </span><i class="fa fa-caret-down"></i>
-    </button>
-    <input id="id_filter_{{ field_name }}__gte" hidden type="text">
-    <input id="id_filter_{{ field_name }}__lte" hidden type="text">
+    <div class="input-group">
+        <div class="input-group-addon">
+            <i class="fa fa-calendar"></i>
+        </div>
+        <input type="text" class="form-control pull-right" id="id_filter_{{ field_name }}" value="{{ title }}">
+        <input id="id_filter_{{ field_name }}__gte" hidden type="text">
+        <input id="id_filter_{{ field_name }}__lte" hidden type="text">
+    </div>
 
     <script>
         $(document).ready(function () {
@@ -35,21 +38,19 @@
                         '{% trans "This Month" %}'  : [moment().startOf('month'), moment().endOf('month')],
                         '{% trans "Last Month" %}'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                     },
-                    startDate: moment().subtract(29, 'days'),
-                    endDate  : moment()
                 },
                 function (start, end) {
-                    $drp_input.find('span').html(' ' + start.format('{{ choices.0.date_format }}') + ' - ' + end.format('{{ choices.0.date_format }}') + ' ')
+                    $drp_input.val(start.format('{{ choices.0.date_format }}') + ' - ' + end.format('{{ choices.0.date_format }}'))
                 }
             );
             // act on date range selection via widget
             $drp_input.on('apply.daterangepicker', function(ev, picker) {
-                $drp_input.find('span').html(' ' + picker.startDate.format('{{ choices.0.date_format }}') + ' - ' + picker.endDate.format('{{ choices.0.date_format }}') + ' ')
+                $drp_input.val(picker.startDate.format('{{ choices.0.date_format }}') + ' - ' + picker.endDate.format('{{ choices.0.date_format }}'))
                 $('#id_filter_{{ field_name }}__gte').attr('name', '{{ field_name }}__gte').val(picker.startDate.format('YYYY-MM-DD'));
                 $('#id_filter_{{ field_name }}__lte').attr('name', '{{ field_name }}__lte').val(picker.endDate.format('YYYY-MM-DD'));
             });
             $drp_input.on('cancel.daterangepicker', function(ev, picker) {
-                $drp_input.find('span').html('{{ title }}' + ' ')
+                $drp_input.val('{{ title }}')
                 $('#id_filter_{{ field_name }}__gte').attr('name', '').val('');
                 $('#id_filter_{{ field_name }}__lte').attr('name', '').val('');
             });
@@ -63,8 +64,10 @@
                     picker.setEndDate(moment(vals[1], 'YYYY-MM-DD'));
                     $('#id_filter_{{ field_name }}__gte').attr('name', '{{ field_name }}__gte').val(vals[0]);
                     $('#id_filter_{{ field_name }}__lte').attr('name', '{{ field_name }}__lte').val(vals[1]);
-                    $drp_input.find('span').html(' ' + (moment(vals[0], 'YYYY-MM-DD').format('{{ choices.0.date_format }}') + ' - ' + moment(vals[1], 'YYYY-MM-DD').format('{{ choices.0.date_format }}') + ' '));
+                    $drp_input.val(moment(vals[0], 'YYYY-MM-DD').format('{{ choices.0.date_format }}') + ' - ' + moment(vals[1], 'YYYY-MM-DD').format('{{ choices.0.date_format }}'));
                 }
+            } else {
+                $drp_input.val('{{ title }}')
             }
         });
     </script>