[jQuery] 선택 날짜를 태그로 생성하는 모듈[jQuery] 선택 날짜를 태그로 생성하는 모듈

Posted at 2018. 4. 19. 11:26 | Posted in JavaScript & jQuery/jQuery
반응형




■ 날짜 태그 생성하기




-. UI개발중 특정 날짜를 선택하면 그 날짜값을 태그로 생성하는 기능이 필요하게 되어 개발 후 정리한다.

-. 아래 예제 소스코드를 실행하기 위해서는 반드시 jQuery-ui에 대한 세팅이 필 수 불가결 하다.




# 소스코드

<html>

<head>

<title>:: 날짜 태그 추가하기 ::</title>

<link rel="stylesheet" type="text/css" href="http://localhost/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="http://localhost/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.min.js"></script>

<script type="text/javascript" src="http://localhost/jquery-ui-1.12.1.custom/jquery.ui.datepicker-ko.js"></script>

<style type="text/css">

#choiceDate {

width:100px;

text-align:center;

}


#tagBox {

border:2px solid #75DBE7;

border-radius:5px;

padding-top:10px;

padding-left:10px;

padding-right:10px;

padding-bottom:10px;

width:600px;

height:300px;

}

.daysTag{

float:left;

border-radius:5px;

background-color:#7CBAC1;

height:15px;

margin-left:5px;

margin-bottom:5px;

padding-top:3px;

padding-left:5px;

padding-right:5px;

padding-bottom:2px;

font-size:13px;

font-weight:bold;

color:#FFFFFF;

display:flex;

justify-content:center;

align-items:center;

}


.delIcon {

width:14px;

height:14px;

}

</style>

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery("#choiceDate").datepicker();

});


function dayTagProduction(day) {

var getOut = true;


// 이미 등록한 날짜가 있는지 확인한다.

jQuery(".choiceDay").each(function(idx) {

if(jQuery(".choiceDay").eq(idx).val() == day) {

alert(day + "일은 이미 추가된 날짜입니다.");

getOut = false;

return false;

}

});


if(getOut == true) {

// 등록한 날짜가 없다면 날짜태그를 추가한다.

var tag = "";

tag += "<a href='javascript:;' onClick='dayTagRemove(this);'>";

tag += "<div class='daysTag'>";

tag += day;

tag += "&nbsp;<img class='delIcon' src='x_icon.png'/>";


// 실제로 생성된 값을 입력하기 위한 hidden 타입 설정

tag += "<input type='hidden' class='choiceDay' name='choiceDay[]' value='" + day + "'/>";


tag += "</div>";

tag += "</a>";

jQuery("#tagBox").append(tag);

}


                else {


// 등록한 날짜가 존재한다면 날짜태그를 생성하지 않는다.

return false;

}

}

// 생성된 날짜태그를 제거한다.

function dayTagRemove(tag) {


var idx = jQuery(tag).index();

var day = jQuery(".choiceDay").eq(idx).val();


if(confirm(day + " 날짜를 삭제 하시겠습니까?") == true) {

jQuery(tag).remove();

}


                jQuery("#tagBox").append(tag);

}

</script>

</head>

<body>

<h2>날짜 태그 추가하기</h2>

<input type="text" id="choiceDate" onChange="dayTagProduction(this.value);" value=""/>

<div style="height:20px;"></div>

<div id="tagBox"></div>

</body>

</html>




# 출력결과






반응형
저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 움직이는 팝업 레이어 만들기  (0) 2018.05.29
[jQuery] 따라다니는플로팅 배너 제작  (0) 2018.04.23
[jQuery] 테이블(TABLE) 행(ROW) 순서위치 이동시키기  (2) 2018.03.22
[jQuery] AJAX를 사용한 파일 업로드  (1) 2018.03.18
[jQuery] 쇼핑몰 대표 이미지 상품박스  (0) 2018.03.14
//

티스토리툴바