Armitage2k Armitage2k - 1 month ago 16
Javascript Question

DateRangePicker - combine range selection with dynamic presets

I am using the DataRangePicker JS library in my form for selecting a range of two dates. DRP offers the function of placing a button with a dropdown menu of pre-defined dates such as Yesterday, Today, Last Month, etc., but I would like to have this as combined with the original dropdown window when clicking on the date input field.

DPR does offer a settings generator that can do this (in a way), but only allows for static dates to be set. I have since used the moment() functions to change those to dynamic ranges for the button, but cannot manage to combine the JS into one function. What am I doing wrong here?

HTML

<!-- Date and time range -->
<div class="form-group">
<label>Date and time range:</label>

<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control" name="daterangepicker" id="daterangepicker" />
</div>
<!-- /.input group -->

<button type="button" class="btn btn-default pull-right" name="daterange-btn" id="daterange-btn" />
<span>
<i class="fa fa-calendar"></i> Date range picker
</span>
<i class="fa fa-caret-down"></i>
</button>

</div>
<!-- /.form group -->


JS for input field (working)

$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY H:mm'
}
});


JS for button (working)

$('input[name="daterange-btn"]').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
)


Combined JS for input field (not working)

<script type="text/javascript">
//Date range picker with time picker
$(function() {
$('input[name="daterangepicker"]').daterangepicker({
alwaysShowCalendars: true,
showWeekNumbers: true,
timePicker: true,
timePicker24Hour: true,
timePickerIncrement: 30,
locale: {
format: 'DD/MM/YYYY H:mm'
},

ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},

function (start, end) {
$('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
)
});
</script>

Answer

You had miss some bracket and wrong place bracket

  <script type="text/javascript">
    //Date range picker with time picker
    $(function() {
        $('input[name="daterangepicker"]').daterangepicker({
            alwaysShowCalendars: true,
            showWeekNumbers: true,
            timePicker: true,
            timePicker24Hour: true,
            timePickerIncrement: 30,
            locale: {
                format: 'DD/MM/YYYY H:mm'
            },
            { // here
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                  },
                  startDate: moment().subtract(29, 'days'),
                  endDate: moment()
            },

            function (start, end) {
              $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }                           
    });
}); // here
    </script>
Comments