AJAX中日历控件的应用 - 苏飞论坛

上传

点击文件名下载附件

看一下Html代码吧

[HTML] 纯文本查看 复制代码

Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!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>无标题页</title>

</head>

<body>

     <form id="form1" runat="server">

     <asp:ScriptManager ID="ScriptManager1"   runat="server" EnableScriptGlobalization ="true" >

     </asp:ScriptManager>

     <div>

     </div>

     <cc1:CalendarExtender ID="CalendarExtender1" runat="server" 

         TargetControlID="TextBox1">

     </cc1:CalendarExtender>

     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

     </form>

</body>

</html>

面是怎么加样式的应用
每个页面中有且只有一个的scriptmanager控件，一个文本框控件，一个AutoComplete控件，一个Calendar控件，这里为了简单两个控件的TargetControl都是同一个文本框。
当然别忘了页面开始的那句话：

[HTML] 纯文本查看 复制代码



<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>

<asp:TextBox ID="SearchText"  Width="150px" runat="server" />

<input type ="button" id ="show" />

                        

<ajaxToolkit:CalendarExtender TargetControlID ="SearchText" CssClass="MyCalendar" 

      runat ="server"  PopupButtonID="show" ID ="Calendar" Animated="true" 

      Format="yyyy-MM-dd" Enabled="true"></ajaxToolkit:CalendarExtender>

      

<ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoCompleteSearch"

         MinimumPrefixLength="1" TargetControlID="SearchText"

         ServicePath="AutoCompleteService.asmx"

         ServiceMethod="GetSearchTerms"></ajaxToolkit:AutoCompleteExtender>

首先来试试日历控件。TargetControlID就是日历控件要显示在哪个控件的下方，这里是SearchText文本框，Format是日期的格式。这里需要注意的是PopupButtonID,如果不设置这个属性，日历控件就在TargetControl获得焦点的时候显示，选择日期后也不会消失，而必须在TargetControl失去焦点的时候才消失，设置PopupButtonID属性，当点击这个Button的时候日历控件在TargetControl下方显示，选择日期后就消失，或者点击按钮消失。下面是日历控件的CSS，目前就知道这些：

[CSS] 纯文本查看 复制代码

.MyCalendar .ajax__calendar_container 

{

     border:1px solid #646464;background-color:#C0AB80; color: #FC2628; background-image:url(../Images/large62230.jpg);

}

     .MyCalendar .ajax__calendar_other .ajax__calendar_day,

     .MyCalendar .ajax__calendar_other .ajax__calendar_year 

     {

          color: black;

     }

 .MyCalendar .ajax__calendar_hover .ajax__calendar_day,

 .MyCalendar .ajax__calendar_hover .ajax__calendar_month,

 .MyCalendar .ajax__calendar_hover .ajax__calendar_year

  {    color:#6E52DB; font-size:medium;}

  .MyCalendar .ajax__calendar_active .ajax__calendar_day,

  .MyCalendar .ajax__calendar_active .ajax__calendar_month,

  .MyCalendar .ajax__calendar_active .ajax__calendar_year 

  {    color: black;  font-weight:bold;}

作者: 地久天长-孔德姣 时间: 2012-10-12 15:06
需要学习学习！！！！

作者: 铄崇惕 时间: 2013-4-10 02:48
此贴有意思~

欢迎光临苏飞论坛 (http://www.sufeinet.com/)