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.