풍선도움말...

호가계부를 시작페이지로

은행 카드 증권 보험 부동산

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

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

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


호가계부 2022-12-06 09:51:01  


요즘은 모든 웹브라우저에서 제공해 주는 input type="date" 를 사용하는데 좋을것 같다.

<label for="start">Start date:</label>

<input type="date" id="start" name="trip-start" value="2022-12-06" min="2021-01-01" max="2026-12-31">

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

[javascript] select potion 제어 변수들

  2022-10-17 호가계부 31
123  

[리눅스] gzip 압축풀기

  2022-09-17 호가계부 31
122  

[php] 날짜 계산 예제

  2022-07-25 호가계부 72
121  

[엑셀] 셀에 날짜 입력 단축키

  2022-06-30 호가계부 79
120  

[html5] 스마트폰 웹브라우저 상단바 없애는 방법

  2022-05-18 호가계부 107
119  

[html5] datalist 사용법

(1)
2022-02-03 호가계부 148
118  

[Android] android studio 설치 및 셋팅

(2)
2021-06-05 호가계부 595
117  

[MySql] 날짜 비교 검색 (오늘, 어제, 한달전...)

  2021-06-01 호가계부 1217
116  

phpMyAdmin 설치 및 오류 해결

(2)
2021-04-26 호가계부 31680
115  

MS 엣지 강력한 새로고침

(1)
  2020-11-12 호가계부 498
114  

cURL 사용법

(6)
  2020-05-16 호가계부 3247
113  

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

(1)
  2020-03-11 호가계부 719
112  

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

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

[Javascript] confirm 클릭 확인받기

  2019-10-09 호가계부 21914
110  

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

(1)
  2019-09-30 호가계부 110395
109  

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

  2019-09-27 호가계부 1733
108  

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

(1)
2019-09-23 호가계부 260414
107  

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

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

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

  2019-09-09 호가계부 4607
105  

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

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