localizing datatable date inputs

Question

I'm using datatable's date filter, but I can't change the language of the date.

I tried as below but it doesn't work. still in english.

 minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY',
        locale: 'tr-TR',
        language: 'tr-TR,
        lang: 'tr-TR
    });

https://datatables.net/extensions/datetime/examples/integration/datatables.html

var minDate, maxDate;
 
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = minDate.val();
        var max = maxDate.val();
        var date = new Date( data[4] );
 
        if (
            ( min === null && max === null ) ||
            ( min === null && date <= max ) ||
            ( min <= date   && max === null ) ||
            ( min <= date   && date <= max )
        ) {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    // Create date inputs
    minDate = new DateTime($('#min'), {
        format: 'MMMM Do YYYY'
    });
    maxDate = new DateTime($('#max'), {
        format: 'MMMM Do YYYY'
    });
 
    // DataTables initialisation
    var table = $('#example').DataTable();
 
    // Refilter the table
    $('#min, #max').on('change', function () {
        table.draw();
    });
});

Answer 1

I'm going to assume you are using the same libraries that are used in the date range filter example you linked to in your question - specifically:

• the Moment library - more details here
• the DataTables datetime library - more details here

You need to make 2 changes, shown below.

---

The first change is to replace the basic Moment library with the one which includes locale data:

<!-- don't use this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
-->
<!-- use this instead: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>

This will allow your displayed dates to use localized (Turkish) values for month names.

Now, you should see data such as Eylül 19 2022 in the input field, when you specify your locale:

minDate = new DateTime($('#min'), {
  format: 'MMMM Do YYYY',
  locale: 'tr-TR'
});

The result:

---

The second change is to change the values which are displayed in the calendar selector. By default, the calendar will still use English month names and day-of-week abbreviations:

To fix this, you need to specify your localized data, as follows:

var i18n_tr = {
    clear:    'Clear',
    previous: 'Previous',
    next:     'Next',
    months:   [ 'ocak', 'şubat', 'mart', 'nisan', 'mayıs', 'haziran', 'temmuz', 'ağustos', 'eylül', 'ekim', 'kasım', 'aralık' ],
    weekdays: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    amPm:     [ 'am', 'pm' ],
    hours:    'Hour',
    minutes:  'Minute',
    seconds:  'Second',
    unknown:  '-',
    today:    'Today'
};

In the above JavaScript object I have only translated the month names (apologies if I got that wrong).

You will need to translate the remaining text yourself, as needed.

You can then use this object in your date input code using i18n as its identifier:

minDate = new DateTime($('#min'), {
  format: 'MMMM Do YYYY',
  locale: 'tr-TR',
  i18n: i18n_tr
});

Now the calendar will look like this:

And you will see a pick-list of Turkish month names if you click on eylül.

---

How did I know to use i18n? And how did I know what format is needed for its data structure?

This is defined in the DataTables dateTime GUI code for the date picker.

There you can see all of the available defaults, including the i18n data structure.