localizing datatable date inputs

yovos73557 0
Viewed 24

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();
    });
});
datatable datatables jquery javascript
1 Answers

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:

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:

enter image description here

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:

enter image description here

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:

enter image description here

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.

andrewJames0
Related