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" /> <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:
Cargando...