MOSS自带SPDatePickerControl控件的使用

每个人的博客园子上都有个小日历,挺好的,像在MOSS的Blog模板中加入一个这样的日历,

很简单,

不需要任何代码,用Designer搞搞就可以。

 

  1. 加入脚本

    function MoveToViewDate(strdate, view_type) {
        
    var wUrl=window.location.href;//blogs/default.aspx?CalendarDate=2008%2F8%2F22&DashedDate=2008-8-22
        var gUrl ="/blogs/Lists/Posts/Calendar2.aspx";//blogs/Lists/Posts/Calendar.aspx?CalendarPeriod=day&CalendarDate=2008%2F8%2F15
        if (strdate !=null) {
            wUrl
    =StURLSetVar2(wUrl, "CalendarDate", escapeProperly(strdate));
            gUrl
    =StURLSetVar2(gUrl, "CalendarDate", escapeProperly(strdate));
            
    var M=localizedDate.indexOf("2");
            
    var D=localizedDate.indexOf("3");
            
    var Y=localizedDate.indexOf("1999");
            
    var index=0;
            
    for (var i=0; i < localizedDate.length; i++) {
                
    switch(i) {
                    
    case M:
                        M
    =index++;
                        
    break;
                    
    case D:
                        D
    =index++;
                        
    break;
                    
    case Y:
                        Y
    =index++;
                        
    break;
                }
            }
            
    var ch="-1";
            
    var chars=new Array("\u002f","-");
            
    for (var i=0; i < chars.length; i++) {
                
    if (strdate.indexOf(chars[i]) !=-1) {
                    ch
    =chars[i];
                    
    break;
                }
            }
            
    var darray=strdate.split(ch);
            wUrl
    =StURLSetVar2(wUrl, "DashedDate", darray[Y]+"-"+darray[M]+"-"+darray[D]);
            gUrl
    =StURLSetVar2(gUrl, "DashedDate", darray[Y]+"-"+darray[M]+"-"+darray[D]);
        }
        view_type 
    = "day";
        
    if (view_type !=null)
        {
            wUrl
    =StURLSetVar2(wUrl, "CalendarPeriod", view_type);
            gUrl
    =StURLSetVar2(gUrl, "CalendarPeriod", view_type);
        }
          window.location
    =gUrl;
         
    // window.open(gUrl);
    }
  2. 修改脚本:_layouts/2052/CORE.JS (先备份哦)

    function MoveToViewDate(strdate, view_type)
    {
        
    var wUrl=window.location.href;
        
    if (strdate !=null){
            wUrl
    =StURLSetVar2(wUrl,"CalendarDate",escapeProperly(strdate));}
        
    if (view_type !=null){
            wUrl
    =StURLSetVar2(wUrl,"CalendarPeriod",view_type);}
                     
    var localizedDate ="1999-02-03";
                    
    var M=localizedDate.indexOf("2");
            
    var D=localizedDate.indexOf("3");
            
    var Y=localizedDate.indexOf("1999");
            
    var index=0;
            
    for (var i=0; i < localizedDate.length; i++) {
                
    switch(i) {
                    
    case M:
                        M
    =index++;
                        
    break;
                    
    case D:
                        D
    =index++;
                        
    break;
                    
    case Y:
                        Y
    =index++;
                        
    break;
                }
            }
            
    var ch="-1";
            
    var chars=new Array("\u002f","-");
            
    for (var i=0; i < chars.length; i++) {
                
    if (strdate.indexOf(chars[i]) !=-1) {
                    ch
    =chars[i];
                    
    break;
                }
            }
            
    var darray=strdate.split(ch);
            wUrl
    =StURLSetVar2(wUrl, "DashedDate", darray[Y]+"-"+darray[M]+"-"+darray[D]);

        SubmitFormPost(wUrl, 
    true);
    }
  3. 在模板页中任意地方加入日期控件代码

    <div>
      
    <script type="text/javascript">
            
    var localizedDate = '1999-02-03'; 
    <script type="text/javascript" language="javascript" src="overrideCalendar.js" defer=""></script> <SharePoint:SPDatePickerControl ID="DPC1" SelectedDate="{$SelectedDate}"  EndOffset="0" StartOffset="0" runat="server" LangId="2052" LocaleId="2052"/>
    </div>
  4. 注意:overrideCalendar.js为第一步创建的脚本,可以放在磁盘或者Designer下。建议丢磁盘。快!
  5. 用Deigner打开日历列表的Calendar.aspx 页,复制一份以得到如下地址: var gUrl ="/blogs/Lists/Posts/Calendar2.aspx",主要实现和园子里的日历功能:按照日期过滤:
  6. 示例
  7. 更高级的用法:加载XML文件

 


<WebPartPages:DataFormWebPart runat="server" SuppressWebPartChrome="False" Description="" PartImageSmall="" DataSourceID="" MissingAssembly="无法导入此 Web 部件。" FrameType="None" ConnectionID="00000000-0000-0000-0000-000000000000" DetailLink="" ExportControlledProperties="True" IsVisible="True" AllowRemove="True" AllowEdit="True" ID="g_93e2cc52_d577_4396_99d1_7a83c0d3db86" Dir="Default" FrameState="Normal" ViewContentTypeId="" AllowConnect="True" PageSize="-1" AllowMinimize="True" IsIncludedFilter="" ShowWithSampleData="False" ChromeType="None" HelpMode="Modeless" ExportMode="All" ViewFlag="0" Title="会议室日历" HelpLink="" AllowHide="True" AllowZoneChange="True" PartOrder="2" UseSQLDataSourcePaging="True" PartImageLarge="" IsIncluded="True" NoDefaultStyle="TRUE" __MarkupType="vsattributemarkup" __WebPartId="{93E2CC52-D577-4396-99D1-7A83C0D3DB86}" __AllowXSLTEditing="true" WebPart="true" Height="" Width=""><DataSources>
<SharePoint:SPXmlDataSource runat="server" DataFile="" AutoSave="True" XPath="" ID="SPXmlDataSource1"><DataFileParameters><asp:Parameter DefaultValue="empty.xml" Name="FileName"></asp:Parameter><asp:Parameter Name="FilePath"></asp:Parameter>
</DataFileParameters>
</SharePoint:SPXmlDataSource>
</DataSources>
<ParameterBindings>
        
<ParameterBinding Name="FileName" Location="None" DefaultValue="empty.xml"/>
        
<ParameterBinding Name="FilePath" Location="None" DefaultValue=""/>
        
<ParameterBinding Name="SelectedDate" Location="QueryString(CalendarDate)"/>
    
</ParameterBindings>
<DataFields>text(),root;</DataFields>
<Xsl>
<xsl:stylesheet version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
    
<xsl:output method="html" indent="no"/>
    
<xsl:decimal-format NaN=""/>
    
<xsl:param name="FileName" />
    
<xsl:param name="SelectedDate" />
    
<xsl:variable name="dvt_1_automode">0</xsl:variable>
    
<xsl:template match="/">
        
<xsl:call-template name="dvt_1"/>
    
</xsl:template>
    
<xsl:template name="dvt_1">
    
<div>
      
<script type="text/javascript">
        
var localizedDate = &apos;<xsl:value-of select="ddwrt:FormatDate('1999-02-03','2052',1)" />&apos;;
        </script> <script type="text/javascript" language="javascript" src="overrideCalendar.js" defer=""></script> <SharePoint:SPDatePickerControl ID="DPC1" SelectedDate="{$SelectedDate}"  EndOffset="0" StartOffset="0" runat="server" LangId="2052" LocaleId="2052"/></div>
    
</xsl:template>
</xsl:stylesheet>    </Xsl>
</WebPartPages:DataFormWebPart>

 

 

 日历的数据源可以动态指定哦。

posted @ 2011-09-30 13:33  Areas  阅读(549)  评论(0编辑  收藏  举报