Skip to main content

Date Picker

Bootstrap Date picker example with Asp.net

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Datepicker.aspx.cs" Inherits="DeveloperHouse.Datepicker" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-datepicker/css/bootstrap-datepicker.css" rel="stylesheet" />
    <script type="text/javascript" src="Jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <br />
        <div class="container">
            <div class="panel panel-info">
                <div class="panel-heading">Bootstrap Datepicker 
                Example with ASP.net</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-offset-3 col-sm-1">
                            Date:
                        </div>
                        <div class="col-sm-4">
                            <div class="input-group date" data-provide="datepicker" id="datepicker">
                                <asp:TextBox ID="txtDate" runat="server" CssClass="form-control" placeholder="dd/mm/yyyy"></asp:TextBox>
                                <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i> </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#datepicker').datepicker({
                format: "dd/mm/yyyy",
                autoclose: true,
                todayHighlight: true
            });
        });
    </script>
</body>
</html>

Comments