JS 날짜 및 시간 선택 제어 업그레이드 버전(자체 작성)_javascript 기술

/**
*이 달력 선택 컨트롤은 이전 경험을 바탕으로 tiannet에 의해 완성되었습니다. 대부분의 코드는 meizz의 달력 컨트롤에서 나옵니다.
*tiannet에는 시간 선택 기능, 선택, 개체 라벨 숨기기 기능 및 기타 작은 기능이 추가되었습니다.
*사용법:
* (1) 날짜만 선택 hour
* (3)날짜, 시간, 분 선택*매개변수 설정 방법
* (1) 날짜 구분 기호 설정 setDateSplit(strSplit); 기본값은 "-"입니다.
* ( 2) 설정 날짜와 시간 사이의 구분 기호 setDateTimeSplit(strSplit); 기본값은 " "입니다.
* (3) 시간 구분 기호를 설정합니다. setTimeSplit(strSplit); 기본값은 ":"입니다.
* (4) Set ( 1), (2) 및 (3) setSplit(strDateSplit, strDateTimeSplit, strTimeSplit)
* (5) 시작 및 종료 연도 설정 setYearPeriod(intDateBeg, intDateEnd)
* 설명:
* 기본 반환 날짜 및 시간 형식은 다음과 같습니다. 2005-02-02 08:08
*/
//------------------ 스타일 정의-- - -------------//
//기능 버튼 스타일 동일
var s_tiannet_turn_base = "height:16px; 글꼴 크기: 9pt;색상:흰색;테두리:0 단색 #CCCCCC;커서:손;배경색:#2650A6;";
//연도, 월 등을 바꾸는 버튼
var s_tiannet_turn = "width:28px;" s_tiannet_turn_base;//닫기, 지우기 등의 버튼 스타일
var s_tiannet_turn2 = "s_tiannet_turn_base"
//연도 선택 드롭다운 상자
s_tiannet_select = "너비:64px;display:none ;";
//월, 시, 분 선택 드롭다운 상자
var s_tiannet_select2 = "너비:46px;display:none;"
// 날짜 선택 제어 본문 스타일
var s_tiannet_body = "width:150; background-color:#2650A6;display:none;z-index:9998;position:absolute;
"border-left:1 solid #CCCCCC;border-top:1 solid #CCCCCC;border -right:1 solid #999999;border-bottom:1 solid #999999;";
//일일의 스타일 표시
var s_tiannet_day = "폭:21px;높이:20px;배경색:# D8F0FC;글꼴 크기:10pt;";
//글꼴 스타일
var s_tiannet_font = "색상:#FFCC00;글꼴 크기:9pt;커서 :hand;";
//링크 스타일
var s_tiannet_link = "text-장식:none;font-size:9pt;color:#2650A6;";
//가로선
var s_tiannet_line = "border-bottom:1 solid #6699CC"
//----- 변수 정의------------- ---------------- -//
var tiannetYearSt = 1950; //시작 연도 선택 가능
var tiannetYearEnd = 2010 //종료 연도 선택 가능
var tiannetDateNow = new Date();
var tiannetYear = tiannetDateNow.getFullYear(); //연도를 정의하는 변수의 초기값
var tiannetMonth = tiannetDateNow.getMonth() 1; 월을 정의하는 변수
var tiannetDateNow.getDate();
var tiannetHour = 8;//tiannetDateNow.getHours()
var tiannetMinute = 0;//tiannetDateNow.getMinutes(); 🎜>var tiannetArrDay=new Array(42); //날짜를 쓰기 위한 배열 정의
var tiannetDateSplit = "-"; //날짜 구분 기호
var tiannetDateTimeSplit = " "; and time
var tiannetTimeSplit = ":"; //시간 구분 기호
var tiannetOutObject; //날짜 및 시간을 수신하는 개체
var arrTiannetHide = new Array();//강제적으로 적용되는 레이블 be hide
var m_bolShowHour = false;//시간 표시 여부
var m_bolShowMinute = false;//분 표시 여부
var m_aMonHead = new Array(12); 양력의 매월 일수
m_aMonHead[1] = 28; m_aMonHead[3] = 30; = 30; m_aMonHead[7] = 31; m_aMonHead[9] = 31; >// --------------- 사용자는 함수를 호출할 수 있습니다--------------- --------------//
//사용자 호출 함수 - 날짜만 선택
function setDay(obj){
tiannetOutObject = obj
// 태그에 값이 있는 경우 날짜를 현재 값으로 초기화합니다.
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue); 🎜>}
tiannetPopCalendar();
}
//사용자 호출 기능 - 날짜 및 시간 선택
function setDayH(obj ){
tiannetOutObject =
m_bolShowHour = true;
//태그에 값이 있으면 날짜와 시간을 현재 값으로 초기화합니다.
var strValue = tiannetTrim(tiannetOutObject.value); if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var hour = strValue.substring(11,13)
if( hour < 10 ) tiannetHour = hour.substring(1,2); 🎜>}
tiannetPopCalendar()
}
//用户主调函数－选择日期和小时及分钟
function setDayHM(obj){
tiannetOutObject = obj;
m_bolShowHour = true;
m_bolShowMinute = true;
//如果标签中有值，则将日期和小时及分钟初始化为当前值
var strValue = tiannetTrim(tiannetOutObject.value);
if( strValue != "" ){
tiannetInitDate(strValue.substring(0,10));
var time = strValue.substring(11,16);
var arr = time.split(tiannetTimeSplit);
tiannetHour = arr[0];
tiannetMinute = arr[1];
if( tiannetHour < 10 ) tiannetHour = tiannetHour.substring(1,2);
if( tiannetMinute < 10 ) tiannetMinute = tiannetMinute.substring(1,2);
}
tiannetPopCalendar();
}
//设置开始日期和结束日期
function setYearPeriod(intDateBeg,intDateEnd){
tiannetYearSt = intDateBeg;
tiannetYearEnd = intDateEnd;
}
//设置日期分隔符。默认为"-"
function setDateSplit(strDateSplit){
tiannetDateSplit = strDateSplit;
}
//设置日期与时间之间的分隔符。默认为" "
function setDateTimeSplit(strDateTimeSplit){
tiannetDateTimeSplit = strDateTimeSplit;
}
//设置时间分隔符。默认为":"
function setTimeSplit(strTimeSplit){
tiannetTimeSplit = strTimeSplit;
}
//设置分隔符
function setSplit(strDateSplit,strDateTimeSplit,strTimeSplit){
tiannetDateSplit(strDateSplit);
tiannetDateTimeSplit(strDateTimeSplit);
tiannetTimeSplit(strTimeSplit);
}
//设置默认的日期。格式为：YYYY-MM-DD
function setDefaultDate(strDate){
tiannetYear = strDate.substring(0,4);
tiannetMonth = strDate.substring(5,7);
tiannetDay = strDate.substring(8,10);
}
//设置默认的时间。格式为：HH24:MI
function setDefaultTime(strTime){
tiannetHour = strTime.substring(0,2);
tiannetMinute = strTime.substring(3,5);
}
// ---------------------- end 用户可调用的函数 -----------------------------//
//------------------ begin 页面显示部分 ---------------------------//
var weekName = new Array("日","一","二","三","四","五","六");
document.write(''); //------ 끝 페이지 표시 부분------ - -------//
//------ 날짜 및 시간 범위 태그 응답 이벤트 표시--------- -----//
//연도 범위 레이블 응답 클릭
functionspanYearCEvent(){
hideElementsById(new Array("selTianYear" ,"tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false); 🎜>hideElementsById(new Array("tiannetYearHead","selTianMonth","selTianHour","selTianMinute"),true);
}
//월 범위 레이블 응답 클릭
functionspanMonthCEvent(){
hideElementsById(new Array("selTianMonth","tiannetYearHead"),false);
if(m_bolShowHour) hideElementsById(new Array("tiannetHourHead"),false)
if(m_bolShowMinute) hideElementsById(new) Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetMonthHead","selTianYear","selTianHour","selTianMinute"),true); 태그 응답
functionspanHourCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false);
if(m_bolShowHour) hideElementsById(new Array("selTianHour"),false) ;
if(m_bolShowMinute) hideElementsById(new Array("tiannetMinuteHead"),false);
hideElementsById(new Array("tiannetHourHead","selTianYear","selTianMonth","selTianMinute"),true); >}
//분 범위 레이블 응답 클릭
functionspanMinuteCEvent(){
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"),false)
if(m_bolShowHour) hideElementsById( new Array("tiannetHourHead"),false);
if(m_bolShowMinute) hideElementsById(new Array("selTianMinute"),false);
hideElementsById(new Array("tiannetMinuteHead","selTianYear","selTianMonth " ,"selTianHour"),true)
}
//태그 ID를 기준으로 태그 숨기기 또는 표시
function hideElementsById(arrId,bolHide){
var strDisplay = ""; (bolHide) strDisplay = "none";
for(var i = 0;i < arrId.length;i ){
var obj = document.getElementById(arrId[i])
obj. style.display = strDisplay;
}
}
//------ end 날짜와 시간을 표시하는 스팬 태그는 event---- ----------//
//특정 연도가 윤년인지 확인
function isPinYear( 연도){
var bolRet = false;
if (0==연도%4&&((연도 0!=0)||(연도@0==0))) {
bolRet = true;
}
return bolRet;
}
//한 달의 일수를 구합니다. 윤년은 29일입니다.
function getMonthCount(year,month){
var c= m_aMonHead[month-1];
if ((month==2)&&isPinYear(year)) c
return c;
}
//현재 날짜를 재설정합니다.주로 연도나 월을 넘길 때 현재 날짜가 월의 최대 날짜보다 커지는 것을 방지하기 위해
function setRealDayCount() {
if( tiannetDay > getMonthCount(tiannetYear,tiannetMonth) ) {
//현재 날짜가 해당 월의 최대 날짜보다 큰 경우
tiannetDay = getMonthCount(tiannetYear,tiannetMonth)
}
}
//한 자리 숫자 앞에 0 추가
function addZero( value){
if(value < 10 ){
value = "0" value
return value; 🎜>}
//공백 제거
function tiannetTrim (str) {
return str.replace(/(^s*)|(s*$)/g,"");
//선택 옵션 생성
function createOption (objSelect,value,text){
var option = document.createElement("OPTION")
option.value = value; option.text = text;
objSelect.options.add( option);
}
//연도 전환
function tiannetPrevYear() {
if(tiannetYear > 999 && tiannetYear < ;10000){tiannetYear--;}
else{ Alert("연도가 범위(1000-9999)를 벗어났습니다!");}
tiannetSetDay(tiannetYear,tiannetMonth)
//If 연도가 최소 허용 연도보다 작으면 해당 옵션을 생성하세요
if( tiannetYear < tiannetYearSt ) {
tiannetYearSt = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear "year") ;
}
checkSelect(document.all.selTianYear,tiannetYear);
tiannetWriteHead()
}
//연도 반전
function tiannetNextYear() {
if (tiannetYear > 999 && tiannetYear <10000){tiannetYear ;}
else {alert("연도가 범위를 벗어났습니다(1000-9999)! ");return;}
tiannetSetDay(tiannetYear,tiannetMonth);
//연도가 최대 허용 연도를 초과하는 경우 해당 옵션을 생성합니다.
if( tiannetYear > tiannetYearEnd ) {
tiannetYearEnd = tiannetYear;
createOption(document.all.selTianYear,tiannetYear,tiannetYear");
}
checkSelect(document.all.selTianYear,tiannetYear)
tiannetWriteHead();
//오늘 선택
function tiannetToday() {
tiannetYear = tiannetDateNow.getFullYear();
tiannetMonth = tiannetDateNow.getMonth() 1
tiannetDateNow.getDate(); 🎜>tiannetSetValue(true);
//tiannetSetDay(tiannetYear,tiannetMonth);
//selectObject();
}
//월을 앞당깁니다
function tiannetPrevMonth() 🎜>if(tiannetMonth>1){tiannetMonth--}else{tiannetYear--;tiannetMonth=12;}
tiannetSetDay(tiannetYear,tiannetMonth)
checkSelect(document.all.selTianMonth,tiannetMonth)
tiannetWriteHead();
}
//월을 앞으로 넘기기
function tiannetNextMonth() {
if(tiannetMonth==12){tiannetYear ;tiannetMonth=1}else{tiannetMonth }
tiannetSetDay(tiannetYear,tiannetMonth);
checkSelect(document.all.selTianMonth,tiannetMonth);
tiannetWriteHead()
}
//연도, 월, 시, 분을 범위에 씁니다. 태그 데이터 대기 중
function tiannetWriteHead(){
document.all.tiannetYearHead.innerText = tiannetYear "연도";
document.all.tiannetMonthHead.innerText = tiannetMonth "월"
if( m_bolShowHour ) document .all.tiannetHourHead.innerText = " " tiannetHour "시간";
if( m_bolShowMinute ) document.all.tiannetMinuteHead.innerText = tiannetMinute "분"
tiannetSetValue(false);//값 할당 텍스트 상자를 숨기지 마세요
}
//표시된 날짜 설정
function tiannetSetDay(yy,mm) {
setRealDayCount();//월의 실제 날짜 설정
tiannetWriteHead();
var strDateFont1 = "", strDateFont2 = "" //날짜 표시 스타일 처리
for (var i = 0; i < 37; i ){tiannetArrDay[i]=" "}; //상자를 표시합니다. 모든 내용 지우기
var day1 = 1;
var firstday = new Date(yy,mm-1,1).getDay(); //요일 특정 달의 첫날
for (var i = firstday; day1 < getMonthCount(yy,mm) 1; i ){
tiannetArrDay[i]=day1;day1 ; //일의 마지막 행 중 첫 번째 행을 표시하는 데 사용되는 경우 각 셀의 값이 비어 있으면 전체 행이 숨겨집니다.
//if(tiannetArrDay[35] == ""){
// document.all.trTiannetDay5.style.display = "none"
//} else {
// document .all.trTiannetDay5.style.display = "";
//}
for (var i = 0; i < 37; i ){
var da = eval("document.all.tdTiannetDay " i) //새달의 날짜와 주 배열을 적는다
if (tiannetArrDay[i]!="") {
//주말인지 판단, 주말이면 변경 빨간색 글꼴로
if(i % 7 == 0 || (i 1) % 7 == 0){
strDateFont1 = "
strDateFont2 = "< /font>"
} else {
strDateFont1 = "";
strDateFont2 = ""
}
da.innerHTML = strDateFont1 tiannetArrDay[i] strDateFont2;
//If it 가 현재 선택한 날짜이면 색상을 변경하세요.
if(tiannetArrDay[i] == tiannetDay ) {
da.style.BackgroundColor = "#CCCCCC"
} else {
da.style .BackgroundColor = "#EFEFEF" ;
}
da.style.cursor="hand"
} else {
da.innerHTML="";da.style.BackgroundColor="";da .style.cursor="default "
}
}//end for
tiannetSetValue(false);//텍스트 상자에 값을 할당하되 이 컨트롤을 숨기지 마세요
}// end function tiannetSetDay
//옵션에 따라 값 선택 옵션
function checkSelect(objSelect,selectValue) {
var count = parsInt(objSelect.length)
if( selectValue < 10 && selectValue. toString().length == 2) {
selectValue = selectValue.substring(1,2)
}
for(var i = 0;i < count;i ){
if (objSelect.options[i].value == selectValue){
objSelect.selectedIndex = i;
break
}
}//
}
//선택 연도, 월, 시, 분 등 드롭다운 상자
function selectObject(){
//연도가 허용되는 최소 연도보다 작은 경우 해당 옵션을 만듭니다.
if( tiannetYear < tiannetYearSt ) {
for( var i = tiannetYear;i < tiannetYearSt; i ){
createOption(document.all.selTianYear,i,i "연도")
}
tiannetYearSt = tiannetYear ;
}
//연도가 최대 허용 연도를 초과하는 경우 해당 옵션을 생성합니다.
if( tiannetYear > tiannetYearEnd ) {
for( var i = tiannetYearEnd 1;i <= tiannetYear;i ){
createOption(document.all.selTianYear,i,i "연도");
}
tiannetYearEnd =
}
checkSelect(document.all.selTianYear, tiannetYear);
checkSelect(document.all.selTianMonth,tiannetMonth);
if( m_bolShowHour ) checkSelect(document.all.selTianHour,tiannetHour)
if( m_bolShowMinute ) checkSelect(document.all.selTianMinute, tiannetMinute);
}
//날짜와 시간을 허용하는 컨트롤에 값 할당
//Parameter bolHideControl - 컨트롤 숨기기 여부
function tiannetSetValue(bolHideControl){
var value = "";
if( !tiannetDay || tiannetDay == "" ){
tiannetOutObject.value = value;
}
var mm =
var day = tiannetDay
if( mm < 10 && mm.toString().length == 1) mm = "0" mm
if( day < 10 && day.toString().length = = 1) day = "0" day;
value = tiannetYear tiannetDateSplit mm tiannetDateSplit day
if ( m_bolShowHour ){
var hour = tiannetHour
if( hour < 10 && hour.toString ().length == 1 ) hour = "0" hour;
value = tiannetDateTimeSplit hour
}
if( m_bolShowMinute ){
var Minute = tiannetMinute
if( 분 < ; 10 && Minute.toString().length == 1 ) 분 = "0" 분
value = tiannetTimeSplit 분
tiannetOutObject.value =
//document.all; .divTiannetDate.style.display = "none";
if( bolHideControl ) {
tiannetHideControl() ;
}
}
//시간 표시 여부
function showTime( ){
if( !m_bolShowHour && m_bolShowMinute){
alert("분을 선택하려면 시간을 선택해야 합니다!");
return;
}
hideElementsById(new Array("tiannetHourHead","selTianHour","tiannetMinuteHead","selTianMinute"),true);
if( m_bolShowHour ){
//시간 표시
hideElementsById(new Array("tiannetHourHead"),false)
}
if( m_bolShowMinute){
//분 표시
hideElementsById(new Array("tiannetMinuteHead) "),false);
}
}
//사용자가
function tiannetPopCalendar(){
을 선택할 수 있도록 달력 선택 컨트롤을 표시합니다//드롭다운 상자 숨기기 그리고 해당 헤드를 표시합니다.
hideElementsById(new Array("selTianYear","selTianMonth","selTianHour","selTianMinute"),true);
hideElementsById(new Array("tiannetYearHead","tiannetMonthHead"," tiannetHourHead"," tiannetMinuteHead"),false);
tiannetSetDay(tiannetYear,tiannetMonth);
tiannetWriteHead();
showTime();
var Dads = document.all.divTiannetDate.style;
var iX , iY;
var h = document.all.divTiannetDate.offsetHeight;
var w = document.all.divTiannetDate.offsetWidth
//왼쪽 계산
(window.event .x h > document.body.offsetWidth - 10 )
iX = window.event.x - h - 5
else
iX = window.event.x 5; ;0)
iX=0
//상위 계산
iY = window.event.y
if (window.event.y w > document.body.offsetHeight - 10 )
iY = document .body.scrollTop document.body.offsetHeight - w - 5
else
iY = document.body.scrollTop window.event.y 5
if (iY <0)
iY= 0;
dads.left = iX;
tiannetShowControl();
selectObject();
//캘린더 숨기기 컨트롤(숨겨진 태그 강제 표시 중)
function tiannetHideControl(){
document.all.divTiannetDate.style.display = "none";
tiannetShowObject()
arrTiannetHide = new Array() ;//숨겨진 라벨 객체를 지웁니다
}
//캘린더 컨트롤 표시(가려진 라벨을 숨기는 동안)
function tiannetShowControl(){
document.all.divTiannetDate.style.display = "";
tiannetHideObject("SELECT");
tiannetHideObject("OBJECT");
}
//태그 이름을 기준으로 태그를 숨깁니다. 컨트롤 선택을 포함하는 경우 개체
function tiannetHideObject(strTagName) {
x = document.all.divTiannetDate.offsetLeft;
y = document.all.divTiannetDate.offsetTop; = document .all.divTiannetDate.offsetHeight;
w = document.all.divTiannetDate.offsetWidth;
for (var i = 0; i < document.all.tags(strTagName).length; i )
{
var obj = document.all.tags(strTagName)[i];
if (! obj || ! obj.offsetParent)
continue
// BODY 태그에 대한 요소
var objLeft = obj.offsetLeft;
var objHeight = obj.offsetHeight;
var objWidth = obj.offsetWidth; = obj.offsetParent;
while (objParent.tagName.toUpperCase() != "BODY"){
objLeft = objParent.offsetLeft;
objTop = objParent.offsetTop; ;
}
//alert("왼쪽 끝 제어:" x "왼쪽 끝 선택" (objLeft objWidth) "아래 제어:" (y h) "높이 선택:" objTop) var bolHide = true;
if( obj.style.display == "none" || obj.style.visibility == "hidden" || obj.getAttribute("Author") == "tiannet" ){
/ /라벨 자체가 숨겨져 있으면 숨길 필요가 없습니다. 컨트롤의 드롭다운 상자인 경우 숨길 필요가 없습니다.
bolHide = false;
}
if( ( (objLeft objWidth) > ){
//arrTiannetHide.push(obj);//숨겨진 라벨 객체 기록
arrTiannetHide[arrTiannetHide .length] = obj;
obj.style.visibility = "hidden";
}
}
}
//숨겨진 태그 표시
function tiannetShowObject(){
for(var i = 0;i < arrTiannetHide.length;i ){
//alert(arrTiannetHide[i])
arrTiannetHide[i].style.visibility = ""
}
}
//초기화 날짜입니다.
function tiannetInitDate(strDate){
var arr = strDate.split(tiannetDateSplit);
tiannetYear = arr[0];
tiannetMonth = arr[1]; ];
}
//지우기
function tiannetClear(){
tiannetOutObject.value = "";
tiannetHideControl()
}//클릭 시 닫기 컨트롤
function document.onclick(){
with(window.event.srcElement){
if (tagName != "INPUT" && getAttribute("Author") != "tiannet")
tiannetHideControl();
}
}
//컨트롤을 닫으려면 ESC 키를 누르세요
function document.onkeypress(){
if( event.keyCode == 27 ){
tiannetHideControl();
}
}


Calendar.html:




코드 복사


코드는 다음과 같습니다.