Bootstrap Datepicker
CSS / HTML / JavaScript / jQuery

How to use Bootstrap Datepicker in Bootstrap 4

Bootstrap Datepicker

Maybe you are struggling with Bootstrap 4 when trying to make a Date picker input in your project using Bootstrap 4. Remember that bootstrap-date picker is not a part of the Bootstrap. So first we include it and then initialize it.

Include Bootstrap-Date picker CSS after Bootstrap 4 CSS:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

Now add Bootstrap-Date picker JS and initialize it:

Note: Make sure you have included jQuery plugin before including the given js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script>
  $('#datepicker').datepicker({
    weekStart: 1,
    daysOfWeekHighlighted: "6,0",
    autoclose: true,
    todayHighlight: true,
  });
  $('#datepicker').datepicker("setDate", new Date());
</script>

HTML:

<input type="text" name="" class="form-control" id="datepicker">

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *