If you need to introduce external Js, you need to refresh to execute it
]
It’s a rush, so No consideration was given to compatibility.
It is implemented through two classes, one is the panel class and the other is the calendar class.
Since all public js are loaded once in the top-level window when I develop, I need to pass the current window object in when creating an object in the child window, for example: var panel = new parent.parent.SelectPanel(self); if If the self parameter is not passed, the default is the window where js is loaded.
The Gregorian calendar algorithm that marcian found online is a bit complicated, haha. I obtain the maximum number of days in the current month and the day of the week that the first day of the current month is directly through the Date function that comes with JS.
Copy code
The code is as follows:
// Get the maximum number of days in the month
//asfman Provide a simpler way: return (new Date(y, m 1, 0)).getDate()
function GetDates(year, month)
{
var date = new Date(year, month, 31);
return 31 - date.getDate() || 31;
}
// Get the day of the week that the first day of the month is
function GetFirstDay(year, month)
{
return (new Date(year, month, 1)).getDay();
}
/* The following part is not necessary, because even if new Date(2007, -1, 31) appears, Date will be automatically converted to Date(2006, 12, 31)
if(month < 0)
{
month = 11;
year--;
}
if(month == 12)
{
month = 0;
Year; <script>
onload = function()
{
var panel = new SelectPanel;
var rili = new Kalendar;
panel.Create();
rili.Create(panel);
panel.Apply(document.form1.a);
panel.Apply(document.form1.b);
}
</script> }*/<script>
/* 日历选择类
this.Width = 0; // 设置日历宽度，为零时不指定宽度。
this.Height = 0; // 设置日历高度，为零时不指定高度。
this.BorderColor = "#1095c6"; // 设置日历边框颜色。
this.BackColor = "white"; // 设置日历背景颜色。
this.CapBack = "#d9ebfe"; // 设置日历深色。
this.Tag = doc.createElement("table"); // 日历DOM节点。
this.Create = function(container) // 将日历绑定到指定对象。
*/
function Kalendar(win)
{
if(!win) win = self;
var doc = win.document;
var _Kalendar = this;
this.Width = 0;
this.Height = 0;
this.BorderColor = "#1095c6";
this.BackColor = "white";
this.CapBack = "#d9ebfe";
this.Tag = doc.createElement("table");
this.Tag.style.cursor = "default";
this.Create = function(container)
{
if(!container) container = doc.body;
this.Parent = container;
this.Tag.style.borderCollapse = "collapse";
this.Tag.border = 1;
this.Tag.borderColor = this.BorderColor;
this.Tag.width = this.Width ? this.Width : "";
this.Tag.height = this.Height ? this.Height : "";
this.Tag.rows[0].cells[0].bgColor = this.CapBack;
(container.Tag || container).appendChild(this.Tag);
BuildDateFace(new Date(sltNian.value, sltYue.value));
}
var today = new Date;
var tr = this.Tag.insertRow(); tr.insertCell();
var sltNian = doc.createElement("select");
sltNian.options.add(new Option(today.getFullYear() + "年", today.getFullYear()));
InitYearSelect();
function InitYearSelect()
{
while(sltNian.selectedIndex < 10)
sltNian.options.add(new Option(sltNian.options[0].value - 1 + "年", sltNian.options[0].value - 1), 0);
while(sltNian.options.length < sltNian.selectedIndex + 11)
sltNian.options.add(new Option(sltNian.lastChild.value - 0 + 1 + "年", sltNian.lastChild.value - 0 + 1));
}
var sltYue = sltNian.cloneNode();
for(var i = 0; i < 12;)
{
var opt = new Option(++i + "月", i-1);
sltYue.options.add(opt);
}
sltYue.onchange = function()
{
BuildDateFace(new Date(sltNian.value, sltYue.value));
}
sltNian.onchange = function()
{
sltYue.onchange();
InitYearSelect();
}
sltYue.value = today.getMonth();
sltNian.value = today.getFullYear();
tr.cells[0].appendChild(sltNian);
tr.cells[0].appendChild(sltYue);
tr.cells[0].colSpan = 7;
tr.cells[0].align = "center";
var tBody = this.Tag.tBodies[0];
tBody.insertRow();
for(var i = 0; i < 7; i++)
{
var td = tBody.rows[1].insertCell();
td.align = "center";
td.appendChild(doc.createTextNode("日一二三四五六".charAt(i)));
}
tBody.rows[1].cells[0].style.color = "red";
tBody.rows[1].cells[6].style.color = "green";
for(var i = 0; i < 6; i++)
{
var row = tBody.rows[1].cloneNode(true);
tBody.appendChild(row);
IRow.apply(row);
}
tBody.rows[7].deleteCell();
tBody.rows[7].cells[5].colSpan = 2;
tBody.rows[7].cells[5].lastChild.data = "清空";
tBody.rows[1].style.fontWeight = "bold";
function IRow()
{
for(var i = 0; i < this.cells.length; i++)
{
this.cells[i].onmouseover = function()
{
if(!IsToday(this.title)) this.bgColor = _Kalendar.CapBack;
}
this.cells[i].onmouseout = function()
{
if(!IsToday(this.title)) this.bgColor = "";
}
this.cells[i].onclick = function()
{
_Kalendar.Parent.Owner.value = this.title;
_Kalendar.Parent.Tag.style.display = "none";
}
}
}
function IsToday(date)
{
date = date.split("-");
var year = parseInt(date[0]);
var month = parseInt(date[1], 10) - 1;
date = parseInt(date[2], 10);
return today.getFullYear() == year &&
today.getMonth() == month &&
today.getDate() == date;
}
function BuildDateFace(date)
{
date.setDate(1);
var year = date.getFullYear();
var month = date.getMonth();
var offset = date.getDay();
var maxDate = GetDates(year, month);
for(var i = 0; i < maxDate; i++)
{
var td = _Kalendar.Tag.cells[i + 8 + offset];
td.lastChild.data = i + 1;
td.title = [year, (month < 9 ? "0" : "") + (month + 1), (i < 9 ? "0" : "") + (i + 1)].join("-");
td.bgColor = (IsToday(td.title)) ? _Kalendar.CapBack : "";
td.disabled = false;
}
for(var i = 8 + offset + maxDate; i < _Kalendar.Tag.cells.length - 1; i++)
{
var td = _Kalendar.Tag.cells[i];
td.title = "";
td.lastChild.data = i - 7 - offset - maxDate;
td.disabled = true;
}
lastMonth = GetDates(year, month - 1);
while(offset)
{
var td = _Kalendar.Tag.cells[8 + (--offset)];
td.title = "";
td.lastChild.data = lastMonth - date.getDay() + offset + 1;
td.disabled = true;
}
}
function GetDates(year, month)
{
if(month < 0)
{
month = 11;
year--;
}
if(month == 12)
{
month = 0;
year++;
}
var date = new Date(year, month, 31);
return 31 - date.getDate() || 31;
}
}
/* 选择面板类
this.Tag = doc.createElement("div"); // 面板HTML标签
this.Owner = null; // 面板对应的输入框。
this.Width = 0; // 宽度，为0时自适应
this.Height = 0; // 面板高度，为0时自适应
this.BorderColor = "#1095c6"; // 边框颜色
this.BgColor = "white"; // 面板背景颜色
this.Create(container) // 将面板创建到container内
this.Apply(target) // 将面板应用到目标控件。
*/
function SelectPanel(win)
{
if(!win) win = self;
var doc = win.document;
var _SelectPannel = this;
this.Owner = null;
this.Tag = doc.createElement("div");
this.Width = 0;
this.Height = 0;
this.BorderColor = "#1095c6";
this.BgColor = "white";
IMouseEvent.apply(this.Tag);
if(!win._PannelList) win._PannelList = [this];
else win._PannelList.push(this);
if(!doc.onmousedown) doc.onmousedown = function()
{
for(var i in win._PannelList)
{
if(!win._PannelList[i].AllowShow &&
win._PannelList[i].Tag.style.display != "none" &&
doc.activeElement.tagName != "SELECT")
win._PannelList[i].Tag.style.display = "none";
}
}
this.Create = function(container)
{
var style = this.Tag.style;
if(this.Width) style.width = this.Width;
if(this.Height) style.height = this.Height;
style.backgroundColor = this.BgColor;
style.border = "1px solid " + this.BorderColor;
style.position = "absolute";
style.left = "0px";
style.top = "0px";
style.overflow = "auto";
style.display = "none";
(container || doc.body).appendChild(this.Tag);
}
this.Apply = function(target)
{
target.onclick = function()
{
_SelectPannel.Owner = this;
IMouseEvent.apply(target);
var x = target.offsetLeft;
var y = target.offsetTop + target.offsetHeight + 1;
var sender = target;
while(sender.offsetParent)
{
sender = sender.offsetParent;
x += sender.offsetLeft;
y += sender.offsetTop;
}
_SelectPannel.Tag.style.left = x + "px";
_SelectPannel.Tag.style.top = y + "px";
_SelectPannel.Tag.style.display = "block";
}
}
function IMouseEvent()
{
this.onmouseenter = function()
{
_SelectPannel.AllowShow = true;
}
this.onmouseleave = function()
{
_SelectPannel.AllowShow = false;
}
}
}
</script>
