Implement Bootstrap DatePicker and highlight current Date using jQuery in ASP.Net

Last Reply 11 months ago By pandeyism

Posted 11 months ago

I have a bootstrap datepicker control in my webform and the appropriate javascript at the top of my content page necessary for the bootstrap datepicker. The datepicker displays as expected when clicking on the input field but the current date is not highlighted and when I click the date, the datepicker does not go away as expected.

if I include runat="server it no longer works since this is a client side control.

Is the any work-around for this?

<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-3.3.1.js"></script>
<link href="../Content/bootstrap-datepicker3.css" rel="stylesheet" />
<script src="../Scripts/bootstrap-datepicker.js"></script>
<script src="../Scripts/bootstrap-datepicker.min.js"></script>
<link href="../Content/font-awesome.min.css" rel="stylesheet" />
<link href="../Content/ui.css" rel="stylesheet" />
<script type="text/javascript">   
    $(document).ready(function () {
        $("#dpkrAvailability").datepicker(                            {
           format: 'mm-dd-yyyy',
            autoclose: true,
            immediateUpdates = true,
            todayHighlight: true
<div class="input-group date">
    <div id="dpkrAvailability" class="form-group input-icon" data-provide="datepicker">
        <i class="fa fa-calendar"></i>
        <input id="datepicker" type="text" class="form-control" placeholder="Availability Date" />



Posted 11 months ago Modified on 11 months ago

Hi pdepirro,

Refer below sample.


    <input id="txtDate" type="text" class="form-control" placeholder="Availability Date"
        runat="server" />
    <asp:Button Text="Submit" runat="server" OnClick="btnSubmit_Click" />
    <!-- Bootstrap -->
    <script type="text/javascript" src=''></script>
    <script type="text/javascript" src=''></script>
    <link rel="stylesheet" href=''
        media="screen" />
    <!-- Bootstrap -->
    <!-- Bootstrap DatePicker -->
    <link rel="stylesheet" href=""
        type="text/css" />
    <script src=""
    <!-- Bootstrap DatePicker -->
    <script type="text/javascript">
        $(function () {
                changeMonth: true,
                changeYear: true,
                format: "dd/mm/yyyy",
                autoclose: true,
                immediateUpdates: true,
                todayHighlight: true,
                language: "tr"



protected void btnSubmit_Click(object sender, EventArgs e)
    string dt = Request.Form[txtDate.UniqueID];
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Selected Date: " + dt + "');", true);


Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim dt As String = Request.Form(txtDate.UniqueID)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Selected Date: " & dt & "');", True)
End Sub