?? parddudatetimepicker.js
字號(hào):
?/**
* 名稱:js日歷控件
* 版本:1.0
* 作者:Parddu
*/
//控件的全局變量
var parddu_disId = false; //用于顯示結(jié)果的控件id
var parddu_disFormat = "yyyy-MM-dd hh:mm:ss"; //用于顯示結(jié)果的格式
var parddu_timeDiv = false; //用于顯示控件的層
var parddu_timeTable = false; //用于實(shí)現(xiàn)控件的表格
var parddu_nowTime = false; //顯示當(dāng)前日期
var parddu_year_txt = false; //年份控件
var parddu_month_txt = false; //月份控件
var parddu_hour_txt = false; //小時(shí)控件
var parddu_minute_txt = false; //分鐘控件
var parddu_second_txt = false; //秒鐘控件
var parddu_year_change_div = false; //顯示選擇年的層
var parddu_year_change_sel = false; //選擇年的列表框
/**
* 日歷控件調(diào)用函數(shù)
* txtId為現(xiàn)實(shí)結(jié)果的控件id
* format為現(xiàn)實(shí)結(jié)果的格式
* yyyy 代表年份
* MM 代表月
* dd 代表日
* hh 代表小時(shí)
* mm 代表分鐘
* ss 代表秒鐘
*/
function PardduDateTimePicker(txtId,format){
parddu_disId = txtId;
if(format!=null && format!=""){
parddu_disFormat = format;
}
if(!parddu_timeDiv){
createparddu_timeDiv();
}
parddu_timeDiv.style.top = event.y;
parddu_timeDiv.style.left = event.x;
parddu_timeDiv.style.display="block";
setNowTime();
appendDay();
}
//生成日歷控件,生成布局
function createparddu_timeDiv(){
//創(chuàng)建層
parddu_timeDiv = document.createElement("div");
parddu_timeDiv.style.borderWidth = "1px";
parddu_timeDiv.style.borderStyle = "solid";
parddu_timeDiv.style.borderColor = "#993366";
parddu_timeDiv.style.position="absolute";
document.body.appendChild(parddu_timeDiv);
//創(chuàng)建table
parddu_timeTable = document.createElement("table");
parddu_timeTable.style.fontSize="12px";
parddu_timeTable.cellPadding="3px";
parddu_timeTable.style.borderWidth="0px"
parddu_timeTable.style.backgroundColor="#ffffff";
parddu_timeTable.width="240";
parddu_timeTable.cellSpacing="0";
//創(chuàng)建控制行,表格的第一行
var conRow = parddu_timeTable.insertRow();
conRow.align="center";
//表格的第一行,第二列
var crTdTwo = conRow.insertCell();
crTdTwo.style.backgroundColor="#cccccc";
crTdTwo.colSpan="7";
//年減少
parddu_year_butsub = document.createElement("input");
parddu_year_butsub.type="button";
parddu_year_butsub.value="<<";
parddu_year_butsub.title="減少一年";
parddu_year_butsub.style.height="17px";
parddu_year_butsub.style.cursor="hand";
setButtonStyleOne(parddu_year_butsub);
parddu_year_butsub.onmouseout=mouseOutBut;
parddu_year_butsub.onmouseover=mouseOverBut;
parddu_year_butsub.onclick=changeYearSub;
crTdTwo.appendChild(parddu_year_butsub);
var temp_str_one = document.createElement("label");
temp_str_one.innerText=" ";
crTdTwo.appendChild(temp_str_one);
//月減少
parddu_month_butsub = document.createElement("input");
parddu_month_butsub.type="button";
parddu_month_butsub.value="<";
parddu_month_butsub.title="減少一月";
parddu_month_butsub.style.height="17px";
parddu_month_butsub.style.cursor="hand";
setButtonStyleOne(parddu_month_butsub);
parddu_month_butsub.onmouseout=mouseOutBut;
parddu_month_butsub.onmouseover=mouseOverBut;
parddu_month_butsub.onclick=changeMonthSub;
crTdTwo.appendChild(parddu_month_butsub);
var temp_str_two = document.createElement("label");
temp_str_two.innerText=" ";
crTdTwo.appendChild(temp_str_two);
//選擇年
parddu_year_change_div = document.createElement("div");
parddu_year_change_div.style.display = "none";
parddu_year_change_div.style.borderWidth = "0px";
parddu_year_change_div.style.position = "absolute";
parddu_year_change_sel = document.createElement("select");
parddu_year_change_sel.style.width = "50px";
parddu_year_change_sel.style.height = "17px";
setButtonStyleOne(parddu_year_change_sel);
parddu_year_change_sel.onchange = closeChangeYear;
parddu_year_change_div.appendChild(parddu_year_change_sel);
crTdTwo.appendChild(parddu_year_change_div);
//添加年控件
parddu_year_txt = document.createElement("input");
parddu_year_txt.type="text";
parddu_year_txt.readOnly="true";
parddu_year_txt.style.width="32px";
parddu_year_txt.maxLength="4";
parddu_year_txt.style.height="16px";
setTextStyleOne(parddu_year_txt);
parddu_year_txt.onclick=displayChangeYear;
crTdTwo.appendChild(parddu_year_txt);
var yearstr = document.createElement("label");
yearstr.innerText="年";
crTdTwo.appendChild(yearstr);
//添加月控件
parddu_month_txt = document.createElement("input");
parddu_month_txt.type="text";
parddu_month_txt.readOnly="true";
parddu_month_txt.style.width="15px";
parddu_month_txt.maxLength="2";
parddu_month_txt.style.height="16px";
setTextStyleOne(parddu_month_txt);
crTdTwo.appendChild(parddu_month_txt);
var monthstr = document.createElement("label");
monthstr.innerText="月 ";
crTdTwo.appendChild(monthstr);
//添加小時(shí)控件
parddu_hour_txt = document.createElement("input");
parddu_hour_txt.type="text";
parddu_hour_txt.id = "parddu_hour";
parddu_hour_txt.title="小時(shí)";
parddu_hour_txt.style.width="15px";
parddu_hour_txt.maxLength="2";
parddu_hour_txt.style.height="16px";
setTextStyleTwo(parddu_hour_txt);
parddu_hour_txt.onblur = timeTxtBlue;
crTdTwo.appendChild(parddu_hour_txt);
var hourstr = document.createElement("label");
hourstr.innerText=":";
crTdTwo.appendChild(hourstr);
//parddu_minute_txt
parddu_minute_txt = document.createElement("input");
parddu_minute_txt.type="text";
parddu_minute_txt.id = "parddu_minute";
parddu_minute_txt.title="分鐘";
parddu_minute_txt.style.width="15px";
parddu_minute_txt.maxLength="2";
parddu_minute_txt.style.height="16px";
setTextStyleTwo(parddu_minute_txt);
parddu_minute_txt.onblur = timeTxtBlue;
crTdTwo.appendChild(parddu_minute_txt);
var minutestr = document.createElement("label");
minutestr.innerText=":";
crTdTwo.appendChild(minutestr);
//parddu_second_txt
parddu_second_txt = document.createElement("input");
parddu_second_txt.type="text";
parddu_second_txt.id = "parddu_second";
parddu_second_txt.title="秒鐘";
parddu_second_txt.style.width="15px";
parddu_second_txt.title="";
parddu_second_txt.maxLength="2";
parddu_second_txt.style.height="16px";
setTextStyleTwo(parddu_second_txt);
parddu_second_txt.onblur = timeTxtBlue;
crTdTwo.appendChild(parddu_second_txt);
var temp_str_three = document.createElement("label");
temp_str_three.innerText=" ";
crTdTwo.appendChild(temp_str_three);
//月增加
parddu_month_butadd = document.createElement("input");
parddu_month_butadd.type="button";
parddu_month_butadd.value=">";
parddu_month_butadd.title="增加一月";
parddu_month_butadd.style.height="17px";
parddu_month_butadd.style.cursor="hand";
setButtonStyleOne(parddu_month_butadd);
parddu_month_butadd.onmouseout=mouseOutBut;
parddu_month_butadd.onmouseover=mouseOverBut;
parddu_month_butadd.onclick=changeMonthAdd;
crTdTwo.appendChild(parddu_month_butadd);
//年增加
var temp_str_four = document.createElement("label");
temp_str_four.innerText=" ";
crTdTwo.appendChild(temp_str_four);
parddu_year_butadd = document.createElement("input");
parddu_year_butadd.type="button";
parddu_year_butadd.value=">>";
parddu_year_butadd.title="增加一年";
parddu_year_butadd.style.height="17px";
parddu_year_butadd.style.cursor="hand";
setButtonStyleOne(parddu_year_butadd);
parddu_year_butadd.onmouseout=mouseOutBut;
parddu_year_butadd.onmouseover=mouseOverBut;
parddu_year_butadd.onclick=changeYearAdd;
crTdTwo.appendChild(parddu_year_butadd);
//關(guān)閉按鈕
var temp_str_four = document.createElement("label");
temp_str_four.innerText=" ";
crTdTwo.appendChild(temp_str_four);
parddu_close_but = document.createElement("input");
parddu_close_but.type="button";
parddu_close_but.value="×";
parddu_close_but.title="關(guān)閉";
parddu_close_but.style.height="17px";
parddu_close_but.style.cursor="hand";
setButtonStyleOne(parddu_close_but);
parddu_close_but.onmouseout=mouseOutBut;
parddu_close_but.onmouseover=mouseOverBut;
parddu_close_but.onclick=closeTimePicker;
crTdTwo.appendChild(parddu_close_but);
//創(chuàng)建星期行
var twoRow = parddu_timeTable.insertRow();
twoRow.align="center";
var wList = ["日","一","二","三","四","五","六"];
for(var i in wList){
var trTd = twoRow.insertCell();
trTd.style.borderBottom="1px solid #006666";
trTd.width="35";
trTd.innerText = wList[i];
}
//顯示當(dāng)前日期
parddu_nowTime = document.createElement("div");
parddu_nowTime.style.fontSize="12px";
parddu_nowTime.style.color="blue";
parddu_nowTime.style.padding="5px";
parddu_nowTime.style.cursor="hand";
parddu_nowTime.style.backgroundColor="#cccccc";
parddu_nowTime.title="點(diǎn)擊取得當(dāng)前時(shí)間";
parddu_nowTime.onclick = outputNowDateTime;
//將表格和現(xiàn)實(shí)當(dāng)前時(shí)間的span加入div
parddu_timeDiv.appendChild(parddu_timeTable);
parddu_timeDiv.appendChild(parddu_nowTime);
}
//減少年
function changeYearSub(){
parddu_year_txt.value = parseInt(parddu_year_txt.value)-1;
appendDay();
}
//減少月份
function changeMonthSub(){
var temp_month = parseInt(parddu_month_txt.value)-1;
if(temp_month<1){
parddu_month_txt.value=12-temp_month;
parddu_year_txt.value= parseInt(parddu_year_txt.value)-1;
}
else{
parddu_month_txt.value=temp_month;
}
appendDay();
}
//增加月份
function changeMonthAdd(){
var temp_month = parseInt(parddu_month_txt.value)+1;
if(temp_month>12){
parddu_month_txt.value=temp_month-12;
parddu_year_txt.value= parseInt(parddu_year_txt.value)+1;
}
else{
parddu_month_txt.value=temp_month;
}
appendDay();
}
//增加年
function changeYearAdd(){
parddu_year_txt.value = parseInt(parddu_year_txt.value)+1;
appendDay();
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號(hào)
Ctrl + =
減小字號(hào)
Ctrl + -