Cleave.js - Format input text content when you are typing

Credit card number formatting

Enter credit card number

clear

American Express: starts with 34/37

34
VISA: starts with 4

4
Diners Club: starts with 300-305/309...

300
MasterCard: starts with 51-55/22-27

51
JCB: starts with 35/2131/1800

35
Discover: starts with 6011|65|644-649

6011

var cleave = new Cleave('.input-element', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // update UI ...
    }
});

Phone number formatting

Enter phone number

Select country

var cleave = new Cleave('.input-element', {
    phone: true,
    phoneRegionCode: '{country}'
});

Date formatting

YYYY-MM-DD

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

MM/YY

var cleave = new Cleave('.input-element', {
    date: true,
    datePattern: ['m', 'y']
});

Time formatting

hh:mm:ss

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm', 's']
});

hh:mm

var cleave = new Cleave('.input-element', {
    time: true,
    timePattern: ['h', 'm']
});

Numeral formatting

Enter numeral

Style: thousand

var cleave = new Cleave('.input-element', {
    numeral: true,
    numeralThousandsGroupStyle: 'thousand'
});

Custom options

Blocks: [4, 3, 3, 4]

var cleave = new Cleave('.input-element', {
    blocks: [4, 3, 3, 4],
    uppercase: true
});

Delimiter: "·"

var cleave = new Cleave('.input-element', {
    delimiter: '·',
    blocks: [3, 3, 3],
    uppercase: true
});

Delimiter: ['.', '.', '-']

var cleave = new Cleave('.input-element', {
    delimiters: ['.', '.', '-'],
    blocks: [3, 3, 3, 2],
    uppercase: true
});

Prefix-

var cleave = new Cleave('.input-element', {
    prefix: 'PREFIX',
    delimiter: '-',
    blocks: [6, 4, 4, 4],
    uppercase: true
});

ReactJS component

import React from 'react';
import ReactDOM from 'react-dom';
import Cleave from 'cleave.js/react';

class MyComponent extends React.Component {
    onChange(event) {
        // formatted pretty value
        console.log(event.target.value);

        // raw value
        console.log(event.target.rawValue);
    }

    render() {
        return (
            <Cleave placeholder="Enter your credit card number"
                options={{creditCard: true}}
                 />
        );
    }
}

Try demo in the playground

Playground

JSFiddle (Basic) JSFiddle (More cases) React JSFiddle Angular JSFiddle

See more on Github