Correct maskMoney formatting

klermann

Could you help me display the correct maskMoney formatting in this field, I can display the field, but I could not display the mask correctly, just display the numbers?

    (function( factory ){
        if ( typeof define === 'function' && define.amd ) {
            // AMD
            define( ['jquery', 'datatables', 'datatables-editor'], factory );
        }
        else if ( typeof exports === 'object' ) {
            // Node / CommonJS
            module.exports = function ($, dt) {
                if ( ! $ ) { $ = require('jquery'); }
                factory( $, dt || $.fn.dataTable || require('datatables') );
            };
        }
        else if ( jQuery ) {
            // Browser standard
            factory( jQuery, jQuery.fn.dataTable );
        }
    }(function( $, DataTable ) {'use strict';        

    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var _fieldTypes = DataTable.Editor ?
        DataTable.Editor.fieldTypes :
        DataTable.ext.editorFields;


    _fieldTypes.money = {
        create: function ( conf ) {
            var that = this;

            conf._input = $(
                    '<div class="input-group date" id="'+conf.id+'">'+
                        '<input id="valorReceita" type="text" class="form-control" />'+
                        '<span class="input-group-addon"><span class="wb-money"></span>'+
                        '</span>'+
                    '</div>'
                )
                .attr( $.extend( {}, conf.attr ) )
                .maskMoney( $.extend( {}, conf.opts ) );

            return conf._input[0];
        },

        get: function ( conf ) {
            return conf._input.children('input').val();
        },

        set: function ( conf, val ) {
            /* var picker = conf._input.data("maskMoney");

            console.log(picker);

            if ( picker.setDate ) {
                picker.setDate( val );
            }
            else {
                picker.date( val );
            }  */
        },

        disable: function ( conf ) {
            conf._input.data("maskMoney").disable();
        },

        enable: function ( conf ) {
            conf._input.data("maskMoney").enable();
        },

        inst: function ( conf ) {
            return conf._input.data("maskMoney");
        }
    };


    }));

rf1234

I have no idea what is or isn't wrong with your code. I am using this which I copied from somewhere and it works with the data tables masking plugin (Field Type - Mask and jQuery Mask available here https://datatables.net/download/index).

//masking plugin provided by Datatables
function maskAmount() {
    //amount fields are defined as DEC[15,2] in MySql Database
    //  $('.amountGerman').mask('0.000.000.000.000,00', {reverse: true});
  
    //  allow for negative amounts as well
    $('.amountEnglish').mask('0,000,000,000,000.00', { reverse: true,
        translation: { '0': { pattern: /-|\d/, recursive: true } },
        onChange: function(value, e) {      
            e.target.value = value.replace(/(?!^)-/g, '').replace(/^[,]/, '').replace(/^-[,]/, '-');
        }
    });
    $('.amountEnglish').each(function () {
        this.value = this.value.replace(/(?!^)-/g, '').replace(/^[,]/, '').replace(/^-[,]/, '-');
    });

    $('.amountGerman').mask('0.000.000.000.000,00', { reverse: true,
        translation: { '0': { pattern: /-|\d/, recursive: true } },
        onChange: function(value, e) {      
            e.target.value = value.replace(/(?!^)-/g, '').replace(/^[.]/, '').replace(/^-[.]/, '-');
        }
    });
    $('.amountGerman').each(function () {
        this.value = this.value.replace(/(?!^)-/g, '').replace(/^[.]/, '').replace(/^-[.]/, '-');
    });
    
    //  cut off the two decimal places to make data entry easier
    $('.amountEnglishNoDecPlaces').mask('0,000,000,000,000', { reverse: true,
        translation: { '0': { pattern: /-|\d/, recursive: true } },
        onChange: function(value, e) {      
            e.target.value = value.replace(/(?!^)-/g, '').replace(/^[,]/, '').replace(/^-[,]/, '-');
        }
    });
    $('.amountEnglishNoDecPlaces').each(function () {
        this.value = this.value.replace(/(?!^)-/g, '').replace(/^[,]/, '').replace(/^-[,]/, '-');
    });

    $('.amountGermanNoDecPlaces').mask('0.000.000.000.000', { reverse: true,
        translation: { '0': { pattern: /-|\d/, recursive: true } },
        onChange: function(value, e) {      
            e.target.value = value.replace(/(?!^)-/g, '').replace(/^[.]/, '').replace(/^-[.]/, '-');
        }
    });
    $('.amountGermanNoDecPlaces').each(function () {
        this.value = this.value.replace(/(?!^)-/g, '').replace(/^[.]/, '').replace(/^-[.]/, '-');
    });    
}

I use this to assign the respective classe to the Editor field:

{
                label: "bla:",
                name:  "yourEditorField",
                attr: {
                    class: whicheverClassIsNeeded
                }
            }

Then I use this to trigger the function:

editor
            .on('open', function(e, mode, action) {                
                maskAmount();
                maskDateTime();
               ......
            })

allan

This thread appears to be a duplicate / continuation of your other thread on this topic. Could you not post duplicates please?

The problem appears to be that you are applying the maskMoney jQuery plug-in to a div element, not the input. You need to apply it to the input element. Something like $('input', conf._input).maskMoney(); - I guess. Although I haven't read though their documentation.

Allan

Tester2017

Well, I was looking for the same script to use and also have not resolved its implementation in DataTables yet, but I can give you my part of the create, set and get routines.

I am using field type "moneymask".

The code below is only the part of create, set and get.

_fieldTypes.moneymask = {
    create: function (conf) {
        var that = this;

        conf._input = $('<input/>')
            .attr($.extend(
                {
                    id: DataTable.Editor.safeId(conf.id),         
                    type: 'text',
                    prefix: `R$ `,
                    suffix: ``,
                    affixesStay: true,
                    thousands: `.`,
                    decimal: `,`,
                    precision: 2,
                    allowZero: false,
                    allowNegative: false,
                    doubleClickSelection: true,
                    allowEmpty: false,
                    bringCaretAtEndOnFocus: true
                },
                conf.attr || {} ));

//        console.log(conf._input.attr(`id`));
//        console.log(conf._input.attr(`type`));
//        console.log(conf._input.attr(`prefix`));
//        console.log(conf._input.attr(`suffix`));
//        console.log(conf._input.attr(`affixesStay`));
//        console.log(conf._input.attr(`thousands`));
//        console.log(conf._input.attr(`decimal`));
//        console.log(conf._input.attr(`precision`));
//        console.log(conf._input.attr(`allowZero`));
//        console.log(conf._input.attr(`allowNegative`));
//        console.log(conf._input.attr(`doubleClickSelection`));
//        console.log(conf._input.attr(`allowEmpty`));
//        console.log(conf._input.attr(`bringCaretAtEndOnFocus`));

        return conf._input;
    },

    set: function (conf, val) {
        conf._input
            .trigger(`.maskMoney`)
            .trigger(`keypress.maskMoney`)
            .trigger(`keydown.maskMoney`)
            .trigger(`blur.maskMoney`)
            .trigger(`focus.maskMoney`)
            .trigger(`click.maskMoney`)
            .trigger(`dblclick.maskMoney`)
            .trigger(`cut.maskMoney`)
            .trigger(`paste.maskMoney`)
            .trigger(`mask.maskMoney`)
            .maskMoney(`mask`,val)[0];

//            console.log(conf._input.maskMoney('mask',val)[0])
    },

    get: function (conf) {
//        console.log(conf._input.maskMoney(`unmasked`)[0])

        return conf._input.maskMoney(`unmasked`)[0];
    }
 
};

I still not resolved 2 issues; first of all: entering the field will only give "Uncaught TypeError: Cannot read property 'createRange' of undefined" - errors, and secondly the mask is not applied giving problems when returning the value. With autocomplete I can select 5.5 and it returns 5.5 but with the keyboard, I can not enter a point and I will receive a value 100 times less and only with 2 numbers. Maybe it might help you a little bit further.

Tester2017

@klermann
I forgot to mention your name in my previous post. Now you will be notified I guess??

klermann

Hello @Tester2017, I solved this money mask problem and the way I needed it, take a look at the example, if you need the plugin posted to you!

Tester2017

@klermann,
OK, looks very good. And thanks for your offer, but I finally decided to let moneymask away and only use the built-in render function for presentation of money values and jquery-mask for the data-entry part, which is working perfectly for me. Bom final de semana!