• 분류 전체보기 (160)
    • 개인프로젝트 (5)
      • 시연영상모음 (4)
      • 주저리주저리.. (1)
    • 자바스크립트이야기 (69)
      • ExtJS (30)
      • ExtJS 유의사항 (3)
      • HTML5 (1)
      • jQuery (17)
      • jQuery플러그인소개 (9)
      • jQuery UI 소개 (9)
    • 스프링연동하기 (23)
      • spring3 mvc 설정 (4)
      • spring3 mybatis 설정 (4)
      • spring3 기타설정 (11)
      • ibatis and mybatis (4)
    • DB (26)
      • MySQL vs MS-SQL vs O.. (5)
      • MySQL (10)
      • MSSQL (5)
      • Oracle (6)
    • 서버에웹환경구축하기 (13)
      • 1.VirtualBox+CentOS .. (5)
      • 2.JAVA(JDK) 설치 (1)
      • 3.Apache+Tomcat 설치 (3)
      • 4,SVN Server 설치 (1)
      • 5.마리아DB(MariaDB) 설치 (2)
      • 6.몽고DB(MongoDB)설치 (1)
    • 샘플소스 (14)
      • 샘플소스(JAVA) (7)
      • 샘플소스(JSTL) (4)
      • 샘플소스(jQuery/스크립트) (3)
    • 에디터연동 (5)
      • NAVER-스마트에디터 (4)
      • DAUM-다음에디터 (1)
    • 블로그팁 (3)
    • 디지털이야기 (2)
댓글
/54
2014. 6. 19. 18:33
jQueryUI에서 지원하는 달력 컴포넌트를 이용하여 TEXT태그에 값넣어보기

이번에는 datepicker를 이용하여  INPUT 태그에 연월일을 넣어보도록 하겠음


우선 text태그를 하나 넣어주고 직접 입력을 불가능하게 막아보도록 하자

readonly="readonly" 옵션을 주어서!! ㅎ


HTML코드

<input id="dateText" type="text" readonly="readonly" />

스크립트코드

$(function(){
		$( "#dateText" ).datepicker({
			//달력에 일자 선택시 text태그에 들어갈 연월일 포맷
		    dateFormat: 'yy-mm-dd',
		    // changeYear, changeMonth 을 true로 주면 연/월 부분을 
		    // selectbox로 날짜 이동가능
		    changeYear: true,
		    changeMonth: true
	     });
})


연월 selectbox를 만들기 싫으면 changeYear, changeMonth 옵션을 빼버리자~

기본적으로는 


$( "#dateText" ).datepicker({});


이런식으로만 줘도 잘 나옴..


실행화면


1. 초기화면


2. text태그 클릭화면


3. datepicker selectbox 선택


4. 지정하면 달력변경


5. 일자 클릭후 화면



참 간단하다 ㅋㅋㅋ

저작자표시 (새창열림)

'자바스크립트이야기 > jQuery UI 소개' 카테고리의 다른 글

모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자  (0) 2014.06.20
jQueryUI에서 제공하는 Accordion을 이용해보자  (0) 2014.06.20
jQueryUI를 이용하여 자동완성 구현하기(2) - Ajax 비동기통신  (7) 2014.06.19
jQueryUI를 이용하여 자동완성기능을 제작해보자 - (1)  (0) 2014.06.19
jQueryUI 시작하기 - 다운로드부터 버튼출력까지  (0) 2014.06.19

티스토리툴바