asp.net中的时间日期选择控件
现把自己在.net项目中经常使用的一款时间日期选择控件整理出来,希望对大家有所帮助!
首先大家来看看效果图:
(gif格式,用于选择图标)
js脚本:
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#e8e8ea";
var gcToggle = "#ffff00";
var gcBG = "#FFFFFF";
var gcBorder ="#000000"
var gcFont ="#000000"
var BgColor = "#FFFFFF";
var previousObject = null;
var targert;
var noOtherMonth = 1;
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var gCalMode = "";
var gCalDefDate = "";
var CAL_MODE_NOBLANK = "2";
function fSetDate(iYear, iMonth, iDay){
//VicPopCal.style.visibility = "hidden";
if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
gdCtrl.value = "";
}else{
iMonth = iMonth + 100 + "";
iMonth = iMonth.substring(1);
iDay = iDay + 100 + "";
iDay = iDay.substring(1);
gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
}
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
window.returnValue=gdCtrl.value;
target.value = gdCtrl.value;
window.close();
}
function HiddenDiv()
{
var i;
VicPopCal.style.visibility = "hidden";
for (i in goSelectTag)
goSelectTag[i].style.visibility = "visible";
goSelectTag.length = 0;
}
function fSetSelected(aCell){
var iOffset = 0;
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
aCell.bgColor = gcBG;
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
if (color==gcGray) {
if (noOtherMonth != 1) {
iOffset = (Victor<10)?-1:1;
iOffset = (iDay < 15 )?1:-1;
} else {
return 1;
}
}
iMonth += iOffset;
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
fSetDate(iYear, iMonth, iDay);
}
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
function fBuildCal(iYear, iMonth) {
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;
for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}
function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
var WeekDay = new Array("日","一","二","三","四","五","六");
var styleTD = " bgcolor='"+gcBG+"' bordercolor='"+gcBorder+"' valign='middle' align='center' height='20' style='font-size:12px; ";
var styleTD2 = "valign='middle' align='center' height='"+iCellHeight+"' style='font-size:12px; ";
with (document) {
write("<tr>");
for(i=0; i<7; i++)
write("<td "+styleTD+" color:#000000' >" + WeekDay[i] + "</td>");
write("</tr>");
for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTD2+"cursor:hand;' onMouseOver='this.bgColor=gcToggle' onMouseOut='this.bgColor=gcBG' onclick='fSetSelected(this)'>");
write("<font id=cellText ><b> </b></font>");
write("</td>")
}
write("</tr>");
}
}
}
function fUpdateCal(iYear, iMonth) {
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) {
Victor = i++;
if (myMonth[w+1][d]<0) {
color = gcGray;
if (noOtherMonth!=1) innerText = -myMonth[w+1][d];
else innerText = " ";
}else{
// Modified by maxiang for we need
// Saturday displayed in blue font color.
//color = ((d==0)||(d==6))?"red":"black";
if( d == 0 ){
color = "red";
}else if( d == 6 ){
color = "blue";
}else{
color = "black";
}
// End of above maxiang
innerText = myMonth[w+1][d];
}
}
}
function fSetYearMon(iYear, iMon){
tbSelMonth.options[iMon-1].selected = true;
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
fUpdateCal(iYear, iMon);
}
function fPrevMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
fSetYearMon(iYear, iMon);
}
function fNextMonth(){
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
fSetYearMon(iYear, iMon);
}
function fToggleTags(){
with (document.all.tags("SELECT")){
for (i=0; i<length; i++)
if ((item(i).Victor!="Won")&&fTagInBound(item(i))){
item(i).style.visibility = "hidden";
goSelectTag[goSelectTag.length] = item(i);
}
}
}
function fTagInBound(aTag){
with (VicPopCal.style){
var l = parseInt(left);
var t = parseInt(top);
var r = l+parseInt(width);
var b = t+parseInt(height);
var ptLT = fGetXY(aTag);
return !((ptLT.x>r)||(ptLT.x+aTag.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+aTag.offsetHeight<t));
}
}
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
// Main: popCtrl is the widget beyond which you want this calendar to appear;
// dateCtrl is the widget into which you want to put the selected date.
// i.e.: <input type="text" name="dc" style="text-align:center" readonly><INPUT type="button" value="V" onclick="fPopCalendar(dc,dc);return false">
function fPopCalendar(popCtrl, dateCtrl,Targetctrl,mode, defDate){
gCalMode = mode;
gCalDefDate = defDate;
target = Targetctrl;
if (popCtrl == previousObject){
if (VicPopCal.style.visibility == "visible"){
//HiddenDiv();
return true;
}
}
previousObject = popCtrl;
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
var point = fGetXY(popCtrl);
if( gCalMode == CAL_MODE_NOBLANK ){
document.all.CAL_B_BLANK.style.visibility = "hidden";
}else{
document.all.CAL_B_BLANK.style.visibility = "visible";
}
with (VicPopCal.style) {
left = point.x;
top = point.y+popCtrl.offsetHeight;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
fToggleTags(point);
visibility = 'visible';
}
}
var gMonths = new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
with (document) {
write("<Div id='VicPopCal' style='OVERFLOW:hidden;POSITION:absolute;VISIBILITY:hidden;border:0px ridge;width:100%;height:100%;top:0;left:0;z-index:100;overflow:hidden'>");
write("<table bgcolor='"+BgColor+"' BORDER=3 CELLSPACING=3 CELLPADDING=%3>");
write("<TR>");
write("<td valign='middle' align='center'><input type='button' name='PrevMonth' value='<' style='height:20;width:20;FONT:bold' onClick='fPrevMonth()'>");
write(" <SELECT name='tbSelYear' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for(i=1949;i<2020;i++)
write("<OPTION value='"+i+"'>"+i+"年</OPTION>");
write("</SELECT>");
write(" <select name='tbSelMonth' onChange='fUpdateCal(tbSelYear.value, tbSelMonth.value)' Victor='Won'>");
for (i=0; i<12; i++)
write("<option value='"+(i+1)+"'>"+gMonths[i]+"</option>");
write("</SELECT>");
write(" <input type='button' name='PrevMonth' value='>' style='height:20;width:20;FONT:bold' onclick='fNextMonth()'>");
write("</td>");
write("</TR><TR>");
write("<td align='center'>");
write("<DIV'><table width='100%' border='1' CELLSPACING=3 CELLPADDING=%3>");
fDrawCal(giYear, giMonth, 8, '12');
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align='center'>");
write("<TABLE width='100%'><TR><TD align='center'>");
write("<font ID=\"CAL_B_BLANK\" style='color:"+gcFont+"; visibility:visible; cursor:hand; font-size:12px' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=gcFont'></font>");
write("</td><td algin='center'>");
write("<font style='color:"+gcFont+";cursor:hand; font-size:12px' onclick='fSetDate(giYear,giMonth,giDay)' onMouseOver='this.style.color=gcToggle' onMouseOut='this.style.color=gcFont'> 当前日期: "+giYear+"/"+giMonth+"/"+giDay+"</font>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}
html文件:
<HTML>
<HEAD>
<title>日期选择</title>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD>
<BODY onload="fload()">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<SCRIPT src="calendar.js"></SCRIPT>
<SCRIPT>
function fload()
{
var a = window.dialogArguments;
fPopCalendar(document.all.txt1, document.all.txt1,a);
}
function fkeydown()
{
if(event.keyCode==27){
event.returnValue = null;
window.returnValue = null;
window.close();
}
}
document.onkeydown=fkeydown;
</SCRIPT>
<INPUT id="txt1" style="DISPLAY: none">
</BODY>
</HTML>
使用实例:
<script>
function PopCalendar(obj)
{
showx = event.screenX - event.offsetX - 4 - 10 ; // + deltaX;
showy = event.screenY - event.offsetY -168; // + deltaY;
newWINwidth = 210 + 4 + 18;
window.showModalDialog("calendar.htm",obj,"dialogWidth:206px; dialogHeight:230px; dialogLeft:"+showx+"px; dialogTop:"+showy+"px; status:no; directories:yes;scrollbars:no;Resizable=no; ");
}
</script>
<TR>
<TD align="left" colSpan="2"><FONT face="宋体">
<asp:label id="Label4" runat="server" Font-Size="12px">姓名:</asp:label>
<asp:textbox id="TxtName" runat="server"></asp:textbox>
<asp:label id="Label5" runat="server" Font-Size="12px">工作单位:</asp:label>
<asp:textbox id="TxtWorkCorp" runat="server"></asp:textbox>
<asp:label id="Label8" runat="server" Font-Size="12px">入住时间:</asp:label>
<asp:textbox id="StartTime" runat="server" Width="80" CssClass="textbox"></asp:textbox>
<INPUT id="CalendarStart" onclick="PopCalendar(StartTime);return false;" tabIndex="14" type="image" src="data:images/calendar.gif" align="absMiddle">
<asp:label id="Label1" runat="server" Font-Size="12px">至</asp:label>
<asp:textbox id="EndTime" tabIndex="15" runat="server" Width="80" CssClass="textbox"></asp:textbox>
<INPUT id="CalendarEnd" onclick="PopCalendar(EndTime);return false;" tabIndex="16" type="image" src="data:images/calendar.gif" align="absMiddle">
<asp:button id="BtnSearch" runat="server" Text="查询"></asp:button><FONT face="宋体"></FONT></FONT>
</TD>
</TR>
asp.net中的时间日期选择控件的更多相关文章
- ASP.NET(c#) 日期选择控件的另一种实现方法
这篇文章是在一个英文网站发现的,完全使用ASP.NET实现了日期选择的基本功能,没有使用js,原文链接http://geekswithblogs.net/plundberg/archive/2009/ ...
- 取消layUI中日期选择控件默认填充日期
input标签中使用日期选择控件填写,加载时默认填充当前日期, 标签设置了placeholder="请选择" autocomplete="off",但是并没有效 ...
- C# 中带有中国农历的日期选择控件
开源一款自己刚开始接触 C# 时开发的带有农历信息的日期选择控件,记得那时还是在2010年的寒假期间做的这个东西.刚开始接触 C# 时,使用WinForm来开发桌面程序,觉得简直是简单又迅速,由于 C ...
- 用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言 章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
- Swift - 日期选择控件(UIDatePicker)的用法
1,使用storyboard创建日期选择控件 首先我们将一个UIDatePicker控件和一个按钮直接添加到Main.Storyboard上.该按钮是为了点击时弹出提示框显示当前选择的日期和时间. 同 ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- ExtJS6.0扩展日期选择控件为也可以选择时间
PS:ExtJS自带的日期选择控件只能够选择日期,但是现在的需求需要精确到秒,所以在网上搜索了一些例子(大部分是4.0的)作为参考,然后改出了6.0可用的一个日期时间选择控件. 1.找到extjs6. ...
- jquery mobiscroll移动端日期选择控件(无乱码)
jquery mobiscroll移动端日期选择控件(无乱码) <pre><!DOCTYPE html><html lang="en">< ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
随机推荐
- 第1章 1.6计算机网络概述--OSI参考模型
ISO七层模式:国际标准组织对互联网通信规则进行的定义. 7.应用层:所有能产生网络流量的程序,如:QQ. 6.表示层:传输前对数据进行进行处理,是一种数据处理的规则,如:加密.压缩.传输二进制(图片 ...
- Atom飞行手册翻译
https://www.w3cschool.cn/atomflightmanualzhcn/
- 驼峰命名和下划线命名互转php实现
驼峰命名和下划线命名经常需要互转,下面提供两种php的实现方式.第一种方法效率相对差一些,实现方式如下: //驼峰命名转下划线命名 function toUnderScore($str) { $dst ...
- spring boot security 登出
<!DOCTYPE html> <html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" ...
- LCS 最长公共子序列
区别最长公共子串(连续) ''' LCS 最长公共子序列 ''' def LCS_len(x, y): m = len(x) n = len(y) dp = [[0] * (n + 1) for i ...
- linux下高并发网络应用注意事项
本文转自:http://www.blogjava.net/bacoo/archive/2012/06/11/380500.html linux下高并发网络应用注意事项 vi /etc/sysctl.c ...
- vertica单节点安装教程
[准备] 1.CentOS 7.6的镜像盘(下载地址:官网) 2.vertica-9.1.0-0.x86_64.RHEL6(下载地址:https://pan.baidu.com/s/1IjWBUTku ...
- javascript数组总结
数组是一个有序的集合,javascript数组中的元素的类型可以是任意的,同一个数组不同元素之间的类型也是可以不同的.数组也是对象,有个length属性,记录数组的长度. 创建数组有两种方法: 数组直 ...
- 基于Policy Gradient实现CartPole
http://chenrudan.github.io/blog/2016/09/04/cartpole.html 首页 分类 关于 归档 标签 基于Policy Gradient实现CartPole ...
- @Tranactional事务没有回滚
一.特性 先来了解一下@Transactional注解事务的特性吧,可以更好排查问题 1.service类标签(一般不建议在接口上)上添加@Transactional,可以将整个类纳入spring事务 ...