cleave-zen - Format input text content when you are typing

Credit card 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

import { formatCreditCard, getCreditCardType } from 'cleave-zen'

creditCardInput.addEventListener('input', e => {
    const value = e.target.value
    const creditCardValue = formatCreditCard(value)
    const creditCardType = getCreditCardType(value)
    // ... handle value and type change
})

Date formatting

YYYY-MM-DD

import { formatDate } from 'cleave-zen'

dateInput.addEventListener('input', (e) => {
    dateInput.value = formatDate(e.target.value, {
        delimiter: '-',
        datePattern: ['Y', 'm', 'd'],
    })
})

MM/YY

import { formatDate } from 'cleave-zen'
    
dateInput.addEventListener('input', (e) => {
    dateInput.value = formatDate(e.target.value, {
        datePattern: ['m', 'y'],
    })
})

Time formatting

hh:mm:ss

import { formatTime } from 'cleave-zen'

timeInput.addEventListener('input', (e) => {
    timeInput.value = formatTime(e.target.value, {
        timePattern: ['h', 'm', 's'],
    })
})

hh:mm

import { formatTime } from 'cleave-zen'

timeInput.addEventListener('input', (e) => {
    timeInput.value = formatTime(e.target.value, {
        timePattern: ['h', 'm'],
    })
})

Numeral formatting

Enter numeral

Style: thousand

import { formatNumeral } from 'cleave-zen'

inputNumeral.addEventListener('input', (e) => {
    inputNumeral.value = formatNumeral(e.target.value, {
        numeralThousandsGroupStyle: 'thousand',
    })
})

Custom options

Blocks: [4, 3, 3, 4]

import { formatGeneral } from 'cleave-zen'

blocksInput.addEventListener('input', (e) => {
    blocksInput.value = formatGeneral(e.target.value, {
        blocks: [4, 3, 3, 4],
    })
})

Delimiter: "·"

import { formatGeneral } from 'cleave-zen'

blocksInput.addEventListener('input', (e) => {
    blocksInput.value = formatGeneral(e.target.value, {
        blocks: [3, 3, 3],
        delimiter: '·',
    })
})

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

import { formatGeneral } from 'cleave-zen'

blocksInput.addEventListener('input', (e) => {
    blocksInput.value = formatGeneral(e.target.value, {
        delimiters: ['.', '.', '-'],
        blocks: [3, 3, 3, 2],
        uppercase: true
    })
})

Prefix-

import { formatGeneral } from 'cleave-zen'

blocksInput.addEventListener('input', (e) => {
    blocksInput.value = formatGeneral(e.target.value, {
        prefix: 'PREFIX',
        blocks: [6, 4, 4, 4],
        delimiter: '-',
    })
})

See more on Github