DateTime Picker con jQuery, JavaScript y ASP.NET

Estrada Web Group
Administrador
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í.

Compartir artículo:

Más artículos geniales

Tipo boolean de JavaScript

Tipo boolean de JavaScript

Resumen: en este tutorial, aprenderás sobre el tipo de datos booleano de JavaScript que tiene dos valores true o false.

Ver artículo completo
Variables y tipos de datos en JavaScript

Variables y tipos de datos en JavaScript

En Javascript una variable es un nombre dado a una ubicación de memoria. Es la unidad básica de almacenamiento en un programa.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla