Cleave.js integration for Django forms
$ poetry add django-cleavejs
Then, add it to your INSTALLED_APPS setting to make its static files available:
INSTALLED_APPS = [ ... "dj_cleavejs.apps.DjCleaveJSConfig", ... ]
You need to make Cleave.js itself available by some means. You can download it manually, or use your favourite asset management library. For instance, you could use django-yarnpkg to depend on the cleave.js Yarn package:
YARN_INSTALLED_APPS = [ "cleave.js", ] NODE_MODULES_ROOT = os.path.join(BASE_DIR, "node_modules") STATICFILES_FINDERS += ["django_yarnpkg.finders.NodeModulesFinder"]
You can then either include it in your template yourself, or make django-cleavejs add it to its form media by configuring the URL or path in your settings:
CLEAVE_JS = "cleave.js/dist/cleave.min.js"
The above example uses the path below STATIC_ROOT where django-yarnpkg would put the package, but you can of course use any URL or path you want depending on how you want to make Cleave.js available to the browser.
Once available, you can create a form as normal and use the widget on any CharField:
from django.forms import CharField, Form from dj_cleavejs import CleaveWidget class TestForm(Form): windows_xp_serial = CharField(widget=CleaveWidget(blocks=[5, 5, 5, 5, 5], delimiter="-"))
In your template, make sure to include the form media of your form somewhere after the form.
The source distribution as well as the Git repository contain a full example application that serves a test form unter /test.html.
It is reduced to a minimal working example for the reader’s convenience.
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
|Filename, size||File type||Python version||Upload date||Hashes|
|Filename, size django_cleavejs-0.1.0-py3-none-any.whl (12.5 kB)||File type Wheel||Python version py3||Upload date||Hashes View|
|Filename, size django-cleavejs-0.1.0.tar.gz (12.3 kB)||File type Source||Python version None||Upload date||Hashes View|
Hashes for django_cleavejs-0.1.0-py3-none-any.whl