ASP.NET笔记之Calender的使用说明

1、介绍

(1、在Calender中,所有可选择的符号会显示下划线,这是因为它们在浏览器都会呈现为链接。

如果让用户可以选择某天、月、周,必须设置SelectionMode属性(Day、 DayWeek、DayWeekMonth)

ASP.NET笔记之Calender的使用说明

(2   控件事件  当用户选择了某一天或者月,可以用OnSelectionChanged来触发

通过  Calendar1.SelectedDate.ToShortDateString();来获取所选择的时间点
     通过  Calendar1.SelectedDate.Count.ToString();来获取所选择的天数

2、实例

现在通过一个实例来加深对日历控件的理解:

当点击TGIF时,会在日历上显示所选月份的所有星期五

当点击Apply时,会在日历上显示开始到结束的日期

ASP.NET笔记之Calender的使用说明

 Calender.aspx.cs


代码如下:

using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;
 using System.Web.UI;
 using System.Web.UI.WebControls;

public partial class myTest_Calender : System.Web.UI.Page
 {
     protected void Page_Load(object sender, EventArgs e)
     {
         if (!IsPostBack) {
             my_Calendar.VisibleDate = my_Calendar.TodaysDate;
             //将选择的日期中的月份映射到下拉框中
             Month_List.SelectedIndex = my_Calendar.VisibleDate.Month - 1;
         }
         //显示到标签中
         lblTodaysDate.Text = "Today is  :" + my_Calendar.TodaysDate.ToShortDateString();
     }
     //选择一个日期的时候触发函数
     protected void Calendar_Select(object sender, EventArgs e)
     {
         lblCountUpdate();
         lblSelectedUpdate();
         txtClear();
     }
     //下拉框触发函数
     protected void Month_SelectedChange(object sender, EventArgs e)
     {
         my_Calendar.SelectedDates.Clear();
         lblSelectedUpdate();
         lblCountUpdate();
         //重新设置时间
         my_Calendar.VisibleDate = new DateTime(my_Calendar.VisibleDate.Year,
             Int32.Parse(Month_List.SelectedItem.Value), 1);
         txtClear();
     }

//重构函数01-修改日期的次数
     private void lblCountUpdate() {
         lblCount.Text = "the Count of Selected:" + my_Calendar.SelectedDates.Count.ToString();      
     }
     //重构函数02-清楚数据
     private void txtClear() {
         txtEnd.Text = "";
         txtStart.Text = "";
     }
     //重构函数03-修改日期
     private void lblSelectedUpdate() {
         if (my_Calendar.SelectedDate != DateTime.MinValue)
             lblSelctedDate.Text = "the  selected day is :" +
                 my_Calendar.SelectedDate.ToShortDateString();
     }
     //按钮1:显示所选月份的所有星期五
     protected void btnTgif_Click(object sender, EventArgs e)
     {
         int currnetMonth = my_Calendar.VisibleDate.Month;
         int curretnYear = my_Calendar.VisibleDate.Year;
         //先清除原先日历位置
         my_Calendar.SelectedDates.Clear();
         //如果日期是星期五则将其添加到日历中
         for (int i = 1; i <= System.DateTime.DaysInMonth(
             curretnYear, currnetMonth); i++) {

DateTime datetime = new DateTime(curretnYear, currnetMonth, i);
                 if (datetime.DayOfWeek == DayOfWeek.Friday)
                     my_Calendar.SelectedDates.Add(datetime);
             }
         lblSelectedUpdate();
         lblCountUpdate();
     }
     //按钮2:
     protected void btnRange_Click(object sender, EventArgs e)
     {
         int currnetMonth = my_Calendar.VisibleDate.Month;
         int curretnYear = my_Calendar.VisibleDate.Year;

DateTime StartDate = new DateTime(curretnYear, currnetMonth,Int32.Parse(txtStart.Text));
         DateTime EndtartDate = new DateTime(curretnYear, currnetMonth, Int32.Parse(txtEnd.Text));
         my_Calendar.SelectedDates.Clear();
         my_Calendar.SelectedDates.SelectRange(StartDate,EndtartDate);

lblCountUpdate();
         lblSelectedUpdate();
     }
 }

Calender.aspx


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calender.aspx.cs" Inherits="myTest_Calender" %>

<!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>Calender  Control</title>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <h1>Calender  Control</h1>
         <h2></h2>
         <asp:Calendar ID="my_Calendar" runat="server"
                     OnSelectionChanged="Calendar_Select">
         </asp:Calendar>
         <br  />
         <asp:Label ID="lblCount" runat="server" Text="Label"></asp:Label>
         <br />
         <asp:Label ID="lblTodaysDate" runat="server" Text="Label"></asp:Label>
         <br />
         <asp:Label ID="lblSelctedDate" runat="server" Text="Label"></asp:Label>

<table>
            <tr>
                <td>Select a month</td>
                <td>
                    <asp:DropDownList ID="Month_List" runat="server"
                        AutoPostBack="true"
                        OnSelectedIndexChanged="Month_SelectedChange">
                        <asp:ListItem text="January" Value="1" />
                        <asp:ListItem text="February" Value="2" />
                        <asp:ListItem text="March" Value="3" />
                        <asp:ListItem text="April" Value="4" />
                        <asp:ListItem text="May" Value="5" />
                        <asp:ListItem text="June" Value="6" />
                        <asp:ListItem text="July" Value="7" />
                        <asp:ListItem text="Augut" Value="8" />
                        <asp:ListItem text="September" Value="9" />
                        <asp:ListItem text="October" Value="10" />
                        <asp:ListItem text="November" Value="11" />
                        <asp:ListItem text="December" Value="12" />
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:Button ID="btnTgif" runat="server"
                        Text="TGIF"
                        OnClick="btnTgif_Click"/>
                </td>
            </tr>
            <tr>
                <td  colspan="2"> </td>
            </tr>
            <tr>
                <td  colspan="2"><b>Day Range</b></td>
            </tr>

<tr>
                <td >Starting  Day</td>
                <td >Ending  Day</td>
            </tr>

<tr>
                <td >
                    <asp:TextBox ID="txtStart" runat="server"
                        Width="25" MaxLength="2"></asp:TextBox>
                </td>
                <td >
                    <asp:TextBox ID="txtEnd" runat="server"
                        Width="25" MaxLength="2"></asp:TextBox>
                </td>
                <td >
                    <asp:Button ID="btnRange" runat="server" Text="Apply"
                      OnClick="btnRange_Click" style="height: 21px"/>
                </td>
            </tr>
         </table>
     </div>
     </form>
 </body>
 </html>

总结:

(1  采用一些重构,将一些函数方法分离出去,这一块有一些还没分离完全

(2  日期控件还有VisiblMonthChanged事件来处理日历是否被用户更改了月份,   e.NewDate.Year 和e.PreviousDate.Year诸如此类的比较

(3 DayRender事件,可以通过cell和Day来呈现日期的特殊性,例如周末和节假日的颜色,

e.Day.IsOtherMOnth    e.Day.IsWeekend  等

时间: 2013-04-21

javascript实现的淘宝旅行通用日历组件用法实例

本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址 具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

php calender(日历)二个版本代码示例(解决2038问题)

注意32位机有2038问题,所以32位服务器的年限范围1970年~2038年 我们还可以使用DateTime来规避这个问题(这样与32位64位无关了) 复制代码 代码如下: <?php/** *  * 我的日历 * date_default_timezone_set date mktime * @param int $year * @param int $month * @param string $timezone * @author fc_lamp * @blog: fc-lamp.blog

jQuery EasyUI框架中的Datagrid数据表格组件结构详解

基础DOM结构 什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- da

Android自定义日历Calender代码实现

产品要做签到功能,签到功能要基于一个日历来进行,所以就根据 要求自定义了一个日历 自定义控件相信做android都知道: (1)首先创建一个类,继承一个容器类或者是一个控件 (2)然后就是你需要设置的属性等的,在attrs文件夹中 (3)然后就是在类里边进行属性的设置以及布局等等功能的添加 其实自定义一个日历问题都不多,很多人都会想到通过一个gridView然后填充就可以,确实是这样,主要是在显示每个月的第一天的位置以及每个月显示多少天有点绕. 思路:通过判断当前星期几然后进行日历的填充,但是填

Jquery Easyui搜索框组件SearchBox使用详解(19)

本文实例为大家分享了Jquery Easyui搜索框组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <input id="ss" class="easyui-searchbox" style="width:300px" data-options="prompt:'Please Input Value',menu:'#box'"> </input> <div id="b

jQuery web 组件 后台日历价格、库存设置的代码

/* * yagizaDate 1.0 * * Yagiza * Copyright 2016, MIT License * * IE 8+, Chrome, fireFox */ // * 字段说明 ******************** // buyNumMax 最多购买数 // buyNumMin 最少购买数 // cashback 返现 // price 售价.分销价.分销售价 // priceSettlement 结算价.采购价.分销结算价 // priceMarket 景区挂牌价

php Calender(日历)代码分享

代码如下: 复制代码 代码如下: <?php/** *  * 我的日历 * date_default_timezone_set date mktime * @param int $year * @param int $month * @param string $timezone * @author fc_lamp */function myCalender($year = '', $month = '', $timezone = 'Asia/Shanghai'){ date_default_t

js Calender控件使用详解

最近一直在赶项目.项目现在终于处于稳定的状态,只是修修改改.作为后台程序员的我真是苦逼啊,从web到手机端接口我都得写,杂七杂八的事情...这两天终于闲下来了,没事儿看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧... 首先一个常用的日期函数:Date(year,month,day) 复制代码 代码如下: var   date=new  Date(); 获取年份 复制代码 代码如下: var   year=

Jquery Easyui日历组件Calender使用详解(23)

本文实例为大家分享了Jquery Easyui日历组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 <div id="box" class="easyui-calendar" style="width:200px;height:200px;"></div> JS调用加载 <div id="box"></div> <script> $(function

一起学写js Calender日历控件

最近看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧,一起学习进步! 首先一个常用的日期函数: Date(year,month,day) var   date=new  Date(); 获取年份 var   year=this.date.getFullYear(); 获取月份,这里是月索引所以要+1 var   month=this.date.getMonth()+1; 获取当天是几号 var   day=t

ASP.NET中日历控件和JS版日历控件的使用方法(第5节)

今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

js前端日历控件(悬浮、拖拽、自由变形)

很少发现网上有简洁好用的自定义前端控件的贴子,最近项目中需要,自己YY开始写前端控件,在此给大家分享 控件是基于jQuery.UI的Widget写的,写起来就方便很多,使用起来跟普通jQuery控件一样$(#id).control(option),看着眼熟吧,下面就开始了. 首先说下控件的依赖包,加载控件的时候必须先加载jQuery, jQuqery.UI, 另外jquery-ui.css 这个包也需要引用,此包主要应用了jQuery拖拽和放缩的样式,控件样式方面大家自由发挥,给了个自己写的默认

原生js制作日历控件实例分享

本文实例为大家分享了js实现一个简单的日历控件,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>date</title> <style type="text/css"> *{ margin:0; padding:0;} a{ text-decoration:none

修改js Calendar日历控件 兼容IE9/谷歌/火狐

修改Calendar日历控件 兼容IE9,谷歌,火狐. 只是能用,出现的位置有所不同,希望有高手再帮我改改吧,谢谢 一. 复制代码 代码如下: this.iframe = window.frames("meizzCalendarIframe"); 修改为 复制代码 代码如下: this.iframe = window.frames["meizzCalendarIframe"]; 二. 复制代码 代码如下: var a = (arguments.length==0)

JS学习之一个简易的日历控件

这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo

JS 日历控件(蓝色)

超漂亮的JS日历控件 *{ font:12px; letter-spacing:0px; } body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px; } #titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; back

javascript实现日历控件(年月日关闭按钮)

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

纯javascript版日历控件

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

.net mvc页面UI之Jquery博客日历控件实现代码

一.效果图 二.页面文件 页面上需要添加<div id="cal"></div>标记. 三.JS代码 复制代码 代码如下: // JavaScript 日历 $(document).ready(function () { //当前时间 $now = new Date();                      //当前的时间 $nowYear = $now.getFullYear();          //当前的年 $nowMonth = $now.get