📄 dtpicker.htc
字号:
<public:component name="DatePicker" urn="DatePicker">
<public:property name="value" get="getValue" put="putValue"/>
<public:property name="text" get="getText" put="putText"/>
<public:property name="year"/>
<public:property name="month"/>
<public:property name="date"/>
<public:property name="dateFormat" value="YYYY-MM-DD"/>
<public:property name="caption" value=""/>
<public:property name="top" value="0"/>
<public:property name="left" value="0"/>
<public:property name="width" value="100"/>
<public:property name="height" value="20"/>
<public:property name="refresh" put="refresh"/>
<public:property name="init" put="initialize"/>
<public:property name="readOnly" value="false" get="getReadOnly" put="putReadOnly"/>
<public:property name="visible" put="putVisible" get="getVisible"/>
<public:property name="expand" put="putExpand" get="getExpand"/>
<public:attach event="onmousedown" onevent="clickElement()"/>
<script language="JavaScript">
<!--
var objInput,objBtn,objList,objTable,objYearBox,objMonthBox,objText,objDIVBorder;
var vElementTop,vElementLeft;
var vTimeout,vTimeout2;
var objLight;
var vListHeight,vListWidth;
var objRange;
var vClickNum;
var tagOnKey,OldvDatePart;//保存上一次激活的字段
var vReadOnly;//只读属性
var vcaption;
function getValue(){
if(objInput){
if(year=='1900' && parseInt(month)==1 && parseInt(date)==1){
return "";
}else
return (year + "-" + month + "-" + date);
}
}
function getDateByFormat(){//通过格式取得变量(尚未实现
}//end function getDateByFormat();
function formatDateToNormal(argDateString){//将数据库日期格式化成库可用格式
var arrTemp ;
var timeRe;
var year;
if(typeof(argDateString) !='string')
return ;
if(argDateString.match("[0-9]{1,2}-[0-9]{1,2}月 *-[0-9]{1,4}")==null){
return argDateString;
}
arrTemp = argDateString.split("-");
if(arrTemp[2].length == 2)
if(parseInt(arrTemp[2])<50)
year = "20"+(arrTemp[2]);
else
year = "19"+(arrTemp[2]);
else
year = arrTemp[2];
timeRe = year+"-"+ parseInt(arrTemp[1])+"-"+parseInt(arrTemp[0]);
return timeRe;
}
function putValue(argValue){
var vTemp;
var arrTemp;
if(argValue==""){
argValue = "1900-1-01";
}
argValue = formatDateToNormal(argValue);
try{
vTemp = argValue.replace(/年|月|日|-|\s/g,",");
arrTemp = vTemp.split(",",3);
arrTemp[1] = parseInt(arrTemp[1],10) - 1;
vTemp = eval("new Date(" + arrTemp.toString() + ")");
setDate(vTemp);
}
catch(err){
setDate();
}
if(objInput)
objInput.value = text; //设置objInput中的值
}
function putReadOnly(inReadOnly){//设置readOnly的属性值
vReadOnly = inReadOnly.toString();
if(vReadOnly == "true"||vReadOnly==true){//
if(objBtn){
objBtn.onmousedown = whenReadOnlyBtn;
objBtn.onmouseover = setBtn;
objBtn.onmouseup = setBtn;
objBtn.onmouseout = setBtn;
objInput.onmousedown = setBtn;
objInput.onmouseover = setBtn;
objInput.onmouseout = setBtn;
setBtn();
window.document.detachEvent("onmousedown",clickDocument);
}
///////////////////////////////////
objDIVBorder.style.borderColor = "#cccccc";
///////////////////////////
}else{
if(objBtn){
objBtn.onmousedown = clickBtn;
objBtn.onmouseover = overBtn;
objBtn.onmouseup = overBtn;
objInput.onmousever = overBtn;
setBtn();
}
objDIVBorder.style.borderColor = "#7B9EBD";
}
}
function whenReadOnlyBtn(){
}
function getReadOnly(){//读取readOnly属性值
return vReadOnly;
}
function getText(){
return(year + "年" + month + "月" + date + "日")
}
function putText(argDate){//argDate is like "2003-02-03"
var l = argDate.split("-");
year = l[0];
month = l[1];
date = l[2];
objYearBox.innerText = year;
objMonthBox.innerText = month;
}
function getVisible(){
if(element.style.display == "none") return false;
else return true;
}
function putVisible(argBool){
if(argBool.toString() == "true"){
with(element){
style.visibility = "hidden"; //这里这样变换是因为在"displya='none'"状态下无法将element定位于给定的定位值
style.display = "block"; //true表示可视
refresh();
style.visibility = "visible";
}
}
else{ //false 表示不可视
if(objList) hideCalendar(); //隐藏date list
element.style.display = "none";
}
}
function getExpand(){
if(objList.style.display == "none") return false;
else return true;
}
function putExpand(argBool){ //不用点击 btn 张开/收缩calendar
if(argBool.toString() == "true"){ //true
if(!objList){ //如果不存在则新建 date list
downBtn();
showCalendar();
clickElement();
}
else if(objList.style.display == "none"){
clickBtn(); //如果隐藏了则打开date list
clickElement();
}
}
else{ //false
if(objList && objList.style.display != "none") hideCalendar2(); //如果objList已存在且已打开
}
}
function clickDocument(){ //document's onmousedown,主要为了隐藏calendar
var objSrc;
if(!objList) return;
objSrc = window.event.srcElement;
if(element.contains(objSrc)) return;
hideCalendar2();
window.document.detachEvent("onmousedown",clickDocument);
vClickNum = false;
}
function clickElement(){ //绑定element's onmousedown主要为了隐藏calendar
if(!vClickNum){
window.document.attachEvent("onmousedown",clickDocument);
vClickNum = true;
}
}
function clickBtn(){ //btn's onmouseup
if(vReadOnly == "true") return;
if(year=='1900' && parseInt(month)==1 && parseInt(date)==1){//如果在单击时是默认时间值
var vDate =new Date();
year = vDate.getFullYear();
month = vDate.getMonth() + 1;
date = vDate.getDate();
setInputVisibility();
}
if(objList){
if(objList.style.display == "none"){
//强行更新数据
validateKeyInput();
tagOnKey = null;
locateCalendar();
changeDate();
element.style.zIndex = 10;
objList.style.display = "block";
downBtn();
}
else hideCalendar3();
}
else{
downBtn();
showCalendar();
}
}
function clickDateTable(){ //在calendar中选择日
var objSrc = window.event.srcElement;
var vRow,vCell,vText;
window.event.cancelBubble = true;
if(objSrc.tagName.toLowerCase() == "td"){
vCell = objSrc.cellIndex;
vRow = objSrc.parentElement.rowIndex;
vText = parseInt(objSrc.innerText);
if(vRow == 0) return;
if(vRow < 2 && vText > 14){ //点击上月时间
if(year == 1601 && month == 1) return;
month = month - 1;
}
else if(vRow > 4 && vText < 15){ //点击下月时间
if(year == 9999 && month == 12) return;
month += 1;
}
date = vText;
objInput.value = text;
hideCalendar2();
}
setInputVisibility();
}
function clickToday(){
//setDate();
var tmpToday = new Date();
text= tmpToday.getFullYear() + "年" + (tmpToday.getMonth() + 1) + "月" + (tmpToday.getDate()) + "日";
objInput.value =tmpToday.getFullYear() + "年" + (tmpToday.getMonth() + 1) + "月" + (tmpToday.getDate()) + "日";
year = tmpToday.getFullYear();
month = tmpToday.getMonth()+1;
date = tmpToday.getDate();
hideCalendar2();
setInputVisibility();
}
function blurInput(){ //objInput onblur
validateKeyInput();
try{
document.activeElement=element;
if(objRange){
objRange.move("textedit",1);
objRange.select();
objRange = null;
tagOnKey = null;
objInput.blur();
}
}catch(e){
}
// window.activeElement=objBtn;
// alert(document.activeElement);
}
function focusInput(){
// var objRange;
objRange = element.document.selection.createRange();
if(objRange.text.length > 8){
objRange.move("textedit",1);
objRange.select();
}
}
function lastYear(){
if(year == 1601) return;
year -= 1;
changeYear();
vTimeout2 = window.setTimeout(lastYear,200);
}
function nextYear(){
if(year == 9999) return;
year +=1;
changeYear();
vTimeout2 = window.setTimeout(nextYear,200);
}
function lastMonth(){
if(year == 1601 && month == 1) return;
month -= 1;
changeDate();
vTimeout2 = window.setTimeout(lastMonth,300);
}
function nextMonth(){
if(year == 9999 && month == 12) return;
month += 1;
changeDate();
vTimeout2 = window.setTimeout(nextMonth,300);
}
function showCalendar(){ //构造下拉日历
var objTemp; //用于创建不动态变化的对象
var i,j;
var arrDays;
var vToday;
element.style.zIndex = 10000;
arrDays = new Array("日","一","二","三","四","五","六"); //星期
vToday = new Date();
vToday = vToday.getFullYear() + "年" + (vToday.getMonth() + 1) + "月" + (vToday.getDate()) + "日";
objList = element.document.createElement("<div class='sc_dt_list'></div>");
objList = element.appendChild(objList);
with(objList){
style.pixelWidth = 1;
style.pixelHeight = 1;
style.visibility = "hidden";
style.overflow = "hidden";
onmousedown = noResponse;
}
//顶部面板
objTemp = element.document.createElement("<div class='sc_dt_toppanel'></div>");
objList.appendChild(objTemp);
//显示日的网格
objTable = element.document.createElement("<table class='sc_dt_table' border='0' align='center'></table>");
objTable = objList.appendChild(objTable);
for(i = 0; i < 7; i++){
objTemp = objTable.insertRow();
objTemp.align="center";
for(j = 0; j < 7; j++){
objTemp.insertCell();
}
}
for(i = 0; i < 7; i++){ // fill 0 line with days name
with(objTable.rows(0).cells(i)){
innerText = arrDays[i];
style.borderBottom = "1px solid #7B9EBD";
}
}
objTable.onmouseup = clickDateTable;
//底部Today面板
objTemp = element.document.createElement("<div class='sc_dt_bottompanel'></div>");
objTemp = objList.appendChild(objTemp);
with(objTemp){
innerHTML = "今天: " + vToday;
onmousedown = clickToday;
}
//年份显示区域
objYearBox = element.document.createElement("<div class='sc_dt_yearbox'></div>");
objYearBox = objList.appendChild(objYearBox);
//月份显示区域
objMonthBox = element.document.createElement("<div class='sc_dt_monthbox'></div>");
objMonthBox = objList.appendChild(objMonthBox);
//年份按钮
objTemp = element.document.createElement("<span class='sc_dt_yearbtn'></span>");
objTemp = objList.appendChild(objTemp);
objTemp.innerHTML = "<xml:namespace prefix='v' ns='schemas-microsoft.com:vml'/><v:polyline points='0,0 10,0 0,10 0,0' fillcolor='#009A00' strokecolor='#7B9EBD'><v:fill type='gradientradial' color2='#84EB52'/></v:polyline><v:polyline points='0,0 10,0 0,10 0,0' style='position:absolute; flip:x y; left:2; top:2;' fillcolor='#009A00' strokecolor='#7B9EBD'><v:fill type='gradientradial' color2='#84EB52' focusposition='80% 80%'/></v:polyline>";
with(objTemp.children(0)){ //年份递增按钮
onmousedown = nextYear;
//onmouseover = lightBtn2;
onmouseup = stopLoop;
onmouseout = stopLoop2;
}
with(objTemp.children(1)){
onmousedown = lastYear;
//onmouseover = lightBtn2;
onmouseup = stopLoop;
onmouseout = stopLoop2;
}
//月份递减按钮
objTemp = element.document.createElement("<span class='sc_dt_monthbtn'></span>");
objTemp = objList.appendChild(objTemp);
with(objTemp){
style.left = 5;
innerHTML = "<xml:namespace prefix='v' ns='schemas-microsoft.com:vml'/><v:group style='position:absolute; 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>";
onmousedown = lastMonth;
//onmouseover = lightBtn2;
onmouseup = stopLoop;
onmouseout = stopLoop2;
}
//月份递增按钮
objTemp = element.document.createElement("<span class='sc_dt_monthbtn'></span>");
objTemp = objList.appendChild(objTemp);
with(objTemp){
style.right = 18;
innerHTML = "<xml:namespace prefix='v' ns='schemas-microsoft.com:vml'/><v:group style='position:absolute; 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>";
onmousedown = nextMonth;
//onmouseover = lightBtn2;
onmouseup = stopLoop;
onmouseout = stopLoop2;
}
locateCalendar(); //定位
changeDate(); //填充日期
with(objList){
style.pixelWidth = vListWidth;
style.pixelHeight = vListHeight;
style.visibility = "visible";
style.left = objText.offsetWidth;
}
}
function hideCalendar(){ //隐藏date list
if(objList) objList.style.display = "none";
element.style.zIndex = 1;
}
function hideCalendar2(){ //隐藏date list并让objBtn恢复到初始状态
hideCalendar();
if(readOnly == 'false')
outBtn(); //恢复objBtn原有样式
}
function hideCalendar3(){ //隐藏date list并让objBtn恢复到over状态
hideCalendar();
overBtn(); //objBtn样式变化为over其上的样式
}
function fillDates(){ //fill table with dates
var vTotalDate; //每月天数
var vLastMonth,vNextMonth; //上下月
var vFirstDay; //本月1日星期
var i,k;
var objTD;
var bToday; //判断是否是当前年、月
vLastMonth = (month == 1)?12:month - 1;
vNextMonth = (month == 12)?1:month + 1;
vFirstDay = new Date(year,(month - 1),1).getDay();
if(vFirstDay == 0) vFirstDay = 7;
bToday = new Date();
if(year == bToday.getFullYear() && month == bToday.getMonth() + 1) bToday = true;
else bToday = false;
k = 0;
//上月
vTotalDate = getTotalDates(vLastMonth);
for(i = 0,k=0; i < vFirstDay; i++,k++){
objTD = objTable.rows(1).cells(i);
with(objTD){
innerText = vTotalDate - (vFirstDay - i - 1);
runtimeStyle.color = "#D4D0C8";
runtimeStyle.backgroundColor = "";
}
}
//本月
vTotalDate = getTotalDates(month);
for(i = 1; i <= vTotalDate; i++,k++){
objTD = objTable.rows(parseInt(k / 7) + 1).cells(k % 7);
with(objTD){
innerText = i;
runtimeStyle.color = "";
if(i == date){
runtimeStyle.backgroundColor = "#3169C6";
runtimeStyle.color = "#ffffff";
}
else runtimeStyle.backgroundColor = "";
//if(bToday && i == (new Date()).getDate()) style.border = "1px solid #000000";
}
}
//下月
for(i=1; k < 42; k++,i++){
objTD = objTable.rows(parseInt(k / 7) + 1).cells(k % 7);
with(objTD){
innerText = i;
runtimeStyle.color = "#D4D0C8";
runtimeStyle.backgroundColor = "";
}
}
}
function locateCalendar(){ //定位日历
var vListTop,vListLeft;
var vEleClient,vDocClient;
vListTop = element.offsetHeight;
vListLeft = -1;
vEleClient = vElementTop - element.document.body.scrollTop;
vDocClient = element.document.body.clientHeight;
if(vDocClient - vEleClient - vListTop <= vListHeight){
vListTop = -(vListHeight + 2);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -