웹솔루션개발 26년 노하우! 해피CGI의 모든것

시작일과 종료일 범위 선택 기능이 강력한 Date Range Picker 입니다.싱글 달력으로도 이용이 가능 합니다.https://www.daterangepicker.com/#examples 페이지를 통해 구동되는 샘플들을 코드와 함께 확인이 가능 합니다. 각종 제공되는 옵션들도 https://www.daterangepicker.com/#options 페이지에서 같이 확인이 가능 합니다.

다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 달력 아이콘을 클릭하면, 위 그림 처럼 날짜를 선택하는 달력이 화면에 표시가 됩니다. 달력의 년도-월 을 변경하거나, 시간을 선택하는 인터페이스는 아래와 같습니다. 달력을 사용하는 방법은 아래와 같습니다.

JavaScript 를 이용하여 단일 날짜 선택, 다중 날짜 선택을 지원하는 Datepicker 입니다. 특이사항은 여러가지 샘플을 제공해서 1개를 커스터마이징 하여 사용하기 보다는 자신에게 맞는 Picker 를 사용할 수 있습니다. 물론 자신에게 맞는 Picker 가 없다면 커스터마이징을 해야겠지요. 라이센스는 MIT 라이센스 입니다. 기본코드는 아래와 같은 형식으로 구성되어 있습니다. demo.js 를 제공하여 index.html 파일은 여러가지 Picker 를 한번에 볼 수 있습니다. Picker 샘플은 아래와 같이 있고 다 소개해 드리기 보다는 대표적인 것들만 소개해 드립니다. 기본 Picker 다중선택 6개월 기간 제한 Picker 단일 켈린더에 범위 선택 Picker 2개의 켈린더에 범위 선택..

HTML5, CSS3 및 JavaScript 를 사용하여 간단한 다이얼 ui 제작이 가능합니다. 해당 사이트에는 소스에 대한 자세한 설명이 되어있습니다. 다이얼을 클릭하면 좌측에 번호가 입력됩니다. 다이얼 화면은 css 를 수정하여 직접 디자인이 가능합니다.