풍선도움말...

호가계부를 시작페이지로

은행 카드 증권 보험 부동산

     
My 즐겨찾기 수정
[무료]  오늘의 운세  /  바이오리듬
여기는 회원님이 직접 등록하신
즐겨찾는 사이트가 출력됩니다.
컴퓨터와 관련있는 모든 팁을 공유합시다.

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

호가계부|2019-09-23 09:50:35|조회 : 518
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 


번호 제             목 첨부 작 성 일 작성자 조회
112  

[엑셀] 셀을 클릭하면 설명 메시지를 팝업 시키는 방법

(1)
2019-11-07 호가계부 51
111  

[Javascript] confirm 클릭 확인받기

  2019-10-09 호가계부 162
110  

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

  2019-09-30 호가계부 336
109  

[javascript] window.open으로 오픈한 자식창에서 부모창 태그 ...

  2019-09-27 호가계부 288
108  

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

2019-09-23 호가계부 519
107  

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

(1)
  2019-09-11 호가계부 595
106  

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

  2019-09-09 호가계부 1161
105  

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

  2019-08-22 호가계부 457
104  

[Android] Chrome Custom Tabs 시작하기

(2)
  2019-08-17 호가계부 790
103  

[Android] 상태바 없애기

2019-08-13 호가계부 612
102  

[Android] 타이틀바 없애기

2019-08-13 호가계부 631
101  

[Android] ERR_CLEARTEXT_NOT_PERMITTED 웹뷰 호출 에러

  2019-08-11 호가계부 916
100  

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

  2019-07-15 호가계부 1361
99  

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

  2019-07-07 호가계부 1529
98  

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

  2019-07-05 호가계부 1263
97  

textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바...

(1)
  2019-06-19 호가계부 1705
96  

javascript encodeURI -> php EUC-KR decode

(1)
  2019-06-18 호가계부 1463
95  

윈도우 창 단축키

  2019-06-07 호가계부 1303
94  

컴퓨터 종료시간 예약하기

2019-03-22 호가계부 2505
93  

말풍선 위치 계산 (마우스 포인터 위치계산)

  2019-01-14 호가계부 3600
처음으로 앞으로 | [1] 2 3 4 5 6 | 다음 마지막