时间选择器AJAX扩展控制
![](src="/KB/ajax/TimePicker/Default.JPG")
{A}{S0}
![](src="/KB/ajax/TimePicker/Styled.JPG")
简介
时间选择器是一个Ajax扩展程序控件可用于输入时间。它尝试这种没有根据![](src="/KB/ajax/TimePicker/Layout.JPG")
可以用来增强ASP.NET Web服务器控件的客户端功能的扩展，以填补差距。您不使用自己的扩展程序控件。相反，你将它们附加到另一个ASP.NET Web服务器控件。扩展程序控件附加到Web服务器控件的扩展程序控件的TargetControlID属性设置扩展的服务器控件的ID。
库下载包括:帮助文件二进制文件演示应用程序的来源
本文包含Framework 2.0和3.5框架的源和二进制文件。背景
虽然一个项目的工作，我碰到一个需要用户输入的方式，他们可以选择从日历控件的日期。意识到，微软并没有提供任何开箱控制的事实，我开始寻找其他的选择。有一些提供良好的解决方案，但其中大多数是使用客户端脚本（jQuery的/ JavaScript的）。
这是当我无意中发现这两篇文章时:![](src="/KB/ajax/TimePicker/Validation.JPG")
{A4}
由于我很少有关于ASP.NET的经验，我决定把它作为一个学习的机会，建立在这样的控制，基于上述的两个例子，。
我的目标是建立一个控制必须简单易用/配置，提供有用的功能设置，并应类似AJAX Control Toolkit中的日历控件。使用代码
要使用控制:添加一个控制组件Ajaxified.dll的参考。大会还可以添加到工具箱中。 TimePicker控制将被添加到工具箱中。添加一个TextBox控件，您需要扩展，表现为一个时间选择器。从工具箱拖动TimePicker控制。这将增加以下页面指令，并在页面上的控制。<%@ Register TagPrefix="Ajaxified" Assembly="Ajaxified" Namespace="Ajaxified" %>
最后的标记将是:
{C}
时间选择器控制公开thenbsp以下属性:
物业名称类型评论CloseOnSelection布尔指定是否应选择当一个特定的时间自动关闭弹出。默认为false。MinuteStepInt32的指定两个值之间的分钟间隔。默认值是15分钟。OnClientShowing字符串客户端事件时弹出开始打开。OnClientShown字符串完全打开时弹出的客户端事件。OnClientHiding字符串客户端事件时弹出开始关闭。OnClientHidden字符串
客户端事件时，弹出的是完全封闭的。OnClientSelectionChanged字符串客户端事件时的时间选择是做。的CssClass字符串为控制的CSS类名。HeaderCssClass字符串CSS类名头的一部分。TitleCssClass字符串标题文本的CSS类名。TabCssClass字符串上午/下午标签的CSS类名。ItemCssClass字符串为项目单元的CSS类名。SelectedItemCssClass字符串对选定的项目单元的CSS类名。SelectedTabCssClass字符串选定的标签的CSS类名。
标记说明这些属性的使用:<asp:TextBox ID="TextBox2" runat="server" Text=""></asp:TextBox>
<Ajaxified:TimePicker runat="server" TargetControlID="TextBox2"
CssClass="timepicker"
HeaderCssClass="header"
TitleCssClass="title"
ItemCssClass="item"
SelectedItemCssClass="selecteditem"
TabCssClass="tab"
SelectedTabCssClass="selectedtab"
OnClientShowing="clientShowing"
OnClientShown="clientShown"
OnClientHiding="clientHiding"
OnClientHidden="clientHidden"
OnClientSelectionChanged="selectionChanged"
MinuteStep="10"
CloseOnSelection="true">
</Ajaxified:TimePicker>
和处理事件:<script language="javascript" type="text/javascript">
function clientShowing(sender) {
//sender is reference to the timepicker object
}
function clientShown(sender) {
//sender is reference to the timepicker object
}
function clientHiding(sender) {
//sender is reference to the timepicker object
}
function clientHidden(sender) {
//sender is reference to the timepicker object
}
function selectionChanged(sender) {
alert(sender._selectedTime);
}
</script>
控制的基本布局定义，如下图所示:
{S2}
每一部分都有一个CssName属性附加到它处理所有的造型需要控制。如果用户不分配这些属性，控制项呈现在介绍图像显示的默认样式。这是最好的颜色和字体的计划，以保持布局的一致性，发挥。演示应用程序包含一个样式表来说明如何重写控件的默认样式。段名CSS属性名称的CssClass整个控制HeaderCssClass头TitleCssClass标题文本TabCssClass上午/下午标签ItemCssClass项目细胞
SelectedItemCssClass所选项目的细胞SelectedTabCssClass选定的选项卡验证
控制也能够基本输入验证。
{S3}
如果用户密钥无效的时间格式，控制系统将提供一个可视化的提示，什么是错的，如上图所示。兴趣点
这次演习已经对我很有价值，尤其是当它来到了客户端脚本。最重要的事情，我来学习如何使用JavaScript的面向对象的方式。 ，但有轻微的打嗝时，试图在不同的浏览器。
我已经测试IE8，火狐4和Chrome的组成部分。有一个布局的问题，在IE7.0的使用，但这项工作的整体思路是创建学习跨浏览器的问题，而不是扩展控制。所以，我离开那里。参考文献
{A7}
鉴赏这些作者提供的很好的例子。