'jQuery' 태그의 글 목록

datepicker는 급하게 기능을 구현해야 하거나 예쁜 디자인이 필요 없이 간단하게 달력창을 만들어서 사용할 때 적용하기 편합니다.

datepicker에 대해 가장 기본적인 설정부터 조금씩 살을 붙여 나가면서 사용 방법에 대해 알아봅니다.

1. 기본 기능 설정

우선 datepicker를 사용하기 위해서는 아래와 같은 jquery가 필요합니다.

그리고 HTML 태그를 이용하여 날짜를 입력 받기 위한 text input을 하나 만들어 줍니다.

<body>

</body>

그리고 javascript에서 input 입력과 datepicker을 기본적 값으로 설정하고 서로 연결 시켜주면 바로 달력창을 사용할 수 있습니다.

$(document).ready(function () {

$.datepicker.setDefaults();

$("#start_dt").datepicker();

});

</script>

웹 브라우저에서 실행하고 input 박스를 클릭하면 아래와 같은 가장 기본적인 달력창을 확인할 수 있고 날짜를 선택해서 input 창에 값을 입력 받습니다.

가장 기본적인 설정으로는 [월/일/년]의 형식으로 날짜가 입력됩니다.

03/21/2024

우리는 이렇게 사용하지 않으니 수정하려면 날짜 형식을 설정하는 값을 하나 추가합니다.

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

});

다시 실행해서 확인해 봅니다.

날짜가 설정한 형식으로 잘 입력이 되었습니다.

$.datepicker.setDefaults() 로 정의된 함수에 추가하는 설정 값은 공통으로 적용되는 설정입니다.

하나의 페이지에 여러 개의 달력 창을 만들어 사용하는 경우 모든 달력창에 동일한 설정 값이 적용됩니다.

만약 하나의 페이지에 여러 개의 달력창을 사용하는데 각각 또는 일부 달력창에는 다른 형태의 설정 값을 적용해서 사용하고 싶은 경우에는 배열 변수를 필요한 만큼 생성해서 서로 다른 설정을 정의한 후 필요한 달력 창에 적용해주면 됩니다.

예를 들어 var datepicker_set1 변수를 하나 생성하고 새로운 달력창(end_dt)을 추가한 후 설정을 반영해보도록 하겠습니다. 날짜 구분을 사선으로 구분하는 설정입니다.

var datepicker_set1 = {

dateFormat: 'yy/mm/dd',

}

$("#end_dt").datepicker(datepicker_set1);

input 박스를 클릭해서 날짜를 입력 받으면 바로 확인 가능합니다.

이런 식으로 처음 작업해본 start_dt와는 다른 결과 값을 얻기 위해 별도의 설정 값 적용하는 것이 가능 합니다.

물론 변수를 생성해서 사용하는 것이 혼란스럽다면 아래처럼 값을 직접 입력해도 됩니다.

$("#end_dt").datepicker({dateFormat : ‘yy/mm/dd’});

2. 한글 사용

이번에는 datepicker 달력창에 한글을 사용하는 방법입니다.

한글 추가라고 해서 특별한 건 없고 지금까지 작업한 소스에 아래 설정을 추가해서 월과 요일을 한글로 변경할 수 있습니다.

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

브라우저에서 어떻게 나오나 확인해 보겠습니다.

입력한 값이 그대로 노출되기 때문에 수정이 필요하면 바로 고치면 됩니다.

이번에는 년과 월을 선택하는 방법을 변경하는 설정을 추가해 보겠습니다.

지금까지는 좌우측 끝부분에 있는 버튼을 이용해서 월을 이동하는 방식이었는데 셀렉트 박스로 년과 월을 변경하는 방법입니다.

아래에 있는 설정을 추가합니다. 물론 전체 또는 필요한 달력창만 설정이 반영하도록 할 수 있습니다.

changeXX라는 설정은 년월을 변경하겠다는 것이고 추가로 월의 값을 한글로 수정할 수 있도록 한글 월을 적어주도록 합니다.

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

monthNamesShort은 셀렉트 박스에서 보여주는 월 명칭입니다. 생략하면 기본값으로 영문이 나오게 됩니다. 값은 입력한 한글이 그대로 노출되니 필요에 따라 수정하면 됩니다.

년 또는 월을 선택하기위해 방형버튼을 여러 번 누르지 않고도 바로 선택을 할 수 있습니다.

3. 버튼 추가

달력창을 보다 유용하게 사용하고 커스터마이징을 하는 방법으로 하단에 버튼을 추가해서 작업을 할 수 있습니다.

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

이 설정은 달력창 아래에 버튼을 추가하도록 하며 버튼의 기본 값은 영문으로 current와 close로 나오는데 이를 한글로 변경해서 볼 수 있습니다.

[이번달] 버튼은 다른 년 월을 선택했다가 다시 현재의 날짜로 돌아오려는 경우 사용하는 버튼입니다.

[닫기] 버튼은 그냥 달력창을 닫기만 하는 용도인데 내부적으로 함수를 가지고 있습니다. 만약 다른 기능을 추가하려면 아래와 같이 함수에 기능을 추가 해서 사용이 가능 합니다.

여기서는 선택한 값을 alert으로 나오도록 하는 단순 작업인데 필요에 따라 복잡하게 하면 되겠죠.

onClose: function(dateText, inst ) {

alert(dateText);

}

[닫기] 버튼을 클릭해 볼까요?

좀더 많은 내장된 함수와 기능들은 홈페이지를 방문하면 찾아볼 수 있습니다.

https://jqueryui.com/datepicker/

소스도 공개되어 있고 API documentation에 가면 다양한 기능 목록을 확인할 수 있습니다.

지금까지 작업한 전체 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

var startDate = "";

var endDate ="";

$(document).ready(function () {

$.datepicker.setDefaults({

dateFormat: 'yy-mm-dd',

monthNames: ['1월(JAN)','2월(FEB)','3월(MAR)','4월(APR)','5월(MAY)','6월(JUN)',

'7월(JUL)','8월(AUG)','9월(SEP)','10월(OCT)','11월(NOV)','12월(DEC)'],

dayNamesMin: ['일','월','화','수','목','금','토'],

});

$("#start_dt").datepicker();

var datepicker_set1 = {

changeMonth: true,

changeYear: true,

monthNamesShort: ['1월','2월','3월','4월','5월','6월',

'7월','8월','9월','10월','11월','12월'],

showButtonPanel: true,

currentText: "이번달",

closeText: '닫기',

}

$("#end_dt").datepicker(datepicker_set1);

});

</script>

</head>

<body>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

java.util.zip.ZipEntry 이용하여 압축 파일 생성하기 (0)	2024.05.30
Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
HTML form tag에서 value text 가져오기 정리 (0)	2024.01.17
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01

이번 프로젝트는 화면을 JSP로 구현하는 사이트에서 일을 하게 되었습니다. form:form tag도 있지만 예전 방식을 사용하는 곳이라 값을 가져오는 방법에 대해서 정리를 해보았습니다. tag들이 여러 개지만 가장 많이 사용하는 것을 기존으로 정리해봅니다.

value 또는 text를 가져오는 방법과 id, class, name으로 가져오는 방법을 정리했습니다.

설명은 필요 없을 듯 하여 그냥 소스와 결과만 기록 합니다.

예제로 사용한 form 태그의 모습입니다.

1. input tag

- input 사용 방법

- input value 가져오기

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

- input 결과

input val : ss12/ss12/ss12

2. textarea

- textarea 사용 방법

- textarea value 가져오기

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

- textarea 결과

textarea val : text0

area0/text0

area0

3. select

- select 사용 방법

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

- select value 가져오기

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

- select text 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

Select value : s2/s2/s2

Select text : select2/select2/select2

4. radio

- radio 사용 방법

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

- radio value 가져오기

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

- radio 결과

Radio value : radio2/radio2/radio2

5. checkbox

- checkbox 사용 방법

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

- checkbox value 가져오기

두가지 방법

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

- checkbox 결과

Checkbox value : chk01, chk03

Checkbox value : chk01,chk03

web 화면과 console 결과화면 입니다.

전체 소스

<head>

<title>form value</title>

</head>

<body>

<table>

<tr>

<td>Input </td>

</tr>

<tr>

<td>Textarea </td>

</tr>

<tr>

<td>Select</td>

<td>

<option value="s1">select1</option>

<option value="s2">select2</option>

<option value="s3">select3</option>

</select>

</td>

</tr>

<tr>

<td>Radio</td>

<td>

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio1"> radiooo

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio2"> radiiii

<input type="radio" name="ra_name" class="ra_class" id="ra_id" value="radio3"> raddddd

</td>

</tr>

<tr>

<td>Checkbox</td>

<td>

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk01">Check01

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk02">Check02

<input type="checkbox" name="chk_name" id="chk_id" class="chk_class" value="chk03">Check03

</td>

</tr>

<tr>

</tr>

<tr>

<td><button onclick="btnClick();"> button </button></td>

</tr>

function btnClick() {

//id 로 값 가져오기

var inputId = $('#input_id').val();

//class 로 값 가져오기

var inputClass = $('.input_class').val();

//name으로 값 가져오기

var inputName = $('input[name=input_name]').val();

console.log("input val : " + inputId +"/"+ inputClass +"/"+ inputName);

//id 로 값 가져오기

var textareaId = $('#textarea_id').val();

//class 로 값 가져오기

var textareaClass = $('.textarea_class').val();

//name으로 값 가져오기

var textareaName = $('textarea[name=textarea_name]').val();

console.log("textarea val : " + textareaId +"/"+ textareaClass +"/"+ textareaName);

//id 로 값 가져오기

var selectId = $('#sel_id').val();

//class 로 값 가져오기

var selectClass = $('.sel_class').val();

//name으로 값 가져오기

var selectName = $("select[name='sel_name']").val();

console.log("Select value : " + selectId +"/"+ selectClass +"/"+ selectName);

//text값 가져오기

//id 로 값 가져오기

var selIdTxt = $("#sel_id option:selected").text();

//class 로 값 가져오기

var selTxt = $(".sel_class option:selected").text();

//name으로 값 가져오기

var selNameTxt = $("select[name='sel_name'] option:selected").text();

console.log("Select text : " + selTxt +"/"+ selIdTxt +"/"+ selNameTxt);

//id 로 값 가져오기

var radioId = $("#ra_id:checked").val();

//class 로 값 가져오기

var radioClass = $('.ra_class:checked').val();

//name으로 값 가져오기

var radioName = $("input[name='ra_name']:checked").val()

console.log("Radio value : " + radioId +"/"+ radioClass +"/"+ radioName);

// checkbox

var value_Store = [];

$.each($("input[name='chk_name']:checked"), function() {

value_Store.push($(this).val());

});

console.log("Checkbox value : " + value_Store.join(", "));

value_list = []

$("input[name='chk_name']:checked").each(function(){

var checked_value = $(this).val();

value_list.push(checked_value)

});

console.log("Checkbox value : " + value_list);

}

</script>

</body>

</html>

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

Java JDBC Batch 프로그램 sample (0)	2024.03.04
HTML form tag 값 설정하기 정리 (0)	2024.01.28
[Java] stream과 filter 이용 List, Map 에서 필요 데이터 추출 (0)	2022.10.01
java 폴더와 파일 목록 출력 (2)	2022.08.29
삼항 연산자, 조건 연산자, 물음표(?) 조건문 정리 (0)	2022.04.27

jquery validation 라이브러리를 사용하여 form에 입력하는 값에 대한 유효성을 검사할 수 있습니다. 사용방법도 매우 간단하여 rules과 messages만 설정해 주면 쉽게 적용이 가능 합니다

maven을 이용하지 않거나 추가적인 정보는 제작 사이트에 방문해서 자료를 찾을 수 있습니다.

https://jqueryvalidation.org/

pom.xml에 다음을 추가 합니다.

<groupId>org.webjars</groupId>

<artifactId>jquery-validation</artifactId>

</dependency>

추가한 라이브러리는 Maven > Update Project를 해서 반영해 줍니다.

jQuery Validation

jQuery Validation의 구조는 매우 간단 합니다.

$("form selector").validate({

rules : { ... },

messages : { ... }

});

이렇게 rules, messages로 구성이 되어 있습니다.

rules를 이용하는 방법은 input 항목의 name 속성 값을 이용하여 설정을 진행하며

- 설정하려는 값이 하나이면

name속성 값 : "required"

- 설정하려는 값이 두개 이상 이면

name속성 값 : {

required : true,

digits : true

}

이렇게 {}로 묶어서 설정 합니다.

messages를 이용하는 방법도 input 항목의 name 속성 값을 이용하여 설정을 진행하며

- 설정하려는 값이 하나이면

name속성 값 : : "필수 입력 항목 입니다."

- 설정하려는 값이 두개 이상 이면

name속성 값 : {

required : "필수 입력 항목 입니다.",

digits : "숫자만 입력하세요."

}

이렇게 {}로 묶어서 설정 합니다.

이렇게 rules, messages가 쌍으로 구성되어 있습니다. 물론 messages를 작성하지 않아도 되는데 단점은 유효성 검사 결과를 영문으로 보여주기 때문에 영문으로 하지 않으려면 한글로 messages를 입력 해줘야 합니다.

적용 예)

$("form selector").validate({

rules : {

name속성 값 : "required",

name속성 값 : {

required : true,

digits : true

}

},

messages : {

name속성 값 : "필수 입력 항목 입니다.",

name속성 값 : {

required : "필수 입력 항목 입니다.",

digits : "숫자만 입력하세요."

}

});

이제 실제 적용을 하려는 화면 쪽 설정을 알아 봅니다.

먼저 maven에 추가한 라이브러리를 추가해 주고

form에 대한 유효성 설정을 진행 합니다.

//<![CDATA[

$(function() {

$("#memberadd").validate({

rules : {

username : "required",

name : "required",

password : "required",

repassword : "required",

mobile1 : {required : true, digits:true},

mobile2 : {required : true, digits:true},

mobile3 : {required : true, digits:true},

tel1 : {digits:true},

tel2 : {digits:true},

tel3 : {digits:true},

email : {email:true}

},

messages : {

username : "아이디는 필수 입력항목 입니다.",

name : "이름은 필수 입력항목 입니다.",

password : "비밀번호는 필수 입력항목 입니다.",

repassword : "비밀번호 확인은 필수 입력항목 입니다.",

mobile1 : "핸드폰은 필수 입력항목 입니다.",

mobile2 : "핸드폰은 필수 입력항목 입니다.",

mobile3 : "핸드폰은 필수 입력항목 입니다.",

email : "email 형식이 부정확 합니다."

}

});

//]]>

</script>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="text" class="form-control col-md-2" id="mobile1" name="mobile1" size="3">-

<input type="text" class="form-control col-md-2" id="mobile2" name="mobile2" size="4">-

</td>

</tr>

<tr>

<td align="right">email </td>

</tr>

<tr>

</tr>

</table>

</form>

</body>

Controller는 화면을 불러오도록 메소드를 하나 만들어 주고

@RequestMapping("/membercreate")

public String getMember( Model model){

return "/user/MemberCreate";

}

프로젝트를 실행을 해서 페이지를 불러옵니다.

jQuery Validation

이제 등록 버튼을 클릭해서 무슨 일이 벌어지는지 확인해 봅니다.

jQuery Validation

이렇게 입력 항목에 대한 검사를 해줍니다.

개인적인 생각은 그냥 사용 하기에는 쓸만 하겠지만 요청사항이 까다로운 사이트에서는 사용이 힘들지 않을까 생각 됩니다.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Java' 카테고리의 다른 글

Spring Boot Scheduler @Scheduled 이용한 Batch 작업 (0)	2020.05.02
[OAuth2] Unsupported grant type: password (0)	2020.04.17
JAVA substring split 특수문자 문자열 자르기 (0)	2020.03.15
Spring Security Login 화면 만들기 (4)	2020.02.24
Spring Security @PreAuthorize @Secured 사용법 (5)	2020.02.12

JQuery나 BootStrap을 제작사 홈페이지에서 다운로드 받아 추가하는 방법 이외에 Maven에 dependency로 script만 추가하여 주면 프로젝트에 추가를 할 수 있습니다. 스크립트는 일반 예제에서 복사해 와도 되지만 프로젝트 별로 사용할 버전을 선택 해야 하기 때문에 그냥 복사하기 보다는 공신력이 있는 사이트를 이용해서 참조를 하는것이 좋습니다. 여기서 2곳의 사이트를 소개합니다.

https://mvnrepository.com/

mvnrepository.com에서는 라이브러리를 검색을 통하여 찾을 수 있습니다.

maven jquery bootstrap

귀찮기는 하지만 검색을 하면 버전 별로 정보가 리스트 되고 리스트에서 원하는 버전을 선택 하면

maven jquery bootstrap

스크립트를 복사해올 수 있습니다. Gradle을 클릭 하면 Gradle용 스크립트가 나옵니다.

https://www.webjars.org/

webjars.org에서는 첫 화면에 자주 사용하는 라이브러리가 리스트 되어 있고 최신 버전으로 스크립트를 얻을 수 있습니다.

maven jquery bootstrap

만약 최신 버전이 아닌 예전 버전이 필요하다면 콤보 박스를 클릭하면 해당 라이브러지의 버전 정보가 리스트 되고 원하는 버전을 선택하여

maven jquery bootstrap

상단 Build Tool:에 있는 Maven 버튼을 선택하면 스크립트를 얻을 수 있습니다.

복사한 스크립트는 pom.xml에 추가를 해줍니다.

<groupId>org.webjars</groupId>

<artifactId>jquery</artifactId>

</dependency>

<groupId>org.webjars</groupId>

<artifactId>bootstrap</artifactId>

</dependency>

그리고 Maven Update와 Maven install을 하면 추가된 라이브러리를 jsp에 사용할 수 있게 됩니다.

js 파일 위치

추가한 라이브러리를 jsp에서 사용하기 위한 path는 어떻게 하면 알 수 있을까요? 추가된 라이브러리의 .jar 파일을 확장하면 정확한 js 파일 위치를 찾을 수 있습니다.

maven jquery bootstrap

이렇게 찾은 위치를 script에 반영하면 됩니다.

bootstrap도 동일한 방법으로 위치를 확인 합니다.

maven jquery bootstrap

그리고 스크립트에 반영 합니다. bootstrap은 기본 제공 css를 사용하려면 css와 js를 모두 반영합니다.

사용 예

간단하게 JSP파일을 생성해서 잘 반영이 되었는지 사용을 해 봅니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"

pageEncoding="EUC-KR"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<tr>

<th>codeId</th>

<th>codeNm</th>

<th>codeDc</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

maven jquery bootstrap

잘 나오는 군요. bootstrap을 사용하면 디자인을 없이도 어느 정도의 퀄리티 있는 사이트 제작이 가능 합니다.

- copy coding -

저작자표시 비영리 변경금지 (새창열림)

'Framework' 카테고리의 다른 글

[Spring Boot] 모든 Database SQL 로그 출력 (0)	2020.04.11
Spring Boot (STS 3.9.11) SVN Subclipse 설치 사용 (2)	2020.03.04
[Spring Boot] Path with "WEB-INF" or "META-INF" (4)	2020.02.15
[Spring Boot] Security 사용 방법 (STS 4.5.1) (0)	2020.02.09
[Spring Boot STS 4.5.1] MyBatis Oracle 연동 (8)	2020.02.06

Copy Coding

jQuery

JQuery 이용 datepicker 사용방법 순차적 설명

'Java' 카테고리의 다른 글

HTML form tag에서 value text 가져오기 정리

1. input tag

2. textarea

3. select

4. radio

5. checkbox

'Java' 카테고리의 다른 글

Maven jQuery Validation 이용 form input 유효성 검사

'Java' 카테고리의 다른 글

[Maven] JQuery, BootStrap 추가 방법

https://mvnrepository.com/

https://www.webjars.org/

js 파일 위치

사용 예

'Framework' 카테고리의 다른 글

+ Recent posts

티스토리툴바