UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Date time picker in asp.net c#

Demo and code for how to implement bootstrap date time picker with jQuery in Asp.net

by Athil


Posted on 14 Jul 2017 Category: Asp.net Views: 2028

Edited on 26 Jul 2017


DEMO

Hi, Here I am going to show how to implement.

script for assigning text control as datetime picker

 

<script>
    $(document).ready(function () {
        $('#<%=TextBox1.ClientID%>').datetimepicker();

        });
</script>

To implement Date time picker in asp.net you need to include the following CSS and scripts

Scripts

  <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/moment-with-locales.js"> </script>
    <script src ="/js/bootstrap-datetimepicker.js"></script>

 

 CSS

  <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap-datetimepicker.css" />
    <link type="text/css" rel="stylesheet" href ="/css/jquery-ui.css"/>

 

To Download CSS and Scripts click here

 

Images of Date time picker

To show time picker click on the button marked

To show the calendar click on the button marked

 

Full Demo Code

On Client Side

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo for Date time picker in Asp.net</title>
    
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap-datetimepicker.css" />
    <link type="text/css" rel="stylesheet" href ="/css/jquery-ui.css"/>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/moment-with-locales.js"> </script>
    <script src ="/js/bootstrap-datetimepicker.js"></script>

</head>
<body>
    <form id="form1" runat="server">
        <h1>Demo for Date time picker in Asp.net </h1>
        <div style="position:relative">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </div>
    </form>
</body>

<script>
    $(document).ready(function () {
        $('#<%=TextBox1.ClientID%>').datetimepicker();

        });
</script>
</html>


Leave a Comment:


Advertisement