1 2 3 4 5 6 L

Page Header > Subtitle

날짜와 시간 입력을 도와주는 데이트 피커 15가지

사용자의 날짜와 시간을 입력할수있게 구현 가능한 데이트피커 15가지를 준비해봤습니다.

날짜면 달력을 시간이면 시계를 표시하는 등등 선택이 쉬운 옵션부터 단순한 외형에 구현까지
다향하게 준비해봤습니다.

 

예전에  jQuery를 사용하는 환경에서 데이트 피커라고하면  ” jQuery UI Datepicker ‘가 가장 많이 쓰였었죠~
옵션이 풍부해서 다양한 기능을 구현할 수 있어 많이들 사용했었는데

요즘은 색다른 옵션과 UI를 구현할수있는 다양한 jQuery플러그인들을 많이져서 소개해드리려고합니다!

jQuery Timepicker

f8c2f3d5bf9e4b9222cc5ece024cacee.png
 

간단한 드롭 다운 외형 타임 피커를 구현할 수있는 jQuery 플러그인입니다.
기본적인 옵션은 갖추어져있으며, 텍스트 입력도 지원되고 있습니다.
또한 특징적인 기능의 하나로서, 예를 들어 “1656”를 입력하면 “04:56 PM”, “1 : 9 A”를 입력하면 “01:09 AM”등, 입력 한 내용을 변환하여 출력 해준다는 기능도 있습니다.

Timepicki v2.0

e8a94fd2103d92c5c16ca02cebf245d8.png
 

심플하면서도 가벼운 것이 특징 인 타임 피커 jQuery 플러그인입니다.
데모를 봐도 알 수 있듯이 간단한거 같지만 옵션은 대충 갖추어져있어 데모 사이트의 “Options”에서 각 옵션의 자세한 내용과 실제 적용했을 때의 움직임을 확인 수 있습니다.

jquery.timepicker

a89a68aa13c8fcc98f2140f5b78dd675.png
 

심플하면서도 가벼운 것이 특징 타임 피커에서 jQuery 플러그인입니다.
외형도 브라우저의 기본을 그대로 사용하는 느낌으로되어 있습니다 만, 이벤트 트리거와 현재 시간 가져 오기 포맷 선택 등 옵션은 여러가지 준비되어 있습니다.
또한 ” Datepair.js ‘라는 데이트 피커와 함께 사용하는 방법도 함께 소개되어 있습니다.

flatpickr

08d46238a1fdb87eac69bfad6d438fb5.png
 

jQuery와 Bootstrap 등은 사용하지 않고, 가벼운 데이트 피커를 만들고 싶다는 생각에서 만들어진 스크립트입니다.
경량 한편 단독으로 동작하는 것이 특징으로, 디자인도 심플해서 사용하기 쉽다고 생각합니다.
또한 간이적인 것이 있습니다 만, 디자인 테마도 일부 포함되어 있습니다.

Datepicker

269631c837d92f8bbff0d375832b5daa.png
 

간단한 데이트 피커를 구현할 수있는 jQuery 플러그인입니다 만,
옵션 및 방법은 풍부하게 준비되어있어 다양한 구현 할 수있습니다~

Wickedpicker

d92dee793c4bbba9561cc613c1ac9aec.png
 

jQuery 플러그인 타임 피커입니다.
단순 경량이 특징이 있으며,이 플러그인은 텍스트를 직접 입력하는 수없다는게 단점이네요..

Bootstrap Material DatePicker

902ea9de9b591a3d7e2125e1fb9cc75d.png
 

스크립트 이름에있는 것처럼 Bootstrap을 위해 만든 데이트 피커, 하지만 없이도 사용할 수있는 것으로되어 있습니다.  날짜와 시간을 모두 입력에 대응하고 각 달력과 시계가 표시되도록되어 있습니다.

Material-datetime-picker

279830d8289d63cbc4dd195c77597ce0.png
 

날짜 달력 시간은 시계가 각각 표시되도록되어 있습니다.

mdPickers

aed43f76b5f4383bc0e0d80cf850d743.png
 

소재 디자인의 데이트 타임 피커입니다.
구현을 위해 “moment.js」 「AngularJS” “Angular Material”등이 필요합니다.

timedropper

7afcea9ec453f53632e8c87a2f48a592.png
 

특징적인 UI 타임 피커를 구현할 수있는 jQuery 플러그인입니다.
숫자를 입력하는 타입이 아니라 선택기를 클릭 · 터치하면서 조작하는 것으로 시간이 변화 해 나가는 것입니다.

jQuery Time Autocomplete

23598b2fad4b6ab5bef7377a2bcefd49.png
 

시간을 선택하는 간단한 드롭 다운을 구현할 수있는 jQuery 플러그인 입니다~
드롭 다운에서 선택뿐만 아니라 일반 텍스트도 입력 할 수 있도록되어 있습니다.
또한 현재 시간 표시 및 형식 변경, 시간에 의해 AMPM를 자동으로 전환 기능도 구현되어 있습니다.

Pikaday

91b7386f9a41b5eefea2f42084c7147a.png
 

간단한 데이트 피커를 구현할 수있는 스크립트 옵션은 여러 가지가 경량화되어 있는것이 특징입니다.

DateTimePicker

93c7184aa6276de24689952fa379b076.png
 

날짜와 시간을 모두 지원하고있는 데이트 피커 jQuery 플러그인입니다.
데모를 보시면 알 수 있듯이 다양한 연출이 가능하게되어 있고, 옵션도 풍부하게 갖추어져 있습니다.

Rome

44f38e372d09a4d64adf7234ce005659.png
 

날짜와 시간을 모두 지원하고있는 데이트 피커입니다.
데모의 외형은 단순하지만 옵션 등이 풍부하게 있기 때문에 사용자에 따라 다양한 연출이 할 수있을 것입니다.

Air Datepicker

d054dfc5496613ef811cfd8e6d62b89d.png
 

어디에도 어울릴거 같은 심플한 디자인의 데이트 피커입니다.
데모의 많은 날짜를 선택하는 것으로되어 있습니다 만 시간의 선택도 가능하고, 옵션도 풍부하게 있습니다.

GitHub – t1m0n / air-datepicker 



[이 게시물은 관리자 님에 의해 2017-09-11 00:05:39 Tiptech 에서 이동됨]
0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

HTML/CSS

번호 제목 글쓴이 날짜 조회수
8 [CSS] nth-child (n번째 부터 n번째 까지 css적용) 미도어묵 11-24 881
7 유튜브 동영상 반응형으로 넣기 미도어묵 09-11 638
6 HTML5에서 다른 frame의 문서에 속한 객체 접근 방법 미도어묵 07-29 629
5 table등의 null 값에 특정값 삽입 css 미도어묵 12-29 304
4 CSS로 글자 자르기 - 한 줄, 여러 줄 관리자 05-22 317
3 CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 관리자 05-22 324
2 날짜와 시간 입력을 도와주는 데이트 피커 15가지 관리자 04-25 397
1 버튼디자인 및 오버효과를 간편하게 줄수있는 bttn.css 관리자 04-25 279