[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type date datepicker)

html5 에서는 input 타입중에 date 타입을 지원해 주기때문에 날짜를 쉽게 입력할 수 있는 방법을 제공하고 있지만, 모픈 브라우저에서 적용이 되지 않고 있다.
그래서 다소 불편하지만 현재로서는 jQuery에서 제공하는 datepicker 기능을 사용하는게 도움이 된다.

jQuery에서 제공하는 css 와 js 파일을 다음과 같이 html 코드에 사입한다.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>

다음은 datepicker 설정이다.

<script>
$.datepicker.setDefaults($.datepicker.regional['ko']); //한국어 설정
$(function() {
    $('#아이디').datepicker({    // #input 태그 아이디와 동일해야 함. 여러개 구분사용 가능
        dateFormat:"yy-mm-dd",    // 날짜 출력폼 설정
        onSelect:function(d){    // 날짜가 선택되었을때 실행하는 함수
            alert(d);
        }
    });
});
</script>

다음은 실제 날짜를 입력받는 텍스트 입력 박스이다.

<input type="text" id="아이디" size="11" />

위의 코드를 html 파일에 삽입하면 위의 이미지처럼 기능을 사용할 수 있다.

TAG : input_type_date_datepicker

컴퓨터와 관련있는 모든 팁을 공유합시다.

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type date datepicker)

[윈도우] Windows에서 폴더의 내용을 텍스트 파일로 저장하는 방...

[php] 날짜 계산 예제

[html5] datalist 사용법

cURL 사용법

[Javascript] 숫자를 글자로 바꿔주는 자바스크립트

[HTML][CSS] 페이지 넘김 및 프린터 출력 여백 설정

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat...

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

CSS3 미디어쿼리 @media 규칙 이해.

[엑셀] 특정 자릿수 숫자 반올림

[Android] Chrome Custom Tabs 시작하기

Chrome 크롬 강력 새로고침 단축키

홈페이지(웹브라우저) 창 가로 세로 확인 방법

Html CSS 수직으로 중앙 정렬 하는 방법

[Javascript] 날짜 유효성 검사

CSS 반응형 레이아웃 만들기

홈페이지 팝업창 화면 가운데 출력하기

URL 최대길이

공공저작물 자유이용 사이트

저작권 문제없는 무료 이미지 사이트