DateTime Picker con jQuery, JavaScript y 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í.

Artículos relacionados
14 Comentarios
  • Alvaro Comentar
    Friday, November 21, 2014

    Lo primero es darte la enhorabuena por tu blog, el diseño es genial y los artículos tienen muchísima calidad, (por lo menos los de asp.net que es lo que me estoy leyendo) Quería hacerte una pregunta, ¿Cómo puedo hacer para poner varios de estos en una misma vista? Al hacer la detección del elemento por id me obligaría a repetir muchísimo código que además no se como localizar para conseguirlo... Gracias.

    • JoséComentar
      Friday, November 21, 2014

      Hola Álvaro A ver sí entendí bien, vas a tener varios calendarios y quieres evitar repetir código, para jquery puedes usar una clase de css y con eso los identificas y en código de servidor con un for los busco. Espero te sirva, en caso contrario dame más detalles. Saludos

  • Junior Castro Comentar
    Thursday, November 5, 2015

    Como sería en el vaso de usar vb.net? Que librerías debo importar?, uso visual studio 2013.

  • McKeown Comentar
    Monday, March 12, 2018

    Does your site have a contact page? I'm having a tough time locating it but, I'd like to shoot you an email. I've got some ideas for your blog you might be interested in hearing. Either way, great site and I look forward to seeing it expand over time.

  • Pringle Comentar
    Saturday, March 17, 2018

    It's an remarkable piece of writing for all the web viewers; they will take advantage from it I am sure.

  • Hash Comentar
    Monday, April 2, 2018

    Existe sim eu tenho

  • Wolford Comentar
    Thursday, April 5, 2018

    Hi there to all, the contents existing at this website are actually remarkable for people experience, well, keep up the nice work fellows.

  • Nascimento Comentar
    Saturday, April 28, 2018

    Obrigado , isto local é muito útil .

  • Campos Comentar
    Wednesday, May 2, 2018

    Seu fotos olha excelente !!!

  • Burkholder Comentar
    Friday, May 4, 2018

    I was able to find good advice from your articles.

  • Keefe Comentar
    Saturday, May 5, 2018

    What's up to all, because I am really eager of reading this webpage's post to be updated regularly. It includes pleasant information.

  • Rocha Comentar
    Friday, May 18, 2018

    Simplesmente check-out vários dos seu fotos (: sou na verdade satisfeito eu obtidos para tarefa escuridão você. Você é grande !

  • mexx schoenen Comentar
    Saturday, May 19, 2018

    Could Matt Holliday see some playing time at first.

  • Carmack Comentar
    Sunday, May 20, 2018

    Do you have a spam issue on thi? site; ? a??o ?m a blogger, and ? was wondering your situation; we have developed ?ome nice methods ?nd we are loo?ing to swap strategies with ?thers, pl?ase shoot me an e-mail ?f interested.

  • roshe run nike cheap Comentar
    Monday, May 28, 2018

    Win Turnover BattleWin Rebounding BattleHold Golden State to less than 38% from threeShoot at least .

Enviame un comentario