[웹] 데이트 피커 추가 [nice-date-picker js] [달력추가]

 

 

크롬(crome)이나 파이어 폭스(firefox)에서는 달력을 사용하려면 

 

input의 type속성을 지정해주면 쉽게 사용할 수 있다.   

 

 [ex) <input type="date"/>]

 

 

 

 

 

크롬( crome )

 

 

파이어 폭스( firefox )

 

하지만 인터넷 익스플로러에서는 <input type="date"/>를 지원하지 않기때문에 커스텀 데이트

 

피커를 추가해야 달력을 쓸 수 있다.

 

커스텀 데이트 피커 중에 nice-date-picker을 사용하기로 했다.

 

 

Nice-Date-Picker 오픈소스

 

https://www.npmjs.com/package/nice-date-picker

nice-date-picker

 

Nice-Date-Picker 오픈소스 (적용하기 전, 적용된 예제를 볼수 있다.) (당연 무료다.)

 

https://olliesk8.github.io/niceDatePicker/https://olliesk8.github.io/niceDatePicker/

 

 

 

- 적용방법.

 

1. 다운받은 Nice-Date-Picker 폴더를 프로젝트에 추가

 

 

 

2. css/js 파일을 연결 

 

<link rel="stylesheet" href="../nice-date-picker.css">
<script src="../nice-date-picker.js"></script>

 

3

3. 자바스크립트로 예제 실행

 

new niceDatePicker({
   dom:document.getElementById('calendar1-wrapper1'),
   onClickDate:function(date){
       document.querySelector('.calendar1-msg').innerHTML='calendar1 your selected '+date;
   }
});

 

new niceDatePicker({
    dom:document.getElementById('calendar1-wrapper2'),
    year:2017,
    month:5,
    mode:'en',
    onClickDate:function(date){
        document.querySelector('.calendar2-msg').innerHTML='calendar2 your selected '+date;
    }
});

사

 

그리고 용도에 맞게 수정해 쓰면 된다.

 

 

 

적용화면.

 

-- 인터넷 익스플로러에서는 <input type="date"/>를 지원하지 않는다는 것을 보고, 마이크로 소프트가 브라우저 시장은 포기했다는 느낌이 들었다. 이뿐만 아니라 크롬, 파이어폭스는 UI도 세련되고 업데이트도 자주하고 지원하는 많은 기능들이 있는데 인터넷 익스플로러는 이제 사용하는 사람이 아주 적지 않을까?