TextField Formatter
Cleave.js based client-side text formatter for Vaadin 8 and Vaadin 14
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.
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);
Links
Compatibility
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
Version 23.3.2
- Fix compatibility with Vaadin 24.4
- Released
- 2024-09-12
- Maturity
- EXPERIMENTAL
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 23
- Vaadin 24
- Vaadin 24.1
- Vaadin 24.2
- Vaadin 24.3
- Vaadin 24.4
- Vaadin 8.0+ in 1.0
- Vaadin 14+ in 4.0.0.beta3
- Vaadin 14 in 4.1.4
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Microsoft Edge
TextField Formatter - Vaadin Add-on Directory
Cleave.js based client-side text formatter for Vaadin 8 and Vaadin 14
Source Code
GitHub
TextField Formatter version 1.0
null
TextField Formatter version 1.1
- Fixed delimiters in CustomStringBlockFormatter
- Force upper case in IBANFormatter
TextField Formatter version 1.2
- Added support for phone number formatting based on country code
- Uses cleave-phone.i18n.js, which is quite large. Future version will make it possible to skip the script loading if you don't use the phone number feature
TextField Formatter version 1.3
* Updated to cleave.js 1.0.1
* Added NumeralFieldFormatter
TextField Formatter version 1.4
Added numericOnly mode for CustomStringBlockFormatter
TextField Formatter version 1.5
You can now create a new instance of formatter and replace the previous one in the same text field without re-creating the text field
TextField Formatter version 1.6
- Added prefix option to CustomStringBlockFormatter.
- Updated Cleave.js to 1.1.0
TextField Formatter version 2.0.alpha1
API and code cleanup preparing for 2.0 final
TextField Formatter version 2.0.beta1
Release notes in GitHub
TextField Formatter version 2.0
Release notes in GitHub
TextField Formatter version 2.1
Updated Cleave.js to 1.4.4
TextField Formatter version 4.0.0.beta3
[Release notes on GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.0.0.beta3)
TextField Formatter version 4.0.0.beta4
[Release notes on GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.0.0.beta4)
TextField Formatter version 2.2.0
[Release notes on GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v2.2.0)
TextField Formatter version 2.3.0
[Release notes on GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v2.3.0)
TextField Formatter version 4.0.1
[v4.0.1 in GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.0.1)
TextField Formatter version 4.1.0
[4.1.0 in GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.1.0)
TextField Formatter version 4.1.1
Release notes in [GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.1.1)
TextField Formatter version 4.1.4
Fixed a corrupted jar
TextField Formatter version 4.2.0
Relase notes on [GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v4.2.0)
TextField Formatter version 5.0.0
Release notes in [GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v5.0.0)
TextField Formatter version 5.0.1
[Release notes in GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v5.0.1)
TextField Formatter version 5.1.0
[Release notes in GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v5.1.0)
TextField Formatter version 5.2.0.pre
Release notes in [GitHub](https://github.com/johannesh2/textfieldformatter/releases/tag/v5.2.0.pre)
TextField Formatter version 5.2.0
[Release notes](https://github.com/johannesh2/textfieldformatter/releases/tag/v5.2.0) in GitHub
TextField Formatter version 5.3.0
See [release notes](https://github.com/johanneshayry/textfieldformatter/releases/tag/v5.3.0)
TextField Formatter version 5.4.0
[Release notes on GitHub](https://github.com/johanneshayry/textfieldformatter/releases/tag/v5.4.0)
TextField Formatter version 23.3.0
* Updated dependencies to Vaadin 23
* Add workaround for unguarenteed order of JsModule loading
* Fix client-server value synchronization issues
* Add Java API to obtain Cleave raw value
TextField Formatter version 23.3.1
Fixed an issue that prevented the add-on from working in Vaadin 24.
TextField Formatter version 23.3.2
### Version 23.3.2
- Fix compatibility with Vaadin 24.4