Skip to main content

Cleave.js integration for Django forms

Project description

This re-usable app helps integrating Cleave.js into Django projects. Cleave.js is a JavaScript library that can “help you format input text content automatically”.

django-cleavejs eases integration into Django. It wraps Cleave.js’s options object into a form widget class, which takes care of transporting the options to JavaScript and initialising Cleave.js for each such input field.

Installation

To add django-cleavejs to a project, first add it as dependency to your project, e.g. using poetry:

$ 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.

Usage

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 CleaveWidget supports all options Cleave.js supports, as described in its options documentation. In the future, django-cleavejs will also provide shortcuts.

Example

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.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Files for django-cleavejs, version 0.1.0
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

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring DigiCert DigiCert EV certificate Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page