[javascript] 자바스크립트 날짜 입력받기 (input date 날짜 받기) , datepicker 사용법 정리, 익스플로러는 date 지원안해서 필요한 것

[javascript] 날짜 입력받기 (input date 날짜 받기)


1. 간편하게 날짜를 입력 받는 방법 
 ( 단, IE  = 익스플로러에서 지원X)  요것이 문제임.... 크롬에서는 정말 잘 됩니다.

 

html5에서 멋지게 지원하는 input=date 에서 

아직은 익스플로러 사용자가 많으니... 이걸 해결해야 하는데,

 

자바스크립트의 힘을 빌려봅니다.

 

날짜 부분이 많이 어렵더군요. 잘못하면 mysql에서 이상한 결과가 나와서 하루종일 삽질하기 일쑤입니다.

 

나날이 힘들어지지만, 하나씩 해결해가는 기쁨도 있습니다.

     
    

   크롬에선 이런식으로 나옵니다.

 

누르면 날짜를 선택할 수 있지요.
    

    

마이크로 소프트에서는 왜 지원을 안하는 것일까?

 

 

폐쇄성에서 아직도 못 벗어난 것일까? 그런 생각을 많이 해봤어요.



출처 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

이곳에 가시면, IE도 지원하는 방식에 도와줄 수 있게 되어는 있습니다...    

2. datepicker 사용하기

우리의 구원투수입니다. 류현진 같은 것이죠.

제이쿼리는 최신형을 링크를 거셔도 됩니다. 

 

https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

 

    

 

결과 화면 (input 클릭하시면 이렇게 나옵니다.)

그러나 우리 앞으로 이렇게만 쓸거 아니자나요 몇가지 예제를 드립니다. 


예를들어서 , 오늘 날짜 지정이 필요할 때, 특정날짜가 필요한 경우 , 날짜를 더하는 경우


2 - 1 오늘 날짜 사용하기

 

$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', new Date); // 오늘 날짜 넣기
2 - 2 특정 날짜 사용하기

$("#datepicker_init_day").datepicker();
$("#datepicker_init_day").datepicker('setDate', '2018-12-25'); //특정 날짜 넣기


2 - 3 날짜를 더해서 넣기 

    

 3일후 날짜 

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);