Javascript: Month range picker using daterangepicker()

README.md

• @license
• Multiselect v1
• https://gist.github.com/mazfreelance
• Copyright (c) 2019 MAZ Tech
• Licensed under the MIT license

monthrangepicker.html

<div class="input-group mb-3">
    <input class="form-control" id="monthrange-field" name="date_range" type="text">
    <div class="input-group-append">
        <button id='btnDec' type="button" class="btn btn-danger" title='Decrement month'><i class="la la-calendar-minus-o" aria-hidden="true"></i></button>
        <button id='btnInc' type="button" class="btn btn-info" title='Increment month'><i class="la la-calendar-plus-o" aria-hidden="true"></i></button>
    </div>
</div>

monthrangepicker.js

<!--
 * @license
 *
 * monthrangepicker v1
 * https://gist.github.com/mazfreelance
 *
 * Copyright (c) 2019 MAZ Tech
 * Licensed under the MIT license
-->
$(document).ready(function() {
    // monthly range
    $('#monthrange-field').daterangepicker({
        ranges: {
            'First 3 Months': [moment().subtract(2, 'months'), moment()],
            'Last 3 Months': [moment().subtract(5, 'months'), moment().subtract(3, 'months')],
        },
        // opens: 'right',
        applyClass: 'btn-info',
        autoUpdateInput: false,
        "startDate": moment().subtract(2, 'months'),
        "endDate": moment(),
	    'maxDate': moment().endOf('months').format('MMMM YYYY'),
        locale: {
            format: 'MMMM YYYY',
            cancelLabel: 'Clear',
        }
    });

    $('#monthrange-field').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MMMM YYYY') + ' - ' + picker.endDate.format('MMMM YYYY'));
    });

	$('#monthrange-field').on('cancel.daterangepicker', function(ev, picker) {
		$(this).val('');
    });

    $('#btnInc').click ( function(e) {
    	IncDecMonth('Inc')
    })

	$('#btnDec').click ( function(e) {
    	IncDecMonth('Dec')
    })
});

$('#monthrange-field').on('apply.daterangepicker', function(ev, picker) {
  $(this).val(picker.startDate.format('MMMM YYYY') + ' - ' + picker.endDate.format('MMMM YYYY'));
});

$('#monthrange-field').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});


var start = moment().subtract(2, 'months');
var end = moment();
function isDate(val)
{
    //var d = new Date(val);
    //return !isNaN(d.valueOf());
    var d = Date.parse(val);
    // console.log(d);
    return Date.parse(val);
}
function IncDecMonth(Action)
{
    /* if(!isDate(start)){
        // start = moment().startOf('months');
        start = moment().subtract(2, 'months');
    }
    if(Action == 'Inc'){
        // start = moment(start).add(1, 'months').startOf('months');
        // end =  moment(start).endOf('months')
        start = moment().startOf('months');
        end =  moment().endOf('months');
    }
    else
    {
        start = moment(end).subtract(1, 'months');
        end =  moment(start).subtract(1, 'months');
    } */

    if(Action == 'Inc'){
        start = moment(start).add(1, 'months').startOf('months');
        end =  moment(end).add(1, 'months').startOf('months');
    }
    else if(Action == 'Dec') {
        start = moment(start).subtract(1, 'months');
        end =  moment(end).subtract(1, 'months');
    }
    if(isDate(start)){
        $('#monthrange-field').val(start.format('MMMM YYYY') + ' - ' + end.format('MMMM YYYY'));
    }
    // console.log('start='+start)
    // console.log('end='+end)
}
IncDecMonth();