오늘 날짜를 기준으로 select 박스에, 자동으로 날짜가 선택되는 코드입니다.
먼저 자바 스크립트 코드입니다.
스크립트 코드를 <header><header/> 사이에 추가 해줍니다.
javaScript 코드
<SCRIPT LANGUAGE="JavaScript">
Now = new Date();
NowDay = Now.getDate();
NowMonth = Now.getMonth();
NowYear = Now.getYear();
if (NowYear < 2000) NowYear += 1900;
function DaysInMonth(WhichMonth, WhichYear)
{
var DaysInMonth = 31;
if (WhichMonth == "Apr" || WhichMonth == "Jun" || WhichMonth == "Sep" || WhichMonth == "Nov") DaysInMonth = 30;
if (WhichMonth == "Feb" && (WhichYear/4) != Math.floor(WhichYear/4)) DaysInMonth = 28;
if (WhichMonth == "Feb" && (WhichYear/4) == Math.floor(WhichYear/4)) DaysInMonth = 29;
return DaysInMonth;
}
function ChangeOptionDays(Which)
{
DaysObject = eval("document.Form1." + Which + "Day");
MonthObject = eval("document.Form1." + Which + "Month");
YearObject = eval("document.Form1." + Which + "Year");
Month = MonthObject[MonthObject.selectedIndex].text;
Year = YearObject[YearObject.selectedIndex].text;
DaysForThisSelection = DaysInMonth(Month, Year);
CurrentDaysInSelection = DaysObject.length;
if (CurrentDaysInSelection > DaysForThisSelection)
{
for (i=0; i<(CurrentDaysInSelection-DaysForThisSelection); i++)
{
DaysObject.options[DaysObject.options.length - 1] = null
}
}
if (DaysForThisSelection > CurrentDaysInSelection)
{
for (i=0; i<(DaysForThisSelection-CurrentDaysInSelection); i++)
{
NewOption = new Option(DaysObject.options.length + 1);
DaysObject.add(NewOption);
}
}
if (DaysObject.selectedIndex < 0) DaysObject.selectedIndex == 0;
}
function SetToToday(Which)
{
DaysObject = eval("document.Form1." + Which + "Day");
MonthObject = eval("document.Form1." + Which + "Month");
YearObject = eval("document.Form1." + Which + "Year");
YearObject[0].selected = true;
MonthObject[NowMonth].selected = true;
ChangeOptionDays(Which);
DaysObject[NowDay-1].selected = true;
}
function WriteYearOptions(YearsAhead)
{
line = "";
for (i=0; i<YearsAhead; i++)
{
line += "<OPTION>";
line += NowYear + i;
}
return line;
}
// -->
</script>
html 코드
<!----- 2. BODY 태그안에 아래의 이벤트 핸들러를 붙여 넣으세요 -->
<BODY onLoad="SetToToday('FirstSelect');">
<B>오늘 연도와 날짜가 자동으로 선택 됩니다</B>
<!----- 3. 원하는 위치에 아래와 같이 코드를 붙여 넣으세요 ------->
<FORM name="Form1">
<SELECT name="FirstSelectYear" onchange="ChangeOptionDays('FirstSelect')">
<SCRIPT language="JavaScript">
document.write(WriteYearOptions(50));
</SCRIPT>
</SELECT>
<SELECT name="FirstSelectMonth" onchange="ChangeOptionDays('FirstSelect')">
<!------ 필요하면 아래 월 표시를 한글로 바꾸어 주세요 ------->
<OPTION>01월
<OPTION>02월
<OPTION>03월
<OPTION>04월
<OPTION>05월
<OPTION>06월
<OPTION>07월
<OPTION>08월
<OPTION>09월
<OPTION>10월
<OPTION>11월
<OPTION>12월
</SELECT>
<SELECT name="FirstSelectDay">
<OPTION>1
<OPTION>2
<OPTION>3
<OPTION>4
<OPTION>5
<OPTION>6
<OPTION>7
<OPTION>8
<OPTION>9
<OPTION>10
<OPTION>11
<OPTION>12
<OPTION>13
<OPTION>14
<OPTION>15
<OPTION>16
<OPTION>17
<OPTION>18
<OPTION>19
<OPTION>20
<OPTION>21
<OPTION>22
<OPTION>23
<OPTION>24
<OPTION>25
<OPTION>26
<OPTION>27
<OPTION>28
<OPTION>29
<OPTION>30
<OPTION>31
</SELECT>
</FORM>간단히 말해서 html 페이지 body를 로딩 할때, 자바 스크립트 코드를 실행하여 오늘 날짜 년/월/일 option을 selected 해줍니다.
'개발 언어 > 자바 스크립트 java script' 카테고리의 다른 글
| 로딩바 만들기 (버튼 클릭 / html, css, 제이쿼리, 스프링 부트) (0) | 2020.08.19 |
|---|---|
| [css] 웹 브라우저 프린터 배경색 나오도록 설정 (크롬/인터넷 익스플로어 등..) (0) | 2020.06.12 |
| javascript 닫기, 새로고침 이벤트 처리 (정말 나가시겠습니까?) (0) | 2020.01.13 |
| 셀렉트박스(select) 변경 이벤트 처리하기 [javascript] (0) | 2019.03.26 |
| [웹] 데이트 피커 추가 [nice-date-picker js] [달력추가] (0) | 2019.03.21 |
댓글