Daterangepicker plug-in adjustment to have predefined date ranges

Daterangepicker plug-in adjustment to have predefined date ranges

matissgmatissg Posts: 59Questions: 14Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,301Questions: 1Answers: 6,970 Site admin
    Answer ✓

    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

  • matissgmatissg Posts: 59Questions: 14Answers: 0
    edited June 21

    @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'.

Sign In or Register to comment.