[javascript] 날짜 입력받기 (input date 날짜 받기)
1. 간편하게 날짜를 입력 받는 방법
( 단, IE = 익스플로러에서 지원X)
<body>
<input type="date" id = "date"/>
<!-- <input type="color" id = "color"/> -->
<script>
$('#date').change(function (){
var date = $('#date').val();
alert(date);
});
</script>
</body>
See the Pen date-ie-nosupport by Nami (@NamuNami) on CodePen.
그러나 ... 애석하게도 익스플로러에서 지원을 안한다..... ㅠㅠ
출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
이곳에 가시면, IE도 지원하는 방식에 도와줄 수 있게 되어는 있습니다...
그렇다면, 두번째 방법....
2. datepicker 사용하기
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<input type="text" id="datepicker" placeholder="날짜넣기">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
</body>
결과 화면 (input 클릭하시면 이렇게 나옵니다.)
그러나 우리 앞으로 이렇게만 쓸거 아니자나요 몇가지 예제를 드립니다.
예를들어서 , 오늘 날짜 지정이 필요할 때, 특정날짜가 필요한 경우 , 날짜를 더하는 경우
2 - 1 오늘 날짜 사용하기
<input type="text" id="datepicker_init_day" placeholder="초기날짜">
$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', new Date); // 오늘 날짜 넣기
2 - 2 특정 날짜 사용하기
<input type="text" id="datepicker_special_day" placeholder="특정날짜">
$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', '2018-12-25'); //특정 날짜 넣기
2 - 3 날짜를 더해서 넣기
<p><label> 3일후 날짜 </label><input type="text" id="datepicker_add_day" placeholder="3일후 날짜"></p>
var today = new Date(); // 오늘날짜가 만들어진다.
console.log('오늘 날짜 => ' + today );
today.setDate( today.getDate() + 3 ); // 3일을 더하기
console.log('3일 후 날짜 => ' + today );
$("#datepicker_add_day").datepicker();
$("#datepicker_add_day").datepicker('setDate', today);
결과 화면
See the Pen date-datepicker by Nami (@NamuNami) on CodePen.
전체 테스트 코드
'[javascript]' 카테고리의 다른 글
| jsp servlet(서블렛)를 통한 ajax, object 편 (0) | 2018.04.21 |
|---|---|
| [javascript] 자바스크립트 셀렉트(select) 초기화 , 넣기 , 빼기 , 값읽기 (0) | 2018.04.20 |
| [javascript] 자바스크립트 배열(Array) 문자 , 숫자 , 날짜 정렬(Sort)하기 (0) | 2018.04.17 |
| [javascript] 자바스크립트 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유 (0) | 2018.04.17 |
| [javascript]자바스크립트 object,Object.keys(),Object.values() 다루기 (0) | 2018.04.16 |
미나미나미