How to Add Bootstrap Datepicker to Odoo Website

Bootstrap Datepicker in Odoo Website

by Dharmesh Patel

Adding a Bootstrap Datepicker to your Odoo website enhances the user experience by providing a convenient and intuitive way to select dates. This functionality is particularly useful for forms requiring date inputs, making data entry quicker and reducing the chances of errors. In this guide, you’ll learn how to easily integrate the Bootstrap Datepicker into your Odoo website, ensuring a seamless interaction for your users.

Steps to Use Bootstrap Datepicker in Odoo

To use the Bootstrap Datepicker on an Odoo website, you can follow these steps:

1. Include the Bootstrap Datepicker Library

The Odoo website assets already include the Bootstrap Datepicker library, which will be included automatically if you call the layout. If the layout isn't called, ensure the necessary Bootstrap Datepicker CSS and JS libraries are loaded on your Odoo website. You can include them either through the Odoo assets bundle or directly in the custom HTML of your page.

Option 1: Use Odoo Asset Bundles (Recommended)

In your custom Odoo module, extend the assets for the website.

<template id="assets_frontend" inherit_id="website.assets_frontend" name="Add Bootstrap Datepicker CSS and JS">
  <xpath expr="." position="inside">
    <!-- Bootstrap Datepicker CSS -->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
    <!-- Bootstrap Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  </xpath>
</template>
Option 2: Add Directly to Website Page (Inline)

You can also directly include the libraries in your Odoo website's custom HTML, but this is less flexible for long-term maintainability.

<link rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

2. Add HTML Input for Datepicker

In your website template, add the input field where you want the date picker to appear.

<div class="form-group">

    <label for="datepicker">Select Date</label>

    <input type="text" class="form-control" id="datepicker" placeholder="Choose a date" />

</div>

3. Initialise the Datepicker Using JavaScript

Once you've added the input field, initialise the Bootstrap Datepicker in the JavaScript. You can set custom date formats and other configurations in the initialisation options.

<script>

    $(document).ready(function() {

        $('#datepicker').datepicker({
          format: 'mm/dd/yyyy', // Set custom date format

          autoclose: true, // Close the datepicker automatically after selecting a date

          todayHighlight: true // Highlight today's date

    });

    });

</script>

Following these steps, you can easily implement a Bootstrap Datepicker in your Odoo website, enhancing user experience and improving data entry efficiency.

Need more development tips?

Stay tuned to our blog.

Share

How to Validate Date Fields in Odoo 13