JS弹出日历控件，选择年、月、日
第一步:在HTML页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>日期控件</title>
<script language="javascript" type="text/javascript">
//选择日期，传入参数为需要存放日期的控件
function showDate(objName)
{
var o=eval(objName);
// if(o.type=='hidden'||o.style.display=='none') return
//if((o.disabled||o.getAttribute('readonly'))) return
o.style.backgroundColor='yellow';
var editurl;
var x=new Array(4);
editurl='editdate.htm';//日期
x[0]="选择日期";
x[1]=o.value;
x[2]=13;
x[3]='';
o.style.backgroundColor='yellow';
var r=window.showModalDialog(editurl,x,'dialogWidth:1;dialogHeight:1;status:no;help:no');
if(r!='undefined'&&o.value!=r) o.value=r;
o.style.backgroundColor='';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" Columns="40" MaxLength="20" ReadOnly="True" Width="169px" ></asp:TextBox>
<img src="datetime.gif" οnclick="showDate('document.forms[0].txtDate');" οnmοuseοver="this.style.cursor='hand'" alt="选择日期" title="选择日期" />
</div>
</form>
</body>
</html>
第二步:在增加一个单独的editdate.htm文件,文件内容为:
<!--
编辑日期型字段
-->
<html>
<head>
<meta http-equiv='content-language' content='zh-cn'>
<meta content='text/html;charset=gb2312' http-equiv="content-type">
<style>
body{margin:5;font-family:宋体;font-size:10pt;background-color:#95d5ff}
input.btn{height:20px;width:60px;cursor:hand;background-color:#95d5ff;border-color:#95d5ff}
td {font-size:10pt}
.date {background-color:white}
.date td{background-color:#95d5ff;border-color:#95d5ff;}
</style>
<script language="jscript">
var curday;
var tp;
//选择天数
window.dialogWidth="300px";
window.dialogHeight="220px";
window.dialogTop="180px";
window.dialogLeft="240px";
function fchooseday()
{
var o=event.srcElement;
for(i=0;i<tabd.rows.length;i++)
{for(j=0;j<tabd.rows(i).cells.length;j++) {tabd.rows(i).cells(j).style.backgroundColor='#95d5ff'}}
o.style.backgroundColor='yellow';curday=o.innerText;
}
//得到日期值
function fgetday()
{
var m=lM.value;
var d=curday.toString();
if (m.length==1) {m='0'+m}
if (d.length==1) {d='0'+d}
v=lY.value+'-'+m+'-'+d;
if(tp==131)
{
var h=lH.value;
var mi=lMI.value;
if (h.length==1) {h='0'+h}
if (mi.length==1) {mi='0'+mi}
v+=' '+h+':'+mi;
}
window.returnValue=v;
window.close();
}
//显示指定日期当月日历
function fdisplay(x)
{
var theDate=new Date(x);
if(isNaN(theDate)) {theDate=new Date()}
var y=theDate.getFullYear();m=theDate.getMonth()+1;d=theDate.getDate();
var theFDate=new Date(y,m-1,1);var theLDate=new Date(y,m,0);
var theFDay=theFDate.getDay();var theLDay=theLDate.getDate();
var start=false;
var theDay=1;
var r,c;
if(d>theLDay){d=theLDay}
for (i=tabd.rows.length-1;i>=1;i--){tabd.deleteRow(i)}
do
{
r=tabd.insertRow();
for (i=0;i<7;i++)
{
if(i==theFDay){start=true}
c=r.insertCell();
if((theDay<=theLDay)&&start)
{
c.style.cursor='hand';
c.οnclick=fchooseday;
c.οndblclick=fgetday;
c.innerText=theDay;
c.align='center';
if (theDay==d)
{c.style.backgroundColor='yellow'}
}
else
{
c.innerText=" "
}
if(start){theDay+=1;}
}
} while (theDay <= theLDay)
lY.value=y;lM.value=m;curday=d;
lH.value=theDate.getHours();lMI.value=theDate.getMinutes();
}
//初始化
function fload()
{
var x=window.dialogArguments;
lbl.innerText=x[0];
window.returnValue=x[1];
tp=x[2];
for(i=1900;i<2100;i++)
{lY.options[lY.options.length]=new Option(i,i)}
for (i=1;i<=12;i++)
{lM.options[lM.options.length]=new Option(i+'月',i)}
for(i=0;i<24;i++)
{if (i<10) {lH.options[lH.options.length]=new Option('0'+i,i)}
else {lH.options[lH.options.length]=new Option(i,i)}}
for(i=0;i<60;i++)
{if (i<10) {lMI.options[lMI.options.length]=new Option('0'+i,i)}
else {lMI.options[lMI.options.length]=new Option(i,i)}}
if (tp==13){lH.parentElement.parentElement.style.display='none'}
fdisplay(x[1].replace('-','/'));
}
</script>
</head>
<title>日期</title>
<body οnlοad="fload()">
<table border="0" width="282" height="100%" cellspacing="3" cellpadding="0" align="center">
<tr>
<td align="center" colspan="2"><span id="lbl" style='color:red'>aaa</span></td>
</tr>
<tr>
<td width="100%">
<table id="tabd" border="0" width="100%" height="100%" cellspacing="1" class="date">
<tr align="center">
<td>日</td>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
<td>六</td>
</tr>
</table>
</td>
<td>
<table border="0" height="100%" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" colspan="2">
<select style='width:62px' name="lY" οnchange="fdisplay(lY.value+'/'+lM.value+'/'+curday+' '+lH.value+':'+lMI.value)">
</select><br>
<select style='width:62px' name="lM" οnchange="fdisplay(lY.value+'/'+lM.value+'/'+curday+' '+lH.value+':'+lMI.value)">
</select>
</td>
</tr>
<tr>
<td>
时:<br>
分:
</td>
<td>
<select name="lH">
</select><br>
<select name="lMI">
</select>
</td>
</tr>
<tr>
<td valign="bottom" colspan="2">
<input type="button" value="确定" class="btn" οnclick='fgetday();window.close()'><br>
<input type="button" value="取消" class="btn" οnclick='window.close()'>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
JS弹出日历控件，选择年、月、日相关推荐
- Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了.不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由 ...
- 小程序日历控件分享 按月传值显示
最近正在写小程序的日历,百度了很多资料,发现没有一个是可以按月传值的日历表,就自己写了一个,分享给正在各种查找日历控件的童靴们: js: //日历显示 最关键方法:dateData: function ...
- 弹出层控件popup
var popup = new Popup(4); popup.contentHtml('<!--内容确认-->' +'<div class="qrxx txt14&quo ...
- 自定义弹出框控件制作及示例
控件 xaml <UserControl x:Name="userControl" x:Class="neihan8.Control.Toast"xmln ...
- 推荐一个超人气的类似MSN弹出的控件
推荐一个非常好的类似MSN的控件,使用效果如下: 在线演示 http://www.eeeksoft.net/files/popuptest 源文地址请参考: http://www.codeprojec ...
- 基于js的一个日历控件，点击按钮，弹出日历，显示日期到文本框
首先是一些js代码: <Script LANGUAGE="JavaScript"> var months = new Array("一", &quo ...
- Excel 2007中日历控件使用(文字)
在Excel中插入日历控件 1.在某一单元格中插入日历控件 (1)选中要插入日历控件的单元格,设置单元格格式为日期型: (2)点击工具栏,"插入-对象-日历控件", (3)用快捷方 ...
- 艺赛旗（RPA）selenium 利用 js 处理日历控件
艺赛旗 RPA8.0全新首发免费下载 点击下载 http://www.i-search.com.cn/index.html?from=line1 详细内容请参看艺赛旗官网支持栏目:RPA社区 点击链接 ...
- python时间控件readonly属性_Selenium2+python自动化----js处理日历控件（修改readonly属性）...
前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...
最新文章
- ajax 请求调用问题
- mysql下载哪一代版本好_潮一代更好的设计
- php软件开发--nodejs
- win10 Matlab2017a .m相关文件关联
- 《超越自卑的活法Live》内容整理
- 电视盒子做文件共享服务器,【当贝市场】智能电视盒子和PC电脑文件共享教程...
- python网络爬虫方向的第三方库_Python网络爬虫中常用第三方库总结
- 莫纳什大学计算机专业排名,澳大利亚大学计算机专业排名
- python 视频转场_OpenGL 实现视频编辑中的转场效果
- 修改谷歌浏览器账号密码自动填充功能的默认样式，elementUI
- String转化为date类型，从而获取星期几
- 零号培训平台课程-1、SQL注入基础
- java-php-python-ssm医生咨询系统计算机毕业设计
- 中国剩余定理扩展中国剩余定理
- 谷歌浏览器最新版本存放插件文件在电脑中位置路径
- Label smooth
- 使用 setTimeout 代替 setInterval
- RK3399 Android7.1关机后按电源键开机无反应
- ZBlog建站个人经验
- key存在则更新，不存在则插入