출처 및 참고 :
jquery select box 연도 보여주기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 $(document).ready(function(){ setDateBox(); }); // select bo..
choija.tistory.com
회원가입에 필요한 년월일 selectbox 예제를 찾다가 해당 사이트를 발견하였다.
연도와 월의 샘플을 찾았으니 일자도 추가하여 수정해주었다.
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>head에 jquery를 불러와 준다. (부트스트랩에 있음)
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
<body>
<select name="year" id="year" title="년도" class="custom-select"></select>
<select name="month" id="month" title="월" class="custom-select"></select>
<select name="day" id="day" title="일" class="custom-select"></select>
</body>
부트스트랩 css를 사용하기 때문에 class="custom-select"로 하였다.
body에 select를 넣어주자
<script>
$(document).ready(function () {
setDateBox();
});
// select box 연도 , 월 표시
function setDateBox() {
var dt = new Date();
var year = "";
var com_year = dt.getFullYear();
// 발행 뿌려주기
$("#year").append("<option value=''>년도</option>");
// 올해 기준으로 -50년부터 +1년을 보여준다.
for (var y = (com_year - 50); y <= (com_year + 1); y++) {
$("#year").append("<option value='" + y + "'>" + y + " 년" + "</option>");
}
// 월 뿌려주기(1월부터 12월)
var month;
$("#month").append("<option value=''>월</option>");
for (var i = 1; i <= 12; i++) {
$("#month").append("<option value='" + i + "'>" + i + " 월" + "</option>");
}
// 일 뿌려주기(1일부터 31일)
var day;
$("#day").append("<option value=''>일</option>");
for (var i = 1; i <= 31; i++) {
$("#day").append("<option value='" + i + "'>" + i + " 일" + "</option>");
}
}
</script>
해당 사이트에서 배운 소스를 가져와 응용을 해본다.
year과 month밖에 없었지만 아래에 day를 추가하여 1부터 31일 까지 for문을 돌려준다.
그리고 option에는 for문으로 도는 i와 '일'을 추가해준다.
끝
'끄적끄적' 카테고리의 다른 글
| python 자릿수 01 채우기 (0) | 2020.07.14 |
|---|---|
| 내가 코딩을 하는 방법 (0) | 2020.07.14 |
| html 글자 양 옆에 선 그어주기 (0) | 2020.07.12 |
| 개발자 도구를 이용한 크롬 공룡 게임 수정해보기 (0) | 2020.07.11 |
| 회원가입 form 꾸미기 (0) | 2020.07.09 |