Cleave.js Phone CA

Question

I'm trying to format a phone number field using Cleave.js and it's not working but I can't seem to figure out why.

I started off like this:

import Cleave from 'cleave.js';

var cleave = new Cleave('.phone', {
    'phone': true,
    'phoneRegionCode': 'CA'
});

And I got this error:

> Uncaught Error: [cleave.js] Please include phone-type-formatter.{country}.js lib

So I imported the library that I was missing by adding:

import CleavePhone from 'cleave.js/dist/addons/cleave-phone.ca';

So now my code is:

import Cleave from 'cleave.js';
import CleavePhone from 'cleave.js/dist/addons/cleave-phone.ca';

var cleave = new Cleave('.phone', {
    'phone': true,
    'phoneRegionCode': 'CA'
});

I'm not getting any console errors anymore, but the formatting of the phone number doesn't seem to be working at all.

I tried to change the options of the Cleave to a date:

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

And the input seems to format properly. Therefore, I know my query selector for the element is okay.

But I can't seem to figure out why my phone number is not formatting properly.

Answer 1

Instead of importing, try requiring: require('cleave.js/dist/addons/cleave-phone.ca')