codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZDatePicker</title>
<script type="text/javascript">
(function () {
function DatePicker (oTarget) {
var
oTable = document.createElement("table"), nId = aInstances.length, oTH,
oHRow = document.createElement("tr"), oTHead = document.createElement("thead"),
oCapt = document.createElement("caption"), oDecrYear = document.createElement("div"),
oIncrYear = document.createElement("div"), oDecrMonth = document.createElement("div"),
oIncrMonth = document.createElement("div");
this.target = oTarget;
this.display = document.createElement("div");
this.current = new Date();
this.container = oTable;
this.display.className = "zdp-current-month";
this.id = nId;
oTable.className = "zdp-calendar";
oTable.id = "zdp-cal-" + nId;
oDecrYear.className = "zdp-decrease-year";
oDecrMonth.className = "zdp-decrease-month";
oIncrMonth.className = "zdp-increase-month";
oIncrYear.className = "zdp-increase-year";
oDecrYear.innerHTML = "\u00AB"; /* « */
oDecrMonth.innerHTML = "\u003C"; /* < */
oIncrMonth.innerHTML = "\u003E"; /* > */
oIncrYear.innerHTML = "\u00BB"; /* » */
oDecrYear.id = "zdp-decr-year-" + nId;
oDecrMonth.id = "zdp-decr-month-" + nId;
oIncrMonth.id = "zdp-incr-month-" + nId;
oIncrYear.id = "zdp-incr-year-" + nId;
oDecrYear.onclick = oIncrYear.onclick = oDecrMonth.onclick = oIncrMonth.onclick = onHeadClick;
for (var nThId = 0; nThId < 7; nThId++) {
oTH = document.createElement("th");
oTH.innerHTML = sDays[nThId];
oHRow.appendChild(oTH);
}
oTHead.appendChild(oHRow);
oCapt.appendChild(oDecrYear); oCapt.appendChild(oDecrMonth); oCapt.appendChild(oIncrYear); oCapt.appendChild(oIncrMonth);
oCapt.appendChild(this.display); this.container.appendChild(oCapt); this.container.appendChild(oTHead);
this.current.setDate(1);
this.writeDays();
oTarget.onclick = function () {
if (oTable.parentNode) {
oTable.parentNode.removeChild(oTable);
return;
}
oTable.style.zIndex = nZIndex++;
oTable.style.position = "absolute";
oTable.style.left = oTarget.offsetLeft + "px";
oTable.style.top = (oTarget.offsetTop + oTarget.offsetHeight) + "px";
oTarget.parentNode.insertBefore(oTable, oTarget);
};
aInstances.push(this);
}
DatePicker.prototype.writeDays = function () {
var oTD, oTR;
if (this.oTBody) { this.container.removeChild(this.oTBody); }
this.oTBody = document.createElement("tbody");
for (
var
nDay, oDay, nIter = 0, nEndBlanks = (this.current.getDay() + bZeroIsMonday * 6) % 7,
nEnd = aMonthLengths[this.current.getMonth()] + nEndBlanks, nTotal = nEnd + ((7 - nEnd % 7) % 7);
nIter < nTotal;
nIter++
) {
if (nIter % 7 === 0) {
oTR = document.createElement("tr");
this.oTBody.appendChild(oTR);
}
nDay = nIter - nEndBlanks + 1;
oTD = document.createElement("td");
if (nIter + 1 > nEndBlanks && nIter < nEnd) {
oDay = document.createElement("span");
oDay.className = "zdp-day-number";
oDay.id = "zdp-day-" + this.id;
oDay.innerHTML = nDay;
oDay.onclick = onDayClick;
oTD.appendChild(oDay);
}
oTR.appendChild(oTD);
}
this.display.innerHTML = sMonthsNames[this.current.getMonth()] + " " + this.current.getFullYear();
this.container.appendChild(this.oTBody);
};
function onDocClick (oPssEvt) {
var bOutside = true, oEvt = oPssEvt || /* IE */ window.event;
for (var oNode = oEvt.target || /* IE */ oEvt.srcElement; oNode; oNode = oNode.parentNode) {
if (oNode.className === "zdp-calendar" || oNode.className === "date-field") {
bOutside = false;
break;
}
}
if (bOutside) { return; }
aInstances[oNode.id.replace(/^\D+/, "")].container.style.zIndex = nZIndex++;
}
function onHeadClick () {
var bIsMonth = /\-month\-/.test(this.id), nDelta = /^zdp\-decr\-/.test(this.id) ? -1 : 1, oThisCal = aInstances[this.id.replace(/^\D+/, "")];
oThisCal.current[bIsMonth ? "setMonth" : "setYear"](oThisCal.current[bIsMonth ? "getMonth" : "getFullYear"]() + nDelta);
oThisCal.writeDays();
}
function onDayClick () {
var oThisCal = aInstances[this.id.replace(/^\D+/, "")];
oThisCal.target.value = (this.innerHTML / 100).toFixed(2).substr(-2) + "\/" + (oThisCal.current.getMonth() + 1) + "\/" + oThisCal.current.getFullYear();
oThisCal.container.parentNode.removeChild(oThisCal.container);
}
function buildCalendars () {
for (var aFields = document.getElementsByClassName("date-field"), nLen = aFields.length, nItem = 0; nItem < nLen; new DatePicker(aFields[nItem++]));
}
var
aInstances = [],
sMonthsNames = ["Gen", "Feb", "Mar", "Apr", "Mag", "Giu", "Lug", "Ago", "Set", "Ott", "Nov", "Dic"],
sDays = ["L", "M", "M", "G", "V", "S", "D"],
aMonthLengths = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
bZeroIsMonday = true,
nZIndex = 1000;
window.addEventListener ? addEventListener("load", buildCalendars, false) : window.attachEvent ? attachEvent("onload", buildCalendars) : (onload = buildCalendars);
document.addEventListener ? document.addEventListener("mousedown", onDocClick, false) : document.attachEvent ? document.attachEvent("onmousedown", onDocClick) : (document.onmousedown = onDocClick);
})();
</script>
<style type="text/css">
table.zdp-calendar {
border: 1px solid #000000;
border-collapse: collapse;
background-color: #ffff00;
cursor: default;
font-family: verdana;
font-size: 12px;
}
table.zdp-calendar caption {
background-color: #0000ff;
}
table.zdp-calendar th {
border: 1px solid #000000;
font-weight: bold;
background-color: green;
}
table.zdp-calendar td {
border: 1px solid #000000;
text-align: center;
}
div.zdp-current-month {
width: auto;
height: auto;
margin: 0 auto;
background-color: #aaaaaa;
}
div.zdp-decrease-month, div.zdp-decrease-year {
float: left;
margin-right: 4px;
}
div.zdp-increase-month, div.zdp-increase-year {
float: right;
margin-left: 4px;
}
div.zdp-increase-month, div.zdp-increase-year, div.zdp-decrease-month, div.zdp-decrease-year {
background-color: #0000ff;
cursor: pointer;
padding: 0 2px;
}
span.zdp-day-number {
color: #ff0000;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<p>Campo data: <input type="text" readonly class="date-field" name="campo1" /> Altro campo data: <input type="text" readonly class="date-field" name="campo2" /></p>
</body>
</html>
È semplice e intuitivo. Il CSS fa volutamente schifo ma è facilmente personalizzabile. 
Originariamente inviata da cavicchiandrea
L'ho provato sia con firefox e qualche volta in effetti da il problema segnalato (ritengo sia un problema di css allargando il calendario e definendo meglio le frecce si dovrebbe risolvere) che con safari che invece va benissimo anche adesso, se non ti va di provare a "sistemare" i css cercane un altro di calendari datepicker in rete si trova parecchio.
Permessi di invio
Rispondi quotando