gistfile1.js

ranges: {
    'Today': ['today', 'today'],
        'Yesterday': ['yesterday', 'yesterday'],
        'Last 7 Days': [Date.today().add({
        days: -6
    }), 'today'],
        'Last 30 Days': [Date.today().add({
        days: -29
    }), 'today'],
        'This Month': [Date.today().moveToFirstDayOfMonth(), Date.today().moveToLastDayOfMonth()],
        'Last Month': [Date.today().moveToFirstDayOfMonth().add({
        months: -1
    }), Date.today().moveToFirstDayOfMonth().add({
        days: -1
    })]
},

/* 
Para usar los ranges por defecto, 
sólo hay que “Activar los ranges”, pasando la opción “showRanges : true”
*/

$('#datepicker-calendar').DatePicker({
    inline: true,
    date: [from, to],
    calendars: 3,
    mode: 'range',
    starts: 1,
    showRanges: true,
    textField : '#date-range-field',
    onApply: function () {
        ToggleInput();
    }
});

gistfile2.js

$('#datepicker-calendar').DatePicker({
        inline: true,
        date: [from, to],
        calendars: 3,
        mode: 'range',
        starts: 1,
        showRanges: true,
        textField : '#date-range-field',
        onApply: function () {
            ToggleInput();
        }
    });