Today, We want to share with you jquery datepicker disable dates dynamically.In this post we will show you bootstrap datetimepicker disable current date, hear for bootstrap-datetimepicker disable specific time we will give you demo and example for implement.In this post, we will learn about Bootstrap datepicker Disable Past Dates And Time with an example.

JQuery ui – date picker, disabling specific dates

Contents

<script type="text/javascript">
    $(function () {
          var disabledDate = ['2021-1-8', '2021-1-25','2021-1-7', '2021-1-17'];
        $('#myonlineorderbookwithfunction').datetimepicker({
            disabledDates: disabledDate
        });
    });
</script>

In this Example, i will give you simple step by step simple example of Bootstrap datetimepicker disable dates dynamically. so, First of all you can disable dynamically dates bootstrap datetimepicker using disabledDates method(jquery datepicker disable weekends and specific dates). I am disabled bootstrap datetimepicker in particular dates (bootstrap-datetimepicker disable specific time). it will useing disabledDates options to disable particular dates in bootstrap datetimepicker.

here bellow example of bootstrap datetimepicker disable dates dynamically set.

Boostrap datepicker, disabled dates dynamically each month

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Datetimepicker Disable Dates Dynamically - www.pakainfo.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 style="background:#3D3D3D;">
<div class="container">
    <h3>Bootstrap Datetimepicker Disable Dates Dynamically - www.pakainfo.com</h3>
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='myonlineorderbookwithfunction'>
                    <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 = ['2021-1-8', '2021-1-25','2021-1-7', '2021-1-17'];
        $('#myonlineorderbookwithfunction').datetimepicker({
            disabledDates: disabledDate
        });
    });
</script>
</body>
</html>

I hope you get an idea about Bootstrap Datetimepicker Disable Past Dates And Time Example.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

JQuery ui – date picker, disabling specific dates

Boostrap datepicker, disabled dates dynamically each month

Related posts: