Disable and highlight specified dates in Bootstrap DatePicker using jQuery

chanchal...

SOLVED CLOSED ACTIVE ANSWERED
User: chanchal26
Posted: on Aug 31, 2021 02:51 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 15765

i am completely new into developement and have stuck in this datepicker issue.

please kindly help

now i am getting previous dates also in red color instead of grey color.

i need only colours in red which will come from database

<script type="text/javascript">
    if (testArray)
    {           
        $(function () {
            var disableSpecificDates = testArray;
            
            $('#datepicker1').datepicker({
                 
                format: 'dd-m-yyyy',
                startDate: Date(),
                beforeShowDay: function (date) {
                    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                    if (disableSpecificDates.indexOf(dmy) != -1) {
                       
                        return false;
 
                    }
                    else {
                        return true;
                    }
                    
                }
            });
            $('#datepicker1').datepicker("setDate", new Date());
        });
    }
</script>
<div class="form-group">
    <div class='input-group date' id='datepicker1'>
         <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
         <asp:TextBox runat="server" ID="txtdatepicker" OnTextChanged="txtdatepicker_TextChanged" AutoPostBack="true" class="form-control" placeholder="Pick Appointment Date"  required></asp:TextBox>      
    </div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Aug 31, 2021 07:44 AM
Report

Hi chanchal26,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" media="screen" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <style type="text/css">
        .Highlighted {
            color: red !important;
            font-weight: bold !important;
            font-size: 12pt;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // Set the list from code behind.
            var disableSpecificDates = ["10-9-2021", "15-9-2021", "28-9-2021"];
            $('[id*=txtdate]').datepicker({
                startDate: new Date(),
                minDate: new Date(),
                format: "mm/dd/yyyy",
                daysOfWeekHighlighted: "0,6",
                language: 'en',
                daysOfWeekDisabled: [0, 6],
                beforeShowDay: function (date) {
                    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
                    if (disableSpecificDates.indexOf(dmy) != -1) {
                        return false;
                    } else {
                        return { classes: 'Highlighted' };
                    }
                }
            });
        });
    </script>
    <input type="text" id="txtdate" />
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Disable and highlight specified dates in Bootstrap DatePicker using jQuery

Company

Explore

Follow us

Contact Us