Fork me on GitHub
DEMOS
Format your <input/> 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 2131/1800/35

    2131

  • 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,
    datePattern: ['Y', 'm', 'd']
});

MM/YY

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

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}}
                onChange={this.onChange.bind(this)} />
        );
    }
}
Try demo in the playground

Playground