You may like it:
Since the invention of the internet, almost every day there are some new technologies emerging, that are trying to change… Read More
Here, I am gonna to tell you how to show date picker and disable the past dates from pick up.
First, you need to add bootstrap’s own datepicker CSS & JS plugin. Below is the CDN you can use:
// Add inside your template head section https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css // Add at the bottom of your template section before closing body https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js
Note: Do not forget to add JQuery, bootstrap’s main CSS & JS plugin.
You can use any element you want to initialize like div, span, etc. Here, I am going to use div.
// datepicker is the element used to initialize date <div id="datepicker" class="date" data-date-form="mm-dd-yyyy"> <input type="text" readonly/> </div>
Now you need to trigger the datepicker function.
startDate: is initialized with the current date, it means you need to input current or upcoming date only, it will disable datepicker’s past date.