快捷導(dǎo)航

ASP.NET中日歷控件和JS版日歷控件的使用方法(第5節(jié))

更新時(shí)間：2022年04月27日 14:42:31 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了ASP.NET中日歷控件和JS版日歷控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

今天小編帶大家以做任務(wù)的形式了解ASP.NET中日歷控件的使用方法，主要任務(wù)內(nèi)容：

1、添加一個(gè)日歷，設(shè)置日期以藍(lán)色的完整名稱顯示，周末以黃色背景紅色文字顯示，而當(dāng)前日期使用綠色背景顯示，用戶可以選擇一天、一周或整個(gè)月，被選的天/周/月使用灰色背景色來(lái)顯示。當(dāng)選中一個(gè)日期后，把時(shí)間顯示在下面的一個(gè)文本框中，效果如圖所示：

2、設(shè)計(jì)一個(gè)注冊(cè)頁(yè)面，使用js日歷控件幫助用戶輸入出生日期。效果如圖所示：

學(xué)習(xí)項(xiàng)目一 Calendar日歷控件

1、在站點(diǎn)下創(chuàng)建一個(gè)Calendar頁(yè)面，并在頁(yè)面上拖放一個(gè)TextBox控件用來(lái)輸入日期，一個(gè)Calendar1日歷控件對(duì)其進(jìn)行屬性設(shè)置，設(shè)置日期以藍(lán)色的完整名稱顯示，周末以黃色背景紅色文字顯示，而當(dāng)前日期使用綠色背景顯示，用戶可以選擇一天、一周或整個(gè)月，被選的天/周/月使用灰色背景色來(lái)顯示。

2、在頁(yè)面運(yùn)行時(shí)，當(dāng)用戶在Calendar1控件上選擇日期后會(huì)觸發(fā)SelectionChanged事件。在Calendar.aspx.cs文件中編寫如下代碼：

protected void Calendar1_SelectionChanged(object sender, EventArgs e)
 {
  TextBox7.Text = Calendar1.SelectedDate.ToString();
  }
}

學(xué)習(xí)項(xiàng)目二 Js版日歷控件

(1)、在站點(diǎn)下創(chuàng)建一個(gè)JSCalendar.aspx頁(yè)面文件,在頁(yè)面中添加一個(gè)TextBox控件，在JSCalendar.aspx.中編寫如下代碼：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>無(wú)標(biāo)題頁(yè)</title>
</head>
<body>
<script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
  <form id="form1" runat="server">
  <div>
 
  <asp:TextBox ID="TextBox1" runat="server" CssClass="Wdate" Text=""
  onfocus="new WdatePicker(this,'%Y-%M-%D-%h:%m',true,'default')"></asp:TextBox>
 
  </div>
 </form>
</body>
</html>

(2)、運(yùn)行將光標(biāo)移動(dòng)到TextBox控件上時(shí)，就會(huì)激活，顯示日歷

運(yùn)行效果圖：