世界因你而進步: DataPicker 萬年曆

我們一般在網路上的應用程式中都會看到選取日期時出現萬年曆的視窗 , 各位想必應該都知道這大多數都是撰寫 javascript 所產生出來的萬年曆 , 有可能有些是 Flash 或者是使用 ActionScript 來達成 , 但不管使用什麼開發平台產生的萬年曆 , 只要是不靠 Server 處理都是得靠 javascript 來完成一個簡單的 javascript 萬年曆郤不是那麼容易 , 小弟看過很多的萬年曆都大同小易 , 有的寫的很雜不易調整有的寫的又不是那麼的好變化 , 今天介紹個簡單萬年曆 , 雖然這也是從別處來的 , 但我覺的它簡單易懂而且也很容易改變外觀...接下來我就來看一下吧!...

1. 下方為萬年曆 javascript (置於 head tag 中) :

<script language="javascript">

var datePickerDivID = "datepicker";

var iFrameDivID = "datepickeriframe";

var dayArrayShort = new Array('日', '一', '二', '三', '四', '五', '六');

var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');

var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday');

var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July',
'Aug', 'Sept', 'Oct', 'Nov', 'Dec');

//var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September', 'October', 'November', 'December');

var monthArrayLong = new Array('一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
'九月', '十月', '十一月', '十二月');

var defaultDateSeparator = "/"; // common values would be "/" or "."

var defaultDateFormat = "mdy" // valid values are "mdy", "dmy", and "ymd"

var dateSeparator = defaultDateSeparator;

var dateFormat = defaultDateFormat;

function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat,
dtSep)

{

var targetDateField = document.getElementsByName (dateFieldName).item(0);

if (!displayBelowThisObject || displayBelowThisObject=="")

displayBelowThisObject = targetDateField;

if (dtSep)

dateSeparator = dtSep;

else

dateSeparator = defaultDateSeparator;

if (dtFormat)

dateFormat = dtFormat;

else

dateFormat = defaultDateFormat;

var x = displayBelowThisObject.offsetLeft;

var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;

var parent = displayBelowThisObject;

while (parent.offsetParent) {

parent = parent.offsetParent;

x += parent.offsetLeft;

y += parent.offsetTop ;

}

drawDatePicker(targetDateField, x, y);

}

function drawDatePicker(targetDateField, x, y)

{

var dt = getFieldDate(targetDateField.value );

if (!document.getElementById(datePickerDivID)) {

var newNode = document.createElement("div");

newNode.setAttribute("id", datePickerDivID);

newNode.setAttribute("class", "dpDiv");

newNode.setAttribute("style", "visibility: hidden;");

document.body.appendChild(newNode);

}

var pickerDiv = document.getElementById(datePickerDivID);

pickerDiv.style.position = "absolute";

pickerDiv.style.left = x + "px";

pickerDiv.style.top = y + "px";

pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden"
: "visible");

pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" :
"block");

pickerDiv.style.zIndex = 10000;

refreshDatePicker(targetDateField.name, dt.getFullYear(), dt.getMonth(),
dt.getDate());

}

function refreshDatePicker(dateFieldName, year, month, day)

{

var thisDay = new Date();

if ((month >= 0) && (year > 0)) {

thisDay = new Date(year, month, 1);

} else {

day = thisDay.getDate();

thisDay.setDate(1);

}

var crlf = "\r\n";

var TABLE = "<table cols=7 class='dpTable'>" + crlf;

var xTABLE = "</table>" + crlf;

var TR = "<tr class='dpTR'>";

var TR_title = "<tr class='dpTitleTR'>";

var TR_days = "<tr class='dpDayTR'>";

var TR_todaybutton = "<tr class='dpTodayButtonTR'>";

var xTR = "</tr>" + crlf;

var TD = "<td class='dpTD' onMouseOut='this.className=\"dpTD\";' onMouseOver='this.className=\"dpTDHover\";'
"; // leave this tag open, because we'll be adding an onClick event

var TD_title = "<td colspan=5 class='dpTitleTD'>";

var TD_buttons = "<td class='dpButtonTD'>";

var TD_todaybutton = "<td colspan=7 class='dpTodayButtonTD'>";

var TD_days = "<td class='dpDayTD'>";

var TD_selected = "<td class='dpDayHighlightTD' onMouseOut='this.className=\"dpDayHighlightTD\";'
onMouseOver='this.className=\"dpTDHover\";' "; // leave this tag open, because
we'll be adding an onClick event

var xTD = "</td>" + crlf;

var DIV_title = "<div class='dpTitleText'>";

var DIV_selected = "<div class='dpDayHighlight'>";

var xDIV = "</div>";

var html = TABLE;

html += TR_title;

html += TD_buttons + getButtonCode(dateFieldName, thisDay, -1, "<") + xTD;

html += TD_title + DIV_title + thisDay.getFullYear() + " " + monthArrayLong[
thisDay.getMonth()] + xDIV + xTD;

html += TD_buttons + getButtonCode(dateFieldName, thisDay, 1, ">") + xTD;

html += xTR;

html += TR_days;

for(i = 0; i < dayArrayShort.length; i++)

html += TD_days + dayArrayShort[i] + xTD;

html += xTR;

html += TR;

for (i = 0; i < thisDay.getDay(); i++)

html += TD + " " + xTD;

do {

dayNum = thisDay.getDate();

TD_onclick = "onclick=\"updateDateField('" + dateFieldName + "', '" +
getDateString(thisDay) + "');\">";

if (dayNum == day)

html += TD_selected + TD_onclick + DIV_selected + dayNum + xDIV + xTD;

else

html += TD + TD_onclick + dayNum + xTD;

if (thisDay.getDay() == 6)

html += xTR + TR;

thisDay.setDate(thisDay.getDate() + 1);

} while (thisDay.getDate() > 1)

if (thisDay.getDay() > 0) {

for (i = 6; i > thisDay.getDay(); i--)

html += TD + " " + xTD;

}

html += xTR;

var today = new Date();

var todayString = "Today is " + dayArrayMed[today.getDay()] + ", " +
monthArrayMed[ today.getMonth()] + " " + today.getDate();

html += TR_todaybutton + TD_todaybutton;

html += "<button class='dpTodayButton' onClick='refreshDatePicker(\"" +
dateFieldName + "\");'>本月</button> ";

html += "<button class='dpTodayButton' onClick='updateDateField(\"" +
dateFieldName + "\");'>關閉</button>";

html += xTD + xTR;

html += xTABLE;

document.getElementById(datePickerDivID).innerHTML = html;

// document.write(html);

// adjustiFrame();

}

function getButtonCode(dateFieldName, dateVal, adjust, label)

{

var newMonth = (dateVal.getMonth () + adjust) % 12;

var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) /
12);

if (newMonth < 0) {

newMonth += 12;

newYear += -1;

}

return "<button class='dpButton' onClick='refreshDatePicker(\"" + dateFieldName
+ "\", " + newYear + ", " + newMonth + ");'>" + label + "</button>";

}

function getDateString(dateVal)

{

var dayString = "00" + dateVal.getDate();

var monthString = "00" + (dateVal.getMonth()+1);

dayString = dayString.substring(dayString.length - 2);

monthString = monthString.substring(monthString.length - 2);

switch (dateFormat) {

case "dmy" :

return dayString + dateSeparator + monthString + dateSeparator +
dateVal.getFullYear();

case "ymd" :

return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator +
dayString;

case "mdy" :

default :

return monthString + dateSeparator + dayString + dateSeparator +
dateVal.getFullYear();

}

}

function getFieldDate(dateString)

{

var dateVal;

var dArray;

var d, m, y;

try {

dArray = splitDateString(dateString);

if (dArray) {

switch (dateFormat) {

case "dmy" :

d = parseInt(dArray[0], 10);

m = parseInt(dArray[1], 10) - 1;

y = parseInt(dArray[2], 10);

break;

case "ymd" :

d = parseInt(dArray[2], 10);

m = parseInt(dArray[1], 10) - 1;

y = parseInt(dArray[0], 10);

break;

case "mdy" :

default :

d = parseInt(dArray[1], 10);

m = parseInt(dArray[0], 10) - 1;

y = parseInt(dArray[2], 10);

break;

}

dateVal = new Date(y, m, d);

} else if (dateString) {

dateVal = new Date(dateString);

} else {

dateVal = new Date();

}

} catch(e) {

dateVal = new Date();

}

return dateVal;

}

function splitDateString(dateString)

{

var dArray;

if (dateString.indexOf("/") >= 0)

dArray = dateString.split("/");

else if (dateString.indexOf(".") >= 0)

dArray = dateString.split(".");

else if (dateString.indexOf("-") >= 0)

dArray = dateString.split("-");

else if (dateString.indexOf("\\") >= 0)

dArray = dateString.split("\\");

else

dArray = false;

return dArray;

}

function updateDateField(dateFieldName, dateString)

{

var targetDateField = document.getElementsByName (dateFieldName).item(0);

if (dateString)

targetDateField.value = dateString;

var pickerDiv = document.getElementById(datePickerDivID);

pickerDiv.style.visibility = "hidden";

pickerDiv.style.display = "none";

//adjustiFrame();

targetDateField.focus();

if ((dateString) && (typeof(datePickerClosed) == "function"))

datePickerClosed(targetDateField);

}

function adjustiFrame(pickerDiv, iFrameDiv)

{

var is_opera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);

if (is_opera)

return;

try {

if (!document.getElementById(iFrameDivID)) {

var newNode = document.createElement("iFrame");

newNode.setAttribute("id", iFrameDivID);

newNode.setAttribute("src", "javascript:false;");

newNode.setAttribute("scrolling", "no");

newNode.setAttribute ("frameborder", "0");

document.body.appendChild(newNode);

}

if (!pickerDiv)

pickerDiv = document.getElementById(datePickerDivID);

if (!iFrameDiv)

iFrameDiv = document.getElementById(iFrameDivID);

try {

iFrameDiv.style.position = "absolute";

iFrameDiv.style.width = pickerDiv.offsetWidth;

iFrameDiv.style.height = pickerDiv.offsetHeight ;

iFrameDiv.style.top = pickerDiv.style.top;

iFrameDiv.style.left = pickerDiv.style.left;

iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;

iFrameDiv.style.visibility = pickerDiv.style.visibility ;

iFrameDiv.style.display = pickerDiv.style.display;

} catch(e) {

}

} catch (ee) {

}

}

</script>

2. 接下來是套用的外觀 css (置於 head tag 中) :

<style>

.dpDiv { }

.dpTable {

BORDER-RIGHT: #aaaaaa 1px solid; BORDER-TOP: #aaaaaa 1px solid; FONT-SIZE: 12px;
BORDER-LEFT: #aaaaaa 1px solid; COLOR: #505050; BORDER-BOTTOM: #aaaaaa 1px
solid; FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif; BACKGROUND-COLOR:
#ece9d8; TEXT-ALIGN: center

}

.dpTR {

}

.dpTitleTR {

}

.dpDayTR {

}

.dpTodayButtonTR {

}

.dpTD {

BORDER-RIGHT: #ece9d8 1px solid; BORDER-TOP: #ece9d8 1px solid; BORDER-LEFT:
#ece9d8 1px solid; BORDER-BOTTOM: #ece9d8 1px solid

}

.dpDayHighlightTD {

BORDER-RIGHT: #aaaaaa 1px solid; BORDER-TOP: #aaaaaa 1px solid; BORDER-LEFT:
#aaaaaa 1px solid; BORDER-BOTTOM: #aaaaaa 1px solid; BACKGROUND-COLOR: #cccccc

}

.dpTDHover {

BORDER-RIGHT: #888888 1px solid; BORDER-TOP: #888888 1px solid; BORDER-LEFT:
#888888 1px solid; CURSOR: pointer; COLOR: red; BORDER-BOTTOM: #888888 1px
solid; BACKGROUND-COLOR: #aca998

}

.dpTitleTD {

}

.dpButtonTD {

}

.dpTodayButtonTD {

}

.dpDayTD {

BORDER-RIGHT: #aaaaaa 1px solid; BORDER-TOP: #aaaaaa 1px solid; BORDER-LEFT:
#aaaaaa 1px solid; COLOR: white; BORDER-BOTTOM: #aaaaaa 1px solid;
BACKGROUND-COLOR: #cccccc

}

.dpTitleText {

FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: gray

}

.dpDayHighlight {

FONT-WEIGHT: bold

}

.dpButton {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 10px;
BACKGROUND: #d8e8ff; PADDING-BOTTOM: 0px; COLOR: gray; PADDING-TOP: 0px;
FONT-FAMILY: Verdana, Tahoma, Arial, Helvetica, sans-serif

}

.dpTodayButton {

FONT-WEIGHT: bold; FONT-SIZE: 10px; BACKGROUND: #d8e8ff; COLOR: gray;
FONT-FAMILY: Verdana, Tahoma, Arial, Helvetica, sans-serif

}

</style>

3. 有了 1,2 項之後就可以直接調用了 , UI準備的項目 (置於 body tag 中):

<input id="txtDatePicker" readonly size="10" name="txtDatePicker"><input
onclick="displayDatePicker('txtDatePicker','','ymd');" type="image"
src="datepicker.gif">

4. 完成

世界因你而進步

DataPicker 萬年曆

沒有留言:

熱門文章

gtm

標籤

關於我

總網頁瀏覽量