Daterangepicker plug-in adjustment to have predefined date ranges

matissg

Hi,

I'm trying to adjust this Daterangepicker plug-in, however no luck so far.

So far my naive approach has been to merge the plug-in code above with working code from other part of my app, where in addition to regular daterangepicker boxes there predefined date ranges shown:

var lng = $('body').data('locale');
moment.locale(lng);

//daterangepicker
(function( $, DataTable ) {
    'use strict';


    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var _fieldTypes = DataTable.Editor ?
            DataTable.Editor.fieldTypes :
            DataTable.ext.editorFields;

    _fieldTypes.daterangepicker = {
        create: function ( conf ) {

            conf._input = $('<input/>')
                    .attr( $.extend( {
                        id: conf.id,
                        type: 'text'
                    }, conf.attr || {} ) )
                    .daterangepicker( conf.opts || {} );

            return conf._input[0];
        },

        get: function ( conf ) {
            $(conf._input).data('daterangepicker').elementChanged(); //Update dates of the picker from input
            return conf._input.val();
        },

        set: function ( conf, val ) {
            conf._input.val( val );
        }

    };

    var start = moment();
    var end = moment().add(365, 'days');

    function cb(start, end) {
        $('input[id="DTE_Field_valid_from_to"] span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('input[id="DTE_Field_valid_from_to"]').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           [I18n.t('daterangepicker.today')]: [moment(), moment()],
           [I18n.t('daterangepicker.yesterday')]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           [I18n.t('daterangepicker.last_7_days')]: [moment().subtract(6, 'days'), moment()],
           [I18n.t('daterangepicker.last_30_days')]: [moment().subtract(29, 'days'), moment()],
           [I18n.t('daterangepicker.this_month')]: [moment().startOf('month'), moment().endOf('month')],
           [I18n.t('daterangepicker.last_30_days')]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale:{
          "format": "DD.MM.YYYY",
          "separator": " - ",
          "customRangeLabel": I18n.t('daterangepicker.custom_range'),
          "applyLabel": I18n.t('confirm'),
          "cancelLabel": I18n.t('cancel')
        }
    }, cb);

    cb(start, end);

})(jQuery, jQuery.fn.dataTable);

At the moment I see my calendar is localized, which probably comes from moment.locale(lng); but I do not see predefined date ranges.

Is there any way to do the adjustment, please? Thank you!

allan

What you need to do is pass the configuration options you want into the date range picker using the opts parameter for the field in your Editor configuration - e.g.:

fields: [{
    label: "Daterangepicker:",
    name: "daterangepicker_filed",
    type: "daterangepicker",
    opts: {
        startDate: ...,
        endDate: ...,
        ...
    }
}]

Remove the initialisation you have on lines 41 - 68. That's mroe or less the stuff that you need to put in the opts parameter.

Allan

matissg

@allan
Thank you, now I see it and it works. If anyone needs here is my code in addition to the plug-in:

/*jshint esversion: 6 */

// This is for Ratecard default period
var start = moment().startOf('year');
var end = moment().endOf('year');

// In Editor date range field is defined
fields: [
   {
      label: "Valid:",
      name: "valid_from_to",
      type: "daterangepicker",
      opts: {
        startDate: start,
        endDate: end,
        ranges: {
           [I18n.t('daterangepicker.next_year')]: [moment().add(1,'years').startOf('year'), moment().add(1,'years').endOf('year')],
           [I18n.t('daterangepicker.this_year')]: [moment().startOf('year'), moment().endOf('year')],
           [I18n.t('daterangepicker.this_month')]: [moment().startOf('month'), moment().endOf('month')]
        },
        locale:{
          "format": "DD.MM.YYYY",
          "separator": " - ",
          "customRangeLabel": I18n.t('daterangepicker.custom_range'),
          "applyLabel": I18n.t('confirm'),
          "cancelLabel": I18n.t('cancel')
        }
      }
    }
]

[I18n.t('daterangepicker.next_year')] is for using Rails I18n-js gem. It can be simply 'Next Year'.