DateTime Picker con jQuery, JavaScript y ASP.NET

jquery ajax, ajax asp.net

En la mayoría de los desarrollos requerimos un control para seleccionar la fecha, por eso en este artículo mostraremos un ejemplo de un DateTimePicker utilizando jQuery, Javascript y ASP.NET.

Bueno veamos el ejemplo:

HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Src="~/Control/DateTimePicker.ascx" TagName="DateTimePicker" TagPrefix="DateTime" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Date Time Picker</title>
    <link href="CSS/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
    <link href="CSS/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />

    <script src="Script/jquery-1.10.2.min.js" type="text/javascript"></script>

    <script src="Script/bootstrap.min.js" type="text/javascript"></script>

    <script src="Script/bootstrap-datetimepicker.min.js" type="text/javascript"></script>

    <script src="Script/bootstrap-datetimepicker.pt-BR.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table>
                    <tr>
                        <td>
                            Select DateTime :
                        </td>
                        <td>
                            <DateTime:DateTimePicker ID="DateTimePicker" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <asp:Label ID="lblMessage" runat="server" Style="color: Red;" Text=""></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
                            &nbsp;<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" />
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

C#

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        lblMessage.Text = DateTimePicker.DateTime;
    }

    protected void btnClear_Click(object sender, EventArgs e)
    {
        TextBox txtDateTime = (TextBox)DateTimePicker.FindControl("txtDateTime");
        txtDateTime.Text = string.Empty;
        lblMessage.Text = string.Empty;
    }
}

Control HTML:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateTimePicker.ascx.cs"
    Inherits="DateTimePicker" %>
<style type="text/css">
    .textBox
    {
        width: 150px;
        border-radius: 4px 4px 4px 4px;
        color: #555555;
        display: inline-block;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
        padding: 4px 6px;
        vertical-align: middle;
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    }
</style>

<script type="text/javascript" language="javascript">
    function getDateTimePicker()
    {
       $('#datetimepicker').DateTimePickerNew({
            format: 'dd/MM/yyyy hh:mm:ss',
            language: 'en'
      });
    }
</script>

<div id="datetimepicker" class="input-append date">
    <asp:TextBox ID="txtDateTime" CssClass="textBox" runat="server"></asp:TextBox>
    <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

<script type="text/javascript" language="javascript">
       $('#datetimepicker').DateTimePickerNew({
            format: 'dd/MM/yyyy hh:mm:ss',
            language: 'en'
      });
</script>

Control C#

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class DateTimePicker : System.Web.UI.UserControl
{
    public string DateTime
    {
        get { return txtDateTime.Text; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        DateTimePicker picker = this;
        ScriptManager.RegisterClientScriptBlock(picker, picker.GetType(), "message", "<script type=\"text/javascript\" language=\"javascript\">getDateTimePicker();</script>", false);
    }
}

El ejemplo completo lo puedes descargar aquí.