一瞬间-自定义一个漂亮的日期控件

因为项目,需要一个日期输入控件,目前没有看到有特别合适的,所以自己DIY了一个,比较匆忙,说是一瞬间搞定,可也搞了2个小时才搞定的.
虽然其中使用事件和代码不是很规范,但目前可以凑合能用啦!,放上代码,希望有兴趣的朋友能修改完善一下,也希望大家在此基础上有更好的思路.
做好以后,具体在页面上效果如下图:

1.控件输出效果

2.点击选择按钮时候的效果

3.可以直接选择月或者年

一.控件代码,继承自CompositeControl类,接口:IPostBackDataHandler(实现数据回调),INamingContainer

using System;

using System.ComponentModel;

using System.ComponentModel.Design;

using System.Collections.Generic;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.Design;

using System.Web.UI.Design.WebControls;

namespace MyControls

{

//描述设计时

[Designer(typeof(EasyCalenderControlDesigners))]

public class EasyCalender : CompositeControl, IPostBackDataHandler, INamingContainer

{

TextBox tb;

System.Web.UI.HtmlControls.HtmlInputButton lb;

RequiredFieldValidator rfv;

RegularExpressionValidator rev;

string _ErrorMsg;

public EasyCalender()

{

//设置默认错误信息

_ErrorMsg = "日期必须输入!";

}

/**//// <summary>

/// 错误信息

/// </summary>

public string ErrorMsg

{

get

{ return _ErrorMsg; }

set

{ _ErrorMsg = value; }

}

/**//// <summary>

/// 控件选择日期

/// </summary>

public string GetSelectedDate

{

get

{

EnsureChildControls();

if (ViewState[this.ClientID] != null)

return (string)ViewState[this.ClientID];

else

if (tb != null)

return tb.Text;

else

return string.Empty;

}

set

{

EnsureChildControls();

if (tb == null)

tb = new TextBox();

tb.Text = value;

}

/**//// <summary>

/// 是否启用必须输入验证控件

/// </summary>

public bool EnableRequiredFieldValidator

{

get

{

EnsureChildControls();

if (rfv == null)

{

rfv = new RequiredFieldValidator();

}

return rfv.Enabled;

}

set

{

EnsureChildControls();

if (rfv == null)

{

rfv = new RequiredFieldValidator();

}

rfv.Enabled = value;

}

protected override void OnLoad(EventArgs e)

{

base.OnLoad(e);

//注册脚本

RegisterJavaScript();

//初始化输入控件

if (tb == null)

tb = new TextBox();

if (ViewState[this.ClientID] != null)

tb.Text = ViewState[this.ClientID].ToString();

this.Controls.Add(tb);

//初始化Html button 选择按钮

lb = new System.Web.UI.HtmlControls.HtmlInputButton("button");

lb.Value = "选择";

lb.Attributes.Add("onclick", "showCalender(this,'" + tb.ClientID + "')");

this.Controls.Add(lb);

//初始化必须输入控件

if (rfv == null)

rfv = new RequiredFieldValidator();

rfv.ControlToValidate = tb.ID;

rfv.ErrorMessage = _ErrorMsg;

if (rfv.Enabled)

this.Controls.Add(new LiteralControl("<font color='red'>*</font>"));

this.Controls.Add(rfv);

//初始化日期格式验证控件

if (rev == null)

rev = new RegularExpressionValidator();

rev.ControlToValidate = tb.ID;

rev.ErrorMessage = "请按日期格式输入!";

rev.ToolTip = "请按格式输入!";

rev.ValidationExpression = @"^(\d{4})-((1[0-2])|(0?[1-9]))-((3[0-1])|([1-2][0-9])|(0?[1-9]))$";

this.Controls.Add(rev);

}

/**//// <summary>

/// 注册JavaScript 脚本

/// </summary>

private void RegisterJavaScript()

{

string ScriptString = @"

var allMonth=[31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

var allNameOfWeekDays=[""一"",""二"", ""三"", ""四"", ""五"", ""六"", ""七""];

var allNameOfMonths=[""一月"",""二月"",""三月"",""四月"",""五月"",""六月"",""七月"",""八月"",""九月"",""十月"",""十一月"",""十二月""];

var newDate=new Date();

var yearZero=newDate.getFullYear();

var monthZero=newDate.getMonth();

var day=newDate.getDate();

var currentDay=0, currentDayZero=0;

var month=monthZero, year=yearZero;

var yearMin=2000, yearMax=2010;

var target='';

var hoverEle=false;

function setTarget(e){

if(e) return e.target;

if(event) return event.srcElement;

}

function newElement(type, attrs, content, toNode) {

var ele=document.createElement(type);

if(attrs) {

for(var i=0; i<attrs.length; i++) {

eval('ele.'+attrs[i][0]+(attrs[i][2] ? '=\u0027' :'=')+attrs[i][1]+(attrs[i][2] ? '\u0027' :''));

}

if(content) ele.appendChild(document.createTextNode(content));

if(toNode) toNode.appendChild(ele);

return ele;

}

function setMonth(ele){month=parseInt(ele.value);calender()}

function setYear(ele){year=parseInt(ele.value);calender()}

function setValue(ele) {

if(ele.parentNode.className=='week' && ele.firstChild){

var dayOut=ele.firstChild.nodeValue;

if(dayOut < 10) dayOut='0'+dayOut;

var monthOut=month+1;

if(monthOut < 10) monthOut='0'+monthOut;

//target.value=dayOut+'.'+monthOut+'.'+year;

target.value=year+'-'+monthOut+'-'+dayOut;

removeCalender();

}

function removeCalender() {

var parentEle=document.getElementById(""calender"");

while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);

document.getElementById('basis').parentNode.removeChild(document.getElementById('basis'));

}

function calender() {

var parentEle=document.getElementById(""calender"");

parentEle.οnmοuseοver=function(e) {

var ele=setTarget(e);

if(ele.parentNode.className=='week' && ele.firstChild && ele!=hoverEle) {

if(hoverEle) hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');

hoverEle=ele;

ele.className='hoverEle '+ele.className;

} else {

if(hoverEle) {

hoverEle.className=hoverEle.className.replace(/hoverEle ?/,'');

hoverEle=false;

}

while(parentEle.firstChild) parentEle.removeChild(parentEle.firstChild);

function check(){

if(year%4==0&&(year%100!=0||year%400==0))allMonth[1]=29;

else allMonth[1]=28;

}

function addClass (name) { if(!currentClass){currentClass=name} else {currentClass+=' '+name} };

if(month < 0){month+=12; year-=1}

if(month > 11){month-=12; year+=1}

if(year==yearMax-1) yearMax+=1;

if(year==yearMin) yearMin-=1;

check();

var control=newElement('p',[['id','control',1]],false,parentEle);

var controlPlus=newElement('a', [['href','javascript:month--;calender()',1],['className','controlPlus',1]], '<', control);

var select=newElement('select', [['onchange',function(){setMonth(this)}]], false, control);

for(var i=0; i<allNameOfMonths.length; i++) newElement('option', [['value',i,1]], allNameOfMonths[i], select);

select.selectedIndex=month;

select=newElement('select', [['onchange',function(){setYear(this)}]], false, control);

for(var i=yearMin; i<yearMax; i++) newElement('option', [['value',i,1]], i, select);

select.selectedIndex=year-yearMin;

controlPlus=newElement('a', [['href','javascript:month++;calender()',1],['className','controlPlus',1]], '>', control);

check();

currentDay=1-new Date(year,month,1).getDay();

if(currentDay > 0) currentDay-=7;

currentDayZero=currentDay;

var newMonth=newElement('table',[['cellSpacing',0,1],['onclick',function(e){setValue(setTarget(e))}]], false, parentEle);

var newMonthBody=newElement('tbody', false, false, newMonth);

var tr=newElement('tr', [['className','head',1]], false, newMonthBody);

tr=newElement('tr', [['className','weekdays',1]], false, newMonthBody);

for(i=0;i<7;i++) td=newElement('td', false, allNameOfWeekDays[i], tr);

tr=newElement('tr', [['className','week',1]], false, newMonthBody);

for(i=0; i<allMonth[month]-currentDayZero; i++){

var currentClass=false;

currentDay++;

if(currentDay==day && month==monthZero && year==yearZero) addClass ('today');

if(currentDay <= 0 ) {

if(currentDayZero!=-7) td=newElement('td', false, false, tr);

}

else {

if((currentDay-currentDayZero)%7==0) addClass ('holiday');

td=newElement('td', (!currentClass ? false : [['className',currentClass,1]] ), currentDay, tr);

if((currentDay-currentDayZero)%7==0) tr=newElement('tr', [['className','week',1]], false, newMonthBody);

}

if(i==allMonth[month]-currentDayZero-1){

i++;

while(i%7!=0){i++;td=newElement('td', false, false, tr)};

}

function showCalender(ele,tbele) {

if(document.getElementById('basis')) { removeCalender() }

else {

//target=document.getElementById(ele.id.replace(/for_/,''));

target=document.getElementById(tbele);

var basis=ele.parentNode.insertBefore(document.createElement('div'),ele);

basis.id='basis';

newElement('div', [['id','calender',1]], false, basis);

calender();

}

</script>

//注册到页面

ClientScriptManager csManager = this.Page.ClientScript;

csManager.RegisterClientScriptBlock(this.Page.GetType(), this.ClientID, ScriptString);

}

IPostBackDataHandler 成员#region IPostBackDataHandler 成员

public bool LoadPostData(string postDataKey, System.Collections.Specialized.NameValueCollection postCollection)

{

string ss = postCollection[postDataKey];

if (ViewState[this.ClientID] != null)

ViewState[this.ClientID] = ss;

else

{

ViewState.Add(this.ClientID, ss);

}

tb.Text = ss;

return true;

//throw new Exception("The method or operation is not implemented.");

}

public void RaisePostDataChangedEvent()

{

//throw new Exception("The method or operation is not implemented.");

}

#endregion

}

二.自定义设计时
为了拖到控件设计器的时候,能大概预览控件外观,所以继承复合控件设计器,使用html 方式描述一个样子出来!代码如下:

using System;

using System.ComponentModel;

using System.ComponentModel.Design;

using System.Drawing;

using System.Web.UI;

using System.Web.UI.Design;

using System.Web.UI.Design.WebControls;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

namespace MyVoiceWeb.EasyCalender

{

/**//// <summary>

/// 简单日期控件设计时

/// </summary>

public class EasyCalenderControlDesigners : CompositeControlDesigner

{

public override string GetDesignTimeHtml()

{

return "<input type='input' value=''><input type='button' value='选择'>";

//return base.GetDesignTimeHtml();

}

三.CSS 样式
因为偷懒的缘故,CSS 我直接保存成文件了,没有按控件方式输出,代码贴出来:

#basis {

}{

display:inline;

position:relative;

}

#calender {

}{

position:absolute;

top:30px;

left:0;

width:220px;

background-color:#fff;

border:3px solid #ccc;

padding:10px;

z-index:10;

}

#control {

}{

text-align:center;

margin:0 0 5px 0;

}

#control select {

}{

font-family:""Lucida sans unicode"", sans-serif;

font-size:11px;

margin:0 5px;

vertical-align:middle;

}

#calender .controlPlus {

}{

padding:0 5px;

text-decoration:none;

color:#333;

}

#calender table {

}{

empty-cells: show;

width:100%;

font-size:11px;

table-layout:fixed;

}

#calender .weekdays td{

}{

text-align:right;

padding:1px 5px 1px 1px;

color:#333;

}

#calender .week td {

}{

text-align:right;

cursor:pointer;

border:1px solid #fff;

padding:1px 4px 1px 0;

}

#calender .week .today {

}{

background-color:#ccf;

border-color:#ccf;

}

#calender .week .holiday {

}{

font-weight: bold;

}

#calender .week .hoverEle {

}{

border-color:#666;

background-color:#99f;

color:#000;

}

四.使用
如果是在Visual Studio 2005中编写的,编译以后,引入包含此代码的项目,就可以直接在工具中找到这个控件 "EasyCalender".
直接拖到设计器中就可以使用了,非常方便哦!

^_^

转载于:https://www.cnblogs.com/SUNBOY/archive/2007/04/24/725686.html

一瞬间-自定义一个漂亮的日期控件相关推荐

(1) 漂亮的日期控件
1 前言这是一款漂亮,易用的js日期控件 , 可以自定义时间格式 , 定义最大时间,最小时间 , 可以选择年月日,时分秒点击下载地址 ,下载js文件 2 使用方法 2.1 将文件下载下来, ...
Datepicker日期控件“今天”按钮点击没反应
今天在测试过程中,遇到一个问题: 日期控件中的"今天"点击后没反应: 看js代码也设置了"todayBtn:true" 后来看到一篇博客(点击查看原文)上讲,原 ...
WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
原文:WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐 ...
自定义view学习-手把手教你制作一个可扩展日历控件
来看看效果图先,手把手教你实现一个简易,但高扩展度的日历控件,可自由扩展成签到,单选,多选日期. 首先我们来分析实现思路.对于上图的效果,很明显是一个6x7的表格. 我们可以两个for循环控制绘制每个 ...
asp.net的一个不错日期控件
/* asp.net日期控件使用说明: 以下部分在中 <SCRIPT src="res/JS.js"></SCRIPT> <SCRIPT langua ...
html日期横向拖动选择控件,一个简单横向javascript日期控件
具体要求就是: 1.日期表格横向占满页面. 2.每个月的日期列表横向显示在一排,而不是像网上的很多日期控件显示一个方块. 3.要求只有年月日可选,选择年或月后自动更新对应日期(这个每个日期控件都有的) ...
winform 日期控件放在工具条（先放一个label 占好位置）上。工具条和其他控件都要求有鼠标的精准。...
注意两点: 1. 要先放一个label 占好位置 2.鼠标动作要到位,才能放置好. 怎么检查是否放置好了. 最大化,最小化一下就知道了. 工具条的使用.最好是从左向右排列,全部都是左对齐的,日期控件放 ...
使用pyqt5的日期控件做一个小日历方便查看
日历的制作比较简单,因为pyqt5已经自带了相关的日期控件,只需要明白如何调用再加上比较个性化的功能,这个日历的小控件就制作完成了. [阅读全文] 日历实现代码量不多,需要可直接执行的源码在文末获取下 ...
安卓自定义日期控件(仿QQ,IOS7)
还记得上篇:高大上的安卓日期时间选择器,本篇是根据上篇修改而来,先看下qq中日期选择的效果: 鉴于目前还没有相似的开源日期控件,因此本人花费了一些时间修改了下之前的日期控件,效果如图: 虽说相似度不是 ...

一瞬间-自定义一个漂亮的日期控件

一瞬间-自定义一个漂亮的日期控件相关推荐

最新文章

热门文章