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

pdepirro

SOLVED CLOSED ACTIVE ANSWERED
User: pdepirro
Posted: on Aug 19, 2019 12:19 AM
Forum: Bootstrap
Answer: 1
Views: 17852

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>

pandeyis...

0 2

Reply
ANSWER
User: pandeyism
Replied: on Aug 19, 2019 02:14 AM
Modified: on Aug 20, 2019 01:15 AM
Report

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

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

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

Company

Explore

Follow us

Contact Us