Directory

← Back

TextField Formatter

Cleave.js based client-side text formatter for Vaadin 8 and Vaadin 14

Author

Contributors

Rating

A TextField formatter extension built on top Cleave.js. Supports credit card formatting, numeral fields, dates and custom blocks e.g. IBAN.

Version 2.x is for Vaadin 8 and 4.x+ is for Vaadin 14.

Vaadin 8 demo

Sample code

TextField textField = new TextField();
new PhoneI18nFieldFormatter( PhoneI18nFieldFormatter.GE).extend(textField); // Vaadin 14
new PhoneFieldFormatter( "LU").extend(textField); // Vaadin 8
TextField textField = new TextField();
new NumeralFieldFormatter(",", ".", 3).extend(textField);
TextField textField = new TextField();
CreditCardFieldFormatter formatter = new CreditCardFieldFormatter();
formatter.addCreditCardChangedListener(e -> {
	// Any custom behavior based on the event
	e.getCreditCardType();
});
formatter.extend(textField);
TextField myDateField = new TextField();
new DateFieldFormatter.Builder()
.datePattern("yyyyMMdd")
.delimiter("-")
.dateMin(LocalDate.of(1900, 01, 01))
.dateMax(LocalDate.of(2019, 9, 3))
.build().extend(myDateField);

// or

TextField myDateField = new TextField();
new DateFieldFormatter(
  "yyyyMMdd",
  LocalDate.of(1900, 01, 01),
  LocalDate.of(2019, 9, 3),
  "-"
).extend(myDateField);
TextField tf = new TextField();
IBANFormatter.fromIBANLength(18).extend(tf);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Release notes in GitHub

Released
2020-10-23
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Vaadin 8.0+ in 1.0
Vaadin 14 in 4.1.4
Vaadin 24.2 in 23.3.1
Vaadin 24.1 in 23.3.1
Vaadin 24 in 23.3.1
Vaadin 23 in 23.3.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online