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

Last Reply 28 days ago By pandeyism

Posted 28 days 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
        });
    });
</script>
<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" />
    </div>
</div>

 

 

Posted 28 days ago Modified on 27 days ago

Hi pdepirro,

Refer below sample.

HTML

<div>
    <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='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" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
        media="screen" />
    <!-- Bootstrap -->
    <!-- Bootstrap DatePicker -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"
        type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"
        type="text/javascript"></script>
    <!-- Bootstrap DatePicker -->
    <script type="text/javascript">
        $(function () {
            $('[id*=txtDate]').datepicker({
                changeMonth: true,
                changeYear: true,
                format: "dd/mm/yyyy",
                autoclose: true,
                immediateUpdates: true,
                todayHighlight: true,
                language: "tr"
            });
        });
    </script>
</div>

Code

C#

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

VB.Net

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

Screenshot