Cleave.js Date Format Example

This section will guide you on how to integrate **Cleave.js** into your project. Cleave.js is a lightweight library that helps with formatting input fields such as phone numbers, credit card numbers, and dates. Follow these steps to integrate and configure it for date input formatting.

Install Cleave.js from Yarn

To install Cleave.js, run the following command from the root directory of your project:

yarn add cleave.js --save

This command installs Cleave.js and saves it as a dependency in your project.

If you're not using a bundler, you can link Cleave.js directly from a CDN:

                    <script src="assets/libs/cleave.js/cleave.min.js"></script>
                

HTML Markup for Date Input

Add an input field for the date where Cleave.js will format the date in the desired pattern:

                    <input type="text" class="form-control" id="simple-date" name="simple-date" placeholder="MM/DD/YYYY">
                

This input field will accept a date in the format MM/DD/YYYY, which will be automatically formatted by Cleave.js as the user types.

Initialize Cleave.js for Date Formatting

Now, you need to initialize Cleave.js on the input field to apply the date formatting:

                    new Cleave('#simple-date', {
    date: true,
    delimiter: '/',
    datePattern: ['d', 'm', 'Y']
});
                

In the JavaScript above, we initialize Cleave.js on the input field with the ID simple-date. The configuration ensures that the input will be formatted as a date, with a delimiter of "/" and the date pattern set to day, month, and year ("d/m/Y").

Test the Date Input

After implementing the HTML and JavaScript code, open your project in a browser. Try typing a date like 12052023 into the input field. It should automatically format to 12/05/2023.

You can find more configuration options and features in the official Cleave.js documentation to further customize your input fields.