[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.

전체 테스트 코드


블로그 이미지

미나미나미

,