How to configure the calender to "rtl" direction

[meet1919]

This is my code:

$('#addEventCarDate').daterangepicker({
    "opens": "center",
    "drops": "up",
    'showDropdowns': true,
    "locale": {
        "direction": 'rtl',
        "format": "DD/MM/YYYY",
        "separator": " - ",
        "applyLabel": "Add",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December",
        ],
        "firstDay": 1
    },
}, function(start, end, label) {
  console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

The direction parameter doesnt seem to work. I saw from one of the Pull Request that from the version 3 the rtl is implemented but I cant use it. What should I do?

[elicohenator]

Hey, did you manage to do it? I need it for an upcoming project as well
@meet1919

[meet1919]

Yes, @elicohenator
I was able to do that by modifying the daterangepicker.js file.

if ((typeof options.ranges === 'undefined' && !this.singleDatePicker) || this.alwaysShowCalendars) {
     this.container.addClass('show-calendar');
     this.container.attr('style', 'direction: rtl !important;')     // This line was added to transform the calendar container created
}

By adding the line as shown above, the columns on the calendar can be flipped plus. Likewise I kept modifying the js file plus added some styles to fit to my requirement.