Directory

← Back

TextField Formatter

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

Author

Rating

Popularity

500+

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

Fixed an issue that prevented the add-on from working in Vaadin 24.

Released
2023-10-04
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23
Vaadin 24
Vaadin 24.1
Vaadin 24.2
Vaadin 8.0+ in 1.0
Vaadin 14+ in 4.0.0.beta3
Vaadin 14 in 4.1.4
Browser
N/A

TextField Formatter - Vaadin Add-on Directory

Cleave.js based client-side text formatter for Vaadin 8 and Vaadin 14 TextField Formatter - Vaadin Add-on Directory
A TextField formatter extension built on top [Cleave.js](https://nosir.github.io/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](http://johku.app.fi/textfieldformatter)
Online