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í.
