Cleave.js: how to apply cleave.js format for multiple input with one class

[uladzimir-miadzinski]

So, a question in a title.
I have a problem,
I have some inputs in form with class 'date'
code works fine, but it works for first input (for the first got the top down with that class)

var cleave = new Cleave('.date', {
            date: true,
            datePattern: ['d', 'm', 'Y'],
            delimiter: '.'
        });

how can I use this code for multiple inputs without dublicating code applying it by selector '#elemname'
need to apply it to all by class '.date'

[alanaasmaa]

I havent tryed or tested this but maybe you have to check how many elements are by this class and loop this same function same amounts.

[puttykitties]

I would love to know anyone have tried this as well. Funny how applying class but it only works on one element.

[lesleyblankendal]

+1 for this issue. Was also the first thing I tried... Anyone know how to re-use these with the same classnames?

[lesleyblankendal]

I ended up using

$('.zip-code').toArray().forEach(function(field){
new Cleave(field, {
  numericOnly: true,
  delimiter: ' ',
  blocks: [5,4]
});

from http://stackoverflow.com/questions/40637035/why-cant-i-establish-two-cleave-js-formatted-fields-in-the-same-js-file

[nosir]

Yea, you need a loop as above.
Basically each instance only applies to one input field, so you can run instance.getRawValue() to get raw value for specific input field.

[BilalBudhani]

If you want to use it without jQuery, Here is how it can be done

document.querySelectorAll('input').forEach(function(el) {
  new Cleave(el, {...options});
});

[jadamec]

Could you write a code for running an instance.getRawValue(), please? Thanks.

[jadamec]

@nosir

Yea, you need a loop as above.
Basically each instance only applies to one input field, so you can run instance.getRawValue() to get raw value for specific input field.

How to make this, please? Something like this doesn't work...

$('.input-control-number').toArray().forEach(function (field) {
        var inpControl = new Cleave(field, {
            numeral: true,
            numeralDecimalMark: ',',
            delimiter: ' '
        });

        $.valHooks['.input-control-number'] = {
            get: function (el) {
                return inpControl.getRawValue();
            },
            set: function (el, val) {
                $(el).html(val);
            }
        };
    });

[iofacture]

I ended up using

$('.zip-code').toArray().forEach(function(field){
new Cleave(field, {
  numericOnly: true,
  delimiter: ' ',
  blocks: [5,4]
});

from http://stackoverflow.com/questions/40637035/why-cant-i-establish-two-cleave-js-formatted-fields-in-the-same-js-file

I am using the latest version of cleave and this is my stack trace:

Uncaught TypeError: Cannot read property 'length' of undefined
at Object.getNextCursorPosition (cleave.min.js:8)
at i.updateValueState (cleave.min.js:8)
at i.onInput (cleave.min.js:8)
at init (cleave.min.js:8)
at new i (cleave.min.js:8)
at 2001:368
at Array.forEach ()
at 2001:367

For the following:

on a simple table with < td class="dollar-amount" >

<script type="text/javascript">

    $('.dollar-amount').toArray().forEach(function (field) {
        new Cleave(field, {
            numeral: true,
            prefix: '$'
        });
    });

</script>

[aedork]

Issue Solution With Vanilla Javascript

if anyone is using vanilla javascript, I leave you a piece of code that can help you solve this issue.

basically:

• [x] get class collection
• [x] transform collection to array
• [x] get class collection
• [x] iterate array
• [x] Create element cleave

window.onload = function () {
    var datesCollection = document.getElementsByClassName("input-date");
    var dates = Array.from(datesCollection);

    dates.forEach(function (date) {
        new Cleave(date, {
            date: true,
            delimiter: '-',
            datePattern: ['Y', 'm', 'd']
        })
    });
};

remember its important convert the collection to array