JS 日历控件(蓝色)

2024-12-14 16:21:09

超漂亮的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;
background-color:#A4B9D7;
color:#000;
cursor:default;
}
#weekNameBox{
width:282px;
border-bottom:0;
}
.weekName{
text-align:center;
padding-top:4px;
width:40px;
height:20px;
border:solid #E5E9F2;
border-width:0px 1px 1px 0px;
background-color:#C0D0E8;
color:#243F65;
cursor:default;
}
.controlButton{
font-family: Webdings;
font:9px;
text-align:center;
padding-top:2px;
width:40px;
height:20px;
border:solid #E5E9F2;
border-width:0px 1px 1px 0px;
background-color:#A4B9D7;
color:#243F65;
cursor:default;
}
.Ctable{
width:282px;
margin-bottom:20px;
}
.Ctable span{
font:9px verdana;
font-weight:bold;
color:#243F65;
text-align:center;
padding-top:4px;
width:40px;
height:26px;
border:solid #C0D0E8;
border-width:0px 1px 1px 0px;
cursor:default;
}
.Cdate{
background-color:#E5E9F2;
}
.Ctable span.OtherMonthDate{
color:#999;
background-color:#f6f6f6;
}
.selectBox{
cursor:hand;
font:9px verdana;
width:80px;
position:absolute;
border:1px solid #425E87;
overflow-y:scroll;
overflow-x:hidden;
background-color:#fff;
FILTER:progid:DXImageTransform.Microsoft.Shadow(Color=#999999,offX=10,offY=10,direction=120,Strength=5);
SCROLLBAR-FACE-COLOR: #E5E9F2;
SCROLLBAR-HIGHLIGHT-COLOR: #E5E9F2;
SCROLLBAR-SHADOW-COLOR: #A4B9D7;
SCROLLBAR-3DLIGHT-COLOR: #A4B9D7;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #eeeee6;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
.selectBox nobr{
padding:0px 0px 2px 5px;
width:100%;
color:#000;
letter-spacing:2px;
text-decoration:none;
}

// cody by [STAR].sjz 2003-10-31
// 说明：返回值为一个字符串
// 格式如下：
// 使用方法：
// var dataString = showModalDialog("calendar.htm", "dd日mm月yyyy年", "dialogWidth:286px;dialogHeight:221px;status:no;help:no;");
var userFormatString;
if(window.dialogArguments ==null)
{
userFormatString = "yyyy-mm--dd";
}
else
{
userFormatString = window.dialogArguments;
}
with(new Date()){
var Nyear = getYear();
var Nmonth = getMonth() +1;
var Ndate = getDate();
}
window.returnValue = new dataObj(Nyear,Nmonth,Ndate ).getDateString(userFormatString);
window.document.onclick = function(){
var obj = window.event.srcElement;
if(obj.tagName.toLowerCase() == "span" && obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
{
try{
window.currentActiveItem.runtimeStyle.cssText = "";
}
catch(e){ }
Nyear = obj.id.split("-")[0];
Nmonth = obj.id.split("-")[1];
Ndate = obj.id.split("-")[2];
window.currentActiveItem = obj;
window.currentSelectDate = window.currentActiveItem.id;
window.currentActiveItem.runtimeStyle.cssText = "background:url(/upload/2010-3/20100303234318708.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold";
}
}
function dataObj(year,month,date)
{
this.year = year
this.month = month
this.date = date
this.getDateString =
function(formatString)
{
return formatString.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date)
}
}
window.onload = function(){
window.document.attachEvent("onclick" , doCmd);
window.document.attachEvent("onmouseover" , buttonOver);
window.document.attachEvent("onmouseout" , buttonOut);
window.document.attachEvent("onmousedown" , buttonDown);
window.document.attachEvent("onmouseup" , buttonUp);
window.document.attachEvent("ondblclick" ,
function()
{
var obj = window.event.srcElement;
if(obj.tagName.toLowerCase() == "span" && obj.parentNode.className.replace(/Ctable/ig,"star") == "star" )
{
var mydate = new dataObj(obj.id.split("-")[0] , obj.id.split("-")[1] , obj.id.split("-")[2] );
window.returnValue = mydate.getDateString(userFormatString)
window.close();
}
}
);
document.all.titleYear.innerHTML=TranYearMonthTitle(Nyear,Nmonth);
document.all.weekNameBox.insertAdjacentHTML("afterBegin",makeWeekNameHtmlStr());
document.all.calendarBox.innerHTML=makeCalendarHtmlStr(Nyear,Nmonth);
window.currentSelectDate = starCaTran(Nyear,Nmonth,Ndate);
window.document.all.calendarBox.show = show;
window.currentActiveItem = window.document.getElementById(currentSelectDate);
if( window.currentActiveItem )
window.currentActiveItem.click();
window.document.all.calendarBox.show();
}
function starCalendar(year,month){
this.year = year;
this.month = month;
this.monthTable = function(){
var aMonth=new Array();
for(i=1;i"+weekName[i]+"";
return tmpStr;
}
function makeCalendarHtmlStr(year,month){
window.theCalendar = new starCalendar(year,month);
var theCaArr = theCalendar.monthTable();
var theDaysInMonth = new Date(year, month, 0).getDate();
var theCaHtml = "

";
for(var i=1;itheDaysInMonth)?"OtherMonthDate":"Cdate")+" id="+starCaTran(year,month,theCaArr[i][j])+">"+starCaTran(year,month,theCaArr[i][j]).split("-")[2]+"";
return theCaHtml+"

";
}
function starCaTran(year,month,date){
with(new Date(year,month-1,date))
return getYear() + "-" +(getMonth()+1) + "-" + getDate();
}
function TranYearMonthTitle(year,month){
with(new Date(year,month-1,1))
return "" + getYear() + "" + "年" + "" + (getMonth()+1) + "" + "月" ;
}
function showC(){
if(event.propertyName != "innerHTML")return;
window.theCalendar.year = new Number(document.all.titleYear.getElementsByTagName("span")[0].innerHTML);
window.theCalendar.month = new Number(document.all.titleYear.getElementsByTagName("span")[1].innerHTML);
window.document.all.calendarBox.innerHTML=makeCalendarHtmlStr(window.theCalendar.year,window.theCalendar.month);
window.document.all.calendarBox.show = show;window.document.all.calendarBox.show();
}
function showMore(starNum,endNum,selectedValue){
var obj = window.event.srcElement;
var selectedIndex = selectedValue - starNum;
if(obj.selectBox){
obj.selectBox.selectedIndex = selectedIndex;
return obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );
}
var selectBox = window.document.createElement("div");
selectBox.className = "selectBox";
selectBox.style.height = 0;
selectBox.style.top = window.event.clientY - window.event.offsetY + window.event.srcElement.offsetHeight;
selectBox.style.left = window.event.clientX - window.event.offsetX ;
selectBox.show = showBox;
selectBox.selectedIndex = selectedIndex;
selectBox.onclick = function(){
var selectedObj = window.event.srcElement;
if( "nobr" == selectedObj.tagName.toLowerCase() && selectBox.contains(selectedObj))
{
if(obj.innerHTML != selectedObj.innerHTML)obj.innerHTML = selectedObj.innerHTML;
}
}
selectBox.onlosecapture = alert
var iString = "";
for(var i=starNum;i"+i+"
"
}
selectBox.insertAdjacentHTML ("afterBegin",iString);
window.document.body.appendChild(selectBox);
obj.selectBox = selectBox;
obj.selectBox.show(document.all.calendarBox.offsetHeight + document.all.weekNameBox.offsetHeight );

}
function showBox(iHeight)
{
var box = this;
box.style.height =1;
box.style.display = "block";
window.clearInterval(box.timeHandle);
box.timeHandle = window.setInterval(interValHandle,1);
var s = 0,t =1 ;
function interValHandle()
{
box.scrollTop=1000000;
s = s + t*t;
t += 0.5;
box.style.height = parseInt(box.style.height) + Math.floor(s);
box.style.width = 65 / iHeight * box.offsetHeight;
if( box.offsetHeight > iHeight )
{
window.clearInterval(box.timeHandle);
box.style.height = iHeight;
box.scrollTop = box.childNodes[0].offsetHeight*box.selectedIndex;
box.getElementsByTagName("nobr")[box.selectedIndex].style.cssText='background-color:#00006C;color:#fff;';
window.document.attachEvent("onclick",
box.hide=function()
{
box.style.display = "none";
window.document.detachEvent("onclick",box.hide)
}
);
}
}
}

333444

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

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

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

运行结果如下: 复制代码代码如下: <script type="text/javascript" language="javascript">function choose_date_czw(date_id,objtd){if(date_id=="choose_date_czw_close"){ document.getElementByIdx_x_x("choose_date_czw_id").style
php+javascript的日历控件

复制代码代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT
一起学写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
修改js Calendar日历控件兼容IE9/谷歌/火狐

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

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

1.介绍 (1.在Calender中,所有可选择的符号会显示下划线,这是因为它们在浏览器都会呈现为链接. 如果让用户可以选择某天.月.周,必须设置SelectionMode属性(Day. DayWeek.DayWeekMonth) (2 控件事件当用户选择了某一天或者月,可以用OnSelectionChanged来触发通过 Calendar1.SelectedDate.ToShortDateString();来获取所选择的时间点通过 Calendar1.SelectedD

JS 日历控件(蓝色)

相关推荐

随机推荐