比较简单，可能还存在bug,不过兼容IE,firefox,opera.
<!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>
<title>日期控件</title>
<script type="text/javascript">
var DateComp=function(){
this.input_text=false;
this.contain_date=false;
this.contain_date_top=false;
this.contain_date_main=false;
var _this=this;
this.date=false;
var pub={
init:function(){
_this=this;
this.date=new Date();
this.input_text=document.createElement("input");
this.input_text.type="text";
this.input_text.onclick=function(){
_this.createDate();
}
this.style();
},
createDate:function(){
this.contain_date=document.createElement("div");
this.contain_date_top=document.createElement("div");
this.contain_date_main=document.createElement("div");
var obj=this.input_text;
with(this.contain_date.style){
position = "absolute";
var ttop=obj.offsetTop+obj.offsetHeight;
var tleft=obj.offsetLeft;
while(obj=obj.offsetParent){
ttop+=obj.offsetTop;
tleft+=obj.offsetLeft;
}
top=ttop;
left=tleft;
width="153px";
height="150px";
fontSize="8pt";
paddingTop="2px";
textAlign="center";
border="1px solid #66ccff";
}
with(this.contain_date_top.style){
width="100%";
height="25px";
background="#66ccff";
}
with(this.contain_date_main.style){
width="100%";
height="120px";
background="#ffffff";
}
this.year=document.createElement("select");
for(var i=this.date.getFullYear()-10;i<this.date.getFullYear()+10;i++)
{
this.year.options.add(new Option(i+"年",i));
}
this.year.value=this.date.getFullYear();
this.month=document.createElement("select");
for(var i=1;i<13;i++)
{
this.month.options.add(new Option(i+"月",i));
}
this.month.value=this.date.getMonth()+1;
this.year.onchange=function(){
_this.showDate(this.value,_this.month.value);
}
this.month.onchange=function(){
_this.showDate(_this.year.value,this.value);
}
this.contain_date.appendChild(this.contain_date_top);
this.contain_date_top.appendChild(this.year);
this.contain_date_top.appendChild(this.month);
this.contain_date.appendChild(this.contain_date_main);
document.body.appendChild(this.contain_date);
this.showDate(2009,9);
},
showDate:function(year,month){
this.contain_date_main.innerHTML="";
var arr=new Array("日","一","二","三","四","五","六");
var table=document.createElement("table");
var thead=document.createElement("thead");
var tbody=document.createElement("tbody");
var tr_thead=document.createElement("tr");
for(var j in arr){
var td=document.createElement("th");
td.innerHTML=arr[j];
tr_thead.appendChild(td);
}
for(var i=0;i<5;i++){
var tr_tbody=document.createElement("tr");
for(var j in arr){
var td=document.createElement("td");
td.onclick=function(){
_this.input_text.value=_this.year.value+"-"+((_this.month.value>=10)?(_this.month.value):("0"+_this.month.value))+"-"+((parseInt(this.innerHTML)>=10)?(this.innerHTML):("0"+this.innerHTML));
document.body.removeChild(_this.contain_date);
}
td.onmouseover=function(){
this.style.background="#ccffcc";
}
td.onmouseout=function(){
this.style.background="#ffffff";
}
tr_tbody.appendChild(td);
}
tbody.appendChild(tr_tbody);
}
thead.appendChild(tr_thead);
table.appendChild(thead);
table.appendChild(tbody);
table.border="0";
table.cellSpacing="0";
table.cellpadding="0";
table.bgcolor="gray";
with(table.style){
width="100%";
height="100%";
}
with(thead.style){
background="#ccffff";
}
var monthCount=new Date(year,month,0).getDate();
var i=1;
for(var j=1;j<monthCount+1;j++){
if(new Date(year,month-1,j).getDay()==6){
table.rows[i++].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
}else{
table.rows[i].cells[new Date(year,month-1,j).getDay()].innerHTML=j;
}
if(j==new Date().getDate()){
table.rows[i].cells[new Date(year,month-1,j).getDay()].style.background="#ccff00";
}
}
this.contain_date_main.appendChild(table);
},
style:function(){
with(this.input_text.style){
width="150px";
}
},
getComponent:function(){
return this.input_text;
}
};
pub.init();
return pub;
}
</script>
<script type="text/javascript">
window.onload=function(){
var date=new DateComp();
document.body.appendChild(date.getComponent());
}
</script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
JavaScript日期控件是一种在网页上实现用户交互式选择日期的前端技术，广泛应用于表单填写、日历功能、事件管理等各种场景。JavaScript作为浏览器端的主要脚本语言，提供了丰富的API来处理日期和时间，使得开发者...
"漂亮JavaScript弹出选择日期控件"就是这样一个实用工具，它能够提供美观且用户友好的日期选择界面。 首先，我们来看看"testdate.htm"这个文件，这通常是一个HTML页面，包含了日期控件的使用示例。在HTML中，我们...
在本场景中，我们讨论的是一个用JavaScript编写的日期控件，这是一款用于网页中的交互式组件，允许用户方便地选择日期。日期控件在网页表单中非常常见，比如用于填写生日、预约日期或设定截止日期等。 日期控件的...
6. **兼容性**：由于JavaScript在不同浏览器上的实现可能存在差异，一个优秀的日期控件需要确保在主流浏览器（如Chrome、Firefox、Safari、Edge和Internet Explorer）上都能正常工作。 7. **可配置性**：My97...
JavaScript日期控件因其轻量级、灵活性和易于集成的特点，在Web开发中被广泛使用。本篇将深入探讨JavaScript日期控件，包括其基本原理、使用方法以及如何与jQuery库结合，同时也将提及压缩包中的相关资源。 一、...
1. **内置Date对象**：JavaScript提供了一个内置的`Date`对象，可以用来处理日期和时间。通过创建`new Date()`实例，我们可以获取当前日期和时间，或者传入特定的日期时间字符串来初始化。`Date`对象提供了许多方法...
本篇将详细介绍如何使用JavaScript实现一个日期控件。 1. **HTML基础** 首先，我们需要在HTML页面中创建一个用于显示日期控件的容器。可以使用`<input>`标签，并设置`type="date"`，这样浏览器会自动提供一个基本...
总的来说，这个`javascript 日期控件`示例展示了如何利用HTML、CSS和JavaScript三者结合，实现一个具有视觉吸引力且功能完善的日期选择组件。它涉及到的主要知识点包括：JavaScript的`Date`对象，事件处理，DOM操作...
`My97DatePicker`是一个流行的JavaScript日期选择器，它提供了丰富的功能和自定义选项。然而，在Java环境中，我们通常会使用Java Swing或JavaFX来创建图形用户界面（GUI），这两个库都内置了日期选择控件。对于`My97...
日期控件在IT行业中是用户界面（UI）设计中的一个重要组成部分，主要用于用户输入或选择日期。自定义日期控件的创建通常涉及到前端开发，特别是JavaScript、CSS和HTML的结合使用，有时也会涉及到后端编程来处理用户...
在这个特定的案例中，我们关注的是一个名为“一个日期控件 javascript”的资源，它可能是一个自定义的JavaScript库或者组件，用于在网页上显示和操作日期。这个日期控件可能是为了帮助开发者更容易地处理日期输入、...
总的来说，这个"一个用javascript写的简单实用的日期控件"是利用JavaScript的动态特性、ASP的服务器端处理能力和可能的DOM操作，为ASP环境提供了一个用户友好的日期选择工具。这样的控件简化了用户的输入操作，提高...
选择日期控件(js封装类,javascript,选择日期,文本框选择日期,控件)
"兼容多种IE的javascript日期控件"这个主题就是针对这个问题的一个解决方案。它是一个经过改造的calendar日期控件，旨在确保在不同版本的Internet Explorer（如IE6、IE8、IE9）中能够正常运行，尽管在Google浏览器中...
用js实现的日期控件，只需要包含js即可，应用方便
总之，JavaScript日期时间控件是一个复杂但实用的Web组件，它利用JavaScript的日期功能结合用户交互设计，为用户提供了一种在网页中选择日期和时间的便捷方式。通过分析"datescript.js"，我们可以深入理解其背后的...
本项目提供了一个使用jQuery和JavaScript编写的自定义日期控件示例，适合学习和参考。下面将详细探讨jQuery、JavaScript以及日期控件的相关知识。 首先，jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM...
一款超强日期控件，可显示在浏览器最顶层，可以越出浏览器。可根据需要设置日期格式，此控件支持三种模式选择日期信息，通过配置ORG_SHOW_YEARMONTH_CLASS=0，1，2来控制选择界面……，光说光看不顶用，下了才知道好...
总的来说，JavaScript日期输入及选择控件是一个涉及前端开发多个层面的技术点，包括JavaScript基础、DOM操作、事件处理、样式设计以及用户体验优化等。通过学习和使用这些免费的资源，开发者可以为自己的项目添加...
例如，创建一个新日期实例可以这样写： ```javascript var currentDate = new Date(); ``` 二、jQuery与日期插件 为了创建用户友好的日期选择控件，我们可以利用jQuery的插件，如Bootstrap Datepicker或jQuery UI...