📄 monthcalendar.htc
字号:
<!--
// Module Name: monthCalendar //////////////////////////////////
// Author: hzh ///////////////////////////////////////////////////
// Date: 2005-04-13 ///////////////////////////////////////////////////
// Version: 1.0 //////////////////////////////////////////////////////////
-->
<public:component name="monthCalendar" urn="monthCalendar" lightWeight=true>
<public:property name="left" put="putLeft"/>
<public:property name="top" put="putTop"/>
<public:property name="width" put="putWidth"/>
<public:property name="style" put="putStyle"/>
<public:property name="caption" put="putCaption"/>
<public:property name="value" put="putValue" get="getValue"/>
<public:property name="text" get="getText"/>
<public:property name="init" put="init"/>
<public:attach event="onmousedown" onevent="clickElement()"/>
<script language="JavaScript">
var objContainersDiv = null;
var objCaption = null;
var objBtnContainers = null;
var objCalendarListContainers = null;
var objCalendarListTable = null;
var objBtn = null;
var objYearOperationBtnContainersDiv = null;
var objYearAddBtn = null;
var objYearReduceBtn = null;
var objTodaySpan = null;
var objCurDateSpan = null;
var strCurSelectMonthBackColor = "";
var objRange = null;
var vLeft = 0;
var vTop = 0;
var vWidth = 83;
var vCaption = "";
var intStyle = 0;//0: yyyy-mm 1: yyyy年mm月
var vYear = "";//
var vMonth = "";
function init(){
objCaption = element.document.createElement("<span class='hzh_monthCalendar_caption'>");
objCaption = element.appendChild(objCaption);
objCaption.innerText = vCaption + " ";
objCaption.style.cursor = "default";
objContainersDiv = element.document.createElement("<input class='hzh_monthCalendar_containersDiv'>");
objContainersDiv = element.appendChild(objContainersDiv);
objContainersDiv.onkeydown = processInputkeydownEvent;
objContainersDiv.onmouseup = selectRange;
if( vYear == "" && vMonth == ""){
var objDate = new Date();
vYear = objDate.getYear();
vMonth = objDate.getMonth() + 1;
}
showYearAndMonth();
objBtnContainers = element.document.createElement("<div>");
objBtnContainers.innerHTML = "<v:group style='left:0;top:2px;position:absolute;width:16px; height:19px;z-index:3;' coordsize='15,18'><v:roundrect arcsize='0.1' style='width:14;height:14;' fillcolor='#B5CFFF' strokecolor='#ADC3F7'><v:fill type='gradientradial' color2='#DEE3FF' angle='75'/></v:roundrect><v:polyline style='position:absolute;top:6; left:4' points='-1,0 3,3 7,0' strokecolor='#4A6184' strokeweight='2px' filled='false'/><v:oval id=test style=\"width: 10; height: 10;left:2;top:2;\"><v:stroke weight=\"1px\" color=\"#4A6184\"/></v:oval><v:polyline style='position:absolute;top:6; left:4' points='0,-1 3,2 6,0' strokecolor='#0066FF' strokeweight='1px' filled='false'/></v:group>";
objBtnContainers = element.appendChild(objBtnContainers);
objBtn = objBtnContainers.firstChild;
objBtn.onclick = processBtnClickEvent;
objCalendarListContainers = element.document.createElement("<div class='hzh_monthCalendarList_containersDiv'>");
objCalendarListContainers = element.appendChild(objCalendarListContainers);
objCalendarListContainers.style.visibility = "hidden";
objCalendarListContainers.onselectstart = function (){event.returnValue = false;};
objCalendarListTable = element.document.createElement("<table style='position:absolute;left0;top:0;border-bottom:solid 1px #83A3C0' cellspacing='1' cellpadding='1' width='100%' bgcolor='#ffffff'>");
refresh();
var objTempTR,objTempTD;
for( var i = 1; i <= 2; i ++ ){
objTempTR = objCalendarListTable.insertRow();
for( var j = 1; j <= 6; j ++ ){
objTempTD = objTempTR.insertCell();
objTempTD.align = "center";
objTempTD.style.cursor = "hand";
objTempTD.onmouseover = processCellMouseoverEvent;
objTempTD.onmouseout = processCellMouseoutEvent;
objTempTD.style.width = ( objCalendarListContainers.offsetWidth / 6);
objTempTD.innerText = ( i == 1 ) ? j : j + 6 ;
if( vMonth == objTempTD.innerText){
objTempTD.style.background = "#3169C6";
objTempTD.style.color = "white";
}
objTempTD.onclick = processTdClickEvent;
}
}
objCalendarListTable = objCalendarListContainers.appendChild(objCalendarListTable);
objYearOperationBtnContainersDiv = element.document.createElement("<div style='position:absolute;left:0;height:17;top:36;border:solid 0px red;'>");
objYearOperationBtnContainersDiv.style.width = objCalendarListContainers.offsetWidth - 2;
objYearOperationBtnContainersDiv.innerHTML = "<v:group style='position:absolute;left:5;top:2;width:12px; height:12px;' coordsize='12 12'><v:oval style='width:12; height:12;' fillcolor='#009A00' style='position:absolute;' strokecolor='#7B9EBD'><v:fill type='gradientradial' color2='#84EB52' Opacity='0.99'/></v:oval><v:polyline points='4,0 4,4 0,2 4,0' fillcolor='#ffffff' style='position:absolute; top:4; left:3;' strokecolor='#ffffff'/></v:group><v:group style='position:absolute;left:95;top:2;width:12px; height:12px;' coordsize='12 12'><v:oval style='width:12; height:12;' fillcolor='#009A00' style='position:absolute;' strokecolor='#7B9EBD' ><v:fill type='gradientradial' color2='#84EB52' Opacity='0.99'/></v:oval><v:polyline points='0,0 0,4 4,2 0,0' fillcolor='#ffffff' style='position:absolute; top:4; left:4;' strokecolor='#ffffff'/></v:group>";
objYearReduceBtn = objYearOperationBtnContainersDiv.children(0);
objYearReduceBtn.onclick = processYearReduceBtnClickEvent;
objYearAddBtn = objYearOperationBtnContainersDiv.children(1);
objYearAddBtn.onclick = processYearAddBtnClickEvent;
objYearOperationBtnContainersDiv = objCalendarListContainers.appendChild(objYearOperationBtnContainersDiv);
objCurDateSpan = element.document.createElement("<span style='position:absolute;left:28;top:37;width:60;height:13;text-align:center;padding-top:1;color:#666666;cursor:default;'>");
objCurDateSpan.innerText = "2005-10";
objCurDateSpan = objCalendarListContainers.appendChild(objCurDateSpan);
objTodaySpan = element.document.createElement("<span style='position:absolute;left:0;top:18;width:113;height:13;border-top:solid 1px #83A3C0;text-align:center;padding-top:2;color:#666666;cursor:hand;'>");
objTodaySpan.innerText = "本月:" + new Date().getYear() + "年" + (new Date().getMonth() + 1) + "月";
objTodaySpan.year = new Date().getYear();
objTodaySpan.month = new Date().getMonth() + 1;
objTodaySpan.onclick = processTodaySpanClickEvent;
objTodaySpan = objYearOperationBtnContainersDiv.appendChild(objTodaySpan);
element.oncontextmenu = function(){event.returnValue = false;};
}
function processInputkeydownEvent(){
var objLocalRange = event.srcElement.createTextRange();
window.status = objLocalRange.text;
}
function processTodaySpanClickEvent(){
vYear = event.srcElement.year;
vMonth = event.srcElement.month;
showYearAndMonth();
objCalendarListContainers.style.visibility = "hidden";
}
function processYearReduceBtnClickEvent(){//年份递减
vYear = parseInt(vYear) - 1;
objCurDateSpan.innerText = vYear + "-" + vMonth;
showYearAndMonth();
}
function processYearAddBtnClickEvent(){//年份递增
vYear = parseInt(vYear) + 1;
objCurDateSpan.innerText = vYear + "-" + vMonth;
showYearAndMonth();
}
function processCellMouseoverEvent(){
var objSrcElement = event.srcElement;
if(objSrcElement.tagName.toLowerCase() == "td"){
if( objSrcElement.style.color != "white" ){
objSrcElement.style.color = "red";
}
objCurDateSpan.innerText = vYear + "-" + objSrcElement.innerText;
}
}
function processCellMouseoutEvent(){
var objSrcElement = event.srcElement;
if(objSrcElement.tagName.toLowerCase() == "td"){
if( objSrcElement.style.color != "white" ){
objSrcElement.style.color = "black";
}
}
}
function selectRange(){
objCalendarListContainers.style.visibility = "hidden";
objRange = element.document.selection.createRange();
objRange.expand("word");
switch(objRange.text.replace(/\s/g,"")){
case "年":
objRange.move("character",-2);
break;
case "月":
objRange.move("character",-1);
break;
default:
objRange.expand("word");
if(objRange.text == ""){
objRange.move("character",-2);
}
break;
}
objRange.expand("word");
objRange.select();
}
function clickElement(){
window.document.attachEvent("onmousedown",clickDocument);
}
function clickDocument(){
if(element.contains(event.srcElement)) return;
objCalendarListContainers.style.visibility = "hidden";
window.document.detachEvent("onmousedown",clickDocument);
}
function processTdClickEvent(){
var objSrcElement = event.srcElement;
if(objSrcElement.tagName.toLowerCase() == "td"){
vMonth = objSrcElement.innerText;
showYearAndMonth();
clearSelect();
with(objSrcElement.style){
background = "#3169C6";
color = "white";
}
}
objCalendarListContainers.style.visibility = "hidden";
}
function showYearAndMonth(){
if(objContainersDiv)
objContainersDiv.innerText = vYear + "年" + formatMonth(vMonth,false) + "月";
}
function formatMonth(argMonth,booleanHasZero){//返回格式化后的月份
return ( isNaN(parseInt(argMonth)) || (parseInt(argMonth) < 0 || parseInt(argMonth) > 12) ) ? ( booleanHasZero ? "01" : "1" ) : ( ( parseInt(argMonth) < 10 ) ? ( booleanHasZero ? ("0" + parseInt(argMonth)) : ( (argMonth.toString().indexOf("0") == -1) ? argMonth : argMonth.substr(1,1)) ) : argMonth );
}
function refresh(){
with(objContainersDiv.style){//
left = objCaption.offsetWidth;
width = vWidth;
height = 20;
}
with(element.runtimeStyle){
left = vLeft;
top = vTop;
width = parseInt(vWidth) + parseInt(objCaption.offsetWidth) + 2;
}
with(objBtn.style){//按钮
left = objCaption.offsetWidth + objContainersDiv.offsetWidth - 18;
}
with(objCalendarListContainers.style){
left = objContainersDiv.style.left;
width = 115;
top = objContainersDiv.offsetTop + 21;
}
}
function processBtnClickEvent(){
objCalendarListContainers.style.visibility = "visible";
var objTDList = objCalendarListContainers.all.tags("TD");
for( var i = 0; i < objTDList.length; i ++ ){
if( vMonth == objTDList[i].innerText ){
clearSelect();
objTDList[i].style.background = "#3169C6";
objTDList[i].style.color = "white";
}
}
//objCalendarListContainers.innerHTML = '<table cellspacing="1" cellpadding="1" width="100%" bgcolor="#ffffff"><tr bgcolor="#ffffff" align="center"><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td><td>06</td></tr><tr bgcolor="#ffffff" align="center"><td>07</td><td>08</td><td>09</td><td>10</td><td>11</td><td>12</td></tr></table>';
}
function clearSelect(){
var objTDList = objCalendarListContainers.all.tags("TD");
for( var i = 0; i < objTDList.length; i ++ ){
if( objTDList[i].style.color == "white" ){
objTDList[i].style.background = "white";
objTDList[i].style.color = "black";
break;
}
}
}
///////////////////////////////////////////////
function putLeft(argLeft){
vLeft = isNaN(parseInt(argLeft)) ? vLeft : argLeft;
}
function putTop(argTop){
vTop = isNaN(parseInt(argTop)) ? vTop : argTop;
}
function putWidth(argWidth){
vWidth = isNaN(parseInt(argWidth)) ? vWidth : argWidth;
}
function putCaption(argCaption){
vCaption = argCaption.toString().replace(/\s/g,"");
}
function putStyle(argStyle){
//intStyle = ( isNaN(parseInt(argStyle)) || parseInt(argStyle) > 1 ) ? 0 : parseInt(argStyle);
}
function putValue(argValue){// only apply the string with format "yyyy-mm" or "yyyy-m"
if( argValue != "" && argValue.match(/^([1-2]{1}[0-9]{3}-([1-9]{1}|1[0-2]{1}|0[1-9]{1}))*$/) != null ){
vYear = argValue.split("-")[0];
vMonth = argValue.split("-")[1];
showYearAndMonth();
}
}
function getValue(){
var strReturnVal = "";
switch(intStyle){
case 0:
strReturnVal = vYear + "-" + formatMonth(vMonth,true);
break;
//extend here......
}
return strReturnVal;
}
function getText(){
var strReturnVal = "";
switch(intStyle){
case 0:
strReturnVal = vYear + "年" + formatMonth(vMonth,false) + "月";
break;
//extend here......
}
return strReturnVal;
}
</script>
</public:component>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -