Bootstrap datepicker is a very customizable date picker that is used by web developers to implement dates on web pages.
Here we discuss, how we customize and integrate Bootstrap Date picker.
We use the Bootstrap Datepicker example to describe the integration. Here is the line item which we discuss in further explanation.
- Bootstrap Datepicker CDN
- Install Bootstrap Datepicker
- Disable Specific Dates
- Disable Saturday Sunday
Include Bootstrap Datepicker CDN
There two type of CDN to implement bootstrap date picker,
- Bootstrap 3 Date picker v4 CDN
- Native Bootstrap CDN (Recommended)
Also Check: Create Date Picker using Materialize Framework
Native Bootstrap CDN (Recommended)
|
1 2 3 4 5 |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
Bootstrap 3 Date Picker v4 CDN
|
1 2 3 4 5 6 |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> <script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script> |
Install Bootstrap Datepicker (Also can use in MVC)
We use Bootstrap 3 Datepicker v4 CDN to implement normal bootstrap date picker where we also use glyphicon.
Including above CDN part and date picker function.
|
1 2 3 4 5 |
<script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> |
See the Pen Integrate Bootstrap Datepicker by Bikash Panda (@phpcodertech) on CodePen.
Disable Specific Dates in Bootstrap Datepicker
When we need to display the date on the input field and want to disable a specific date then we have to use some parameters which help to do this. Here is the complete code login where we check How to Disable Specific Dates in Bootstrap Date Picker.
Code Logic to Disable Specific Dates
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> var disableDates = ["19-11-2020", "16-11-2020", "17-11-2020","27-12-2020"]; $('.datepicker').datepicker({ format: 'mm/dd/yyyy', beforeShowDay: function(date){ dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear(); if(disableDates.indexOf(dmy) != -1){ return false; } else{ return true; } } }); </script> |
See the Pen Disable Specific Dates in Bootstrap Datepicker by Bikash Panda (@phpcodertech) on CodePen.
Disable Saturday Sunday Bootstrap Datepicker
Here is the task to where we check How to Disable Saturday Sunday in Bootstrap Date Picker.
You can see the code logic or parameters to do this.
Code Logic to Disable Saturday Sunday
|
1 2 3 4 5 |
<script type="text/javascript"> $('.datepicker').datepicker({ daysOfWeekDisabled: [0,6] }); </script> |
See the Pen Disable Saturday Sunday Bootstrap Datepicker by Bikash Panda (@phpcodertech) on CodePen.
Here is the complete solution of parameterized and customized bootstrap date picker with live example.
For more, you can also check here https://eonasdan.github.io/bootstrap-datetimepicker/.
Also Read:
- Integrate Google reCaptcha in Codeigniter
- Google Sheet Integration with WordPress without Plugin
- How to Embed PDF in Website Using HTML
- DOM | Document Object Model
Happy Coding…!
[…] Bootstrap Datepicker- Complete Solution to Integrate […]
[…] Bootstrap Datepicker- Complete Solution to Integrate […]
[…] Bootstrap Datepicker- Complete Solution to Integrate […]
[…] Bootstrap Datepicker- Complete Solution to Integrate […]
[…] Bootstrap Datepicker- Complete Solution to Integrate […]
[…] Also Read: Bootstrap Datepicker- Complete Solution to Integrate […]
Hi good Evening! I read the blog and I found it helpful about my PHP. Thank you for sharing.
[…] Bootstrap Datepicker- Complete Solution to Integrate […]