Setting “quarter” custom date ranges in datepicker using Moment.js

23rd of July, 2018 - Mark Halcroft

Why Moment.js?

Working with timezones and date ranges is a nightmare at the best of times. Luckily there are some amazing packages that make these jobs a breeze these days. In PHP and Laravel I use Carbon, and if I need to work in javascript either in the browser or in node.js, I use the Moment.js library. It makes working with dates elegant and easy.

A job I was doing for a client recently required that a daterangepicker contained a current and previous "quarter" for financial reporting. For example the 1st of January to the 31st of March.

Using Moment.js we can easily get the start of the current quarter with the following:

moment().quarter(quarter).startOf('quarter')

We can get the end of the current quarter using:

moment().quarter(quarter).endOf('quarter')

Using the power of Moment.js, we can use the similar logic to get the same ranges for the last quarter as well:

moment().subtract(1, 'quarter').startOf('quarter')

and

moment().subtract(1, 'quarter').endOf('quarter')

That's great, but how can I apply that practically?

When initialising your daterangepicker instance, use the following to create the custom ranges:

Note: $start and $end variables in this instance are passed through from the server, but you can use whatever dates suit your use-case.

    $(function() {

        var start = moment($start);
        var end = moment($end);
        var quarter = moment().quarter();

        function cb(start, end) {
            $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }

        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
                'Current Quarter': [moment().quarter(quarter).startOf('quarter'), moment().quarter(quarter).endOf('quarter')],
                'Last Quarter': [moment().subtract(1, 'quarter').startOf('quarter'), moment().subtract(1, 'quarter').endOf('quarter')]
            }
        }, cb);

        cb(start, end);

    });

Now when I load my daterangepicker, I can see the following:

 

Conclusion

I hope you found this post informative. In this example, I am using a variation of daterangepicker in adminlte. If you are using a similar setup, you will need to ensure you're including Moment.js, as well as jquery and the daterangepicker assets:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />