setFormatter() and getFormatter() based on field-type or name

resqonline

I have several datetime fields in different Editor instances where I would like to use the fields.getFormatter and fields.setFormatter to be applied the same way, like displaying the German date format but saving the normal format.

Same goes for a field with the name "amount", which is used in different Editor instances, where I would like to display it with comma as decimal seperator, but saving it the usual way with decimal point.
I tried using a mask for this, but that screwed up my whole data.

Is it possible to achieve this by targeting either by field type or field name?

Just a suggestion: It would be great to have rendering options in Editor the same way as in DataTables or adding number and date formats to the translation json to be included. I know the decimal and thousands seperators are included in the translation file, so why don't those apply to Editor as well?

allan

You mean something like columnDefs but for Editor fields? Honestly, I'd never thought of that before! That is a nice idea - it isn't something that is possible in Editor at the moment though.

The reason the language options for the decimal and thousands separators don't apply in Editor is that it requires interaction with the server-side interaction in that it will need to deformat the numbers to store it in the computer representation. This is certain an area of HTML input that irks me! Something like the mask plug-in is about as good as it gets at the moment as far as I am aware, but as you have seen, it can be really fragile!

Allan

rf1234

I had exactly the same challenge a while ago. My solution is:
- server side get and set formatters for all dates and number formats depending on the user language (German or English). This implicitly works for the data table and Editor without requiring any client side rendering.
- Client side masking of Editor number fields depending on the user language using a jquery plugin. This makes sure that only the expected format for the respective user language is passed to the server.

resqonline

@rf1234 what do you use to manage the formatters? do you include the formatting inside the ajax calls for getting and sending the data? The numbers isn't so bad as long as I explain to my client that they need to enter numbers with point instead of comma.

@allan yes, something similar like the columnDefs - set and get formatter for each field individually is just crazy redundant if you want to do the same thing for several fields.
I work a lot with Advanced Custom Fields plugin in WordPress and they have the option for fields to display a custom format although the data is saved in regular format which works best for the database. I don't think it's any different than the get and set formatting: turn the value from the DB into something nice for displaying and when sending it back to the DB just turn it back.

rf1234

I use Editor client and server side and use the respective get and set formatters for Editor. In my case the server side language is PHP but this is also available for the other supported languages.

Here are the links:
https://editor.datatables.net/manual/php/formatters

And a code example:
https://datatables.net/forums/discussion/comment/174042/#Comment_174042

My client side masking solution is really primitive and was developed right after I had restarted coding a couple of years ago but it should show you the basics of what you can do. I set the classes to the fields dynamically in the Editor initialization.

// digitalbush.com/projects/masked-input-plugin/
// Copied the source and replaced "mask" with "myMask" to avoid conflict
// with other masking plugin used with Data Tables
// a - Represents an alpha character (A-Z,a-z)
// 9 - Represents a numeric character (0-9)
// * - Represents an alphanumeric character (A-Z,a-z,0-9)
// b may be a number or blank to take car of 1 to 4 digit area codes in Europe; phone number must be at least 3 digits long
// c is b plus a minus sign, an X or an x to allow for easy extension entry, like +49 89 345 - 478 or +49 89 345x478 or +49 89 345 x 478
// 8 only numbers 1 - 9
// area codes with leading zeroes cannot be entered! if leading zeroes are required for the area code in a country, this must be handled through program logic!
// This applies basically only to Italy!
function maskPhone() {
    $.myMask.definitions['b'] = "[0-9 ]";
    $.myMask.definitions['c'] = "[0-9-xX ]";
    $.myMask.definitions['8'] = "[1-9]";
    $(".phoneCountryCode").myMask("+8?bb",{placeholder:"_"});
    $(".phoneAreaCode").myMask("9?bbbb",{placeholder:"_"});
    $(".phonePhoneNumber").myMask("89c?cccccccccccc",{placeholder:"_"});
    //$("#date").myMask("9b.9b.99bb",{placeholder:"DD.MM.YYYY"});
}

function maskDateTime () {
    $.myMask.definitions['1'] = "[0-1]";
    $.myMask.definitions['2'] = "[0-2]";
    $.myMask.definitions['3'] = "[0-3]";
    $.myMask.definitions['5'] = "[0-5]";
    $(".dateEnglish").myMask("39/19/9999",{placeholder:"DD/MM/YYYY"});
    $(".dateTimeEnglish").myMask("39/19/9999, 29:59",{placeholder:"DD/MM/YYYY, HH:MM"});
    $(".dateGerman").myMask("39.19.9999",{placeholder:"TT.MM.JJJJ"});
    $(".dateTimeGerman").myMask("39.19.9999, 29:59",{placeholder:"TT.MM.JJJJ, HH:MM"});
    $(".timeEnglishGerman").myMask("29:59",{placeholder:"HH:MM"});
}

function maskRegional12 () {
    $(".regional_12").myMask("99-9-99-9-999-999",{placeholder:"17-0-00-0-000-000"});
}

//maskMoney plugin: http://plentz.github.io/jquery-maskmoney/
function maskAmount() {
    //amount fields are defined as DEC[15,2] in MySql Database    
    $('.amountEnglish').maskMoney({allowZero: true, allowNegative: true});
    $('.amountEnglishAllowEmpty').maskMoney({allowZero: true, 
                                  allowNegative: true, allowEmpty: true});
    $('.amountEnglishNoDecPlaces').maskMoney({allowZero: true,
                                   allowNegative: true, precision: 0});
    $('.amountGerman').maskMoney({thousands: '.', decimal: ',',allowZero: true,
                                  allowNegative: true});
    $('.amountGermanAllowEmpty').maskMoney({thousands: '.', decimal: ',',allowZero: true,
                                  allowNegative: true, allowEmpty: true});
    $('.amountGermanNoDecPlaces').maskMoney({thousands: '.', decimal: ',',
                          allowZero: true, allowNegative: true, precision: 0});
    $('.amountEnglish, .amountEnglishNoDecPlaces, \n\
       .amountGerman,  .amountGermanNoDecPlaces').each(function() {
        if ($(this).val() == 0 || $(this).val() == '0,00' || $(this).val() === '-') {
            $(this).val('');
        }
    });
    $('.amountEnglishAllowEmpty, .amountGermanAllowEmpty').each(function() {
        if ($(this).val() === '-') {
            $(this).val('');
        }
    });
}

//maskMoney plugin: http://plentz.github.io/jquery-maskmoney/
function maskPercentage() { 
    $('.percentEnglishNoDecPlaces').maskMoney(
            {allowZero: true, allowNegative: true,
             precision: 0, suffix: ' %'});    
    $('.percentGermanNoDecPlaces').maskMoney(
            {thousands: '.', decimal: ',',allowZero: true, allowNegative: true,
             precision: 0, suffix: ' %'});   
    $('.percentEnglish').maskMoney(
            {allowZero: true, allowNegative: true,
             precision: 3, suffix: ' %'});    
    $('.percentGerman').maskMoney(
            {thousands: '.', decimal: ',',allowZero: true, allowNegative: true,
             precision: 3, suffix: ' %'});   
    $('.percentEnglishNoDecPlaces, .percentGermanNoDecPlaces, \n\
       .percentEnglish, .percentGerman').each(function() {
        if ($(this).val() == 0 || $(this).val() == '0,000' || $(this).val() === '-') {
            $(this).val('');
        }
    });
}

resqonline

@rf1234 Thanks for sharing! That's really interesting

resqonline

Feeling rather stupid regarding the dates in Editor now it's been there all along, of course you still have to include this in every field you need it to, but two small lines are doing it quite well:

fields: [{
    label: "Geburtstag",
    name: "birthday",
    type: 'datetime',
    displayFormat: 'DD.MM.YYYY',
    wireFormat: 'YYYY-MM-DD ',
},
],

Details can be found in datetime, Moment.js needs to be included obviously

resqonline

@allan actually that would be the easiest solution: adding displayFormat and wireFormat to other fields as well - like with numbers: you could save the number with several decimal characters in the database, but show it differently in the Editor field - alas, there is no 'number' field But this would definitely be perfect to format a decimal or thousands number the way you would within the datatables and there could also be a prefix or suffix (outside the input) for a number field so you can indicate if it's % or €/$ or pieces or whatever - seriously, why isn't there a 'number' field?

allan

To get a number input you can use:

{
  label: 'My number',
  name: 'my_input',
  attr: {
    type: 'number'
  }
}

Allan

allan

This article on numeric inputs is also interesting.

Allan

resqonline

Thank you for the article link @allan ! I didn't know that, that's interesting. I couldn't find anything on number fields, so thank you also for the hint about number inputs.