How to DISABLE SPECIFIC DATES in Bootstrap Datetimepicker

Spread the love

Hello Guys,

Learn How to Easily Disable Specific Dates in Bootstrap Datetimepicker

Looking for a Bootstrap datetimepicker example that dynamically disables specific dates? You’re in the right place! In this post, we provide a straightforward demonstration of how to disable particular dates in the Bootstrap datetimepicker.

Discover how to disable specific dates in the Bootstrap datetimepicker with ease. If you’re working on a Bootstrap 4 project and using the datetimepicker, this tutorial is for you. You can even use it to disable select dates as public holidays.

The Bootstrap datetimepicker offers the convenient ‘disabledDates‘ option, allowing you to make specific dates unavailable. Learn more here.

Therefore let’s look at the complete example and solution for DISABLE SPECIFIC DATES in Bootstrap Datetimepicker below.

Solution:

Also Read: How to Resize Images Before Upload in LARAVEL 10

$(function () {
    var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];

    $('#datetimepickerDemo').datetimepicker({
        disabledDates: disabledDate
    });
});

Example:

Also Read: How to Generate Barcode using Laravel 10 with example

<!DOCTYPE html>
<html>
<head>
    <title>How to DISABLE SPECIFIC DATES in Bootstrap Datetimepicker - itcodestuff.com</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
  
<div class="container">
    <h2>How to DISABLE SPECIFIC DATES in Bootstrap Datetimepicker - itcodestuff.com</h2>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepickerDemo'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
  
<script type="text/javascript">
    $(function () {
        var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
        $('#datetimepickerDemo').datetimepicker({
            disabledDates: disabledDate
        });
    });
</script>
  
</body>
</html>

I hope it can be useful to you.

Leave a Comment