매번 질문게시판을 통해 많은 도움을 받고 있습니다.
저도 아주 조금이나마 도움이 되고자 이렇게 글을 남깁니다.
Datepicker 머티리얼 디자인 스타일 UI입니다.
만들게 된 계기는
그누보드5를 사용하다가 datepicker가 정상적으로 작동이 되지 않아
(jquery-ui 구버전으로 인한 오작동 추측)
최신버전 jquery-ui.min.js를 받고 적용하면서
심심풀이로 datepicker에 디자인을 입혀보았습니다.
1. Datepicker 디자인 적용방법
1) jquery-ui.zip 압축 해제
2) plugin/jquery-ui 폴더에 덮어쓰거나, 복사(기존 파일 백업 권장)
아래 볼드처리한 css, js, image 가 필요합니다.
그외에 datepicker, datepicker2는 그냥 샘플용입니다.
- plugin/jquery-ui/jquery-ui.css // 디자인 적용 css
- plugin/jquery-ui/jquery-ui.min.js // 최신버전 jquery-ui
- plugin/jquery-ui/images // 추가 이미지
- plugin/jquery-ui/datepicker.php
- plugin/jquery-ui/datepicker2.php
3) 사용하시는 datepicker.php에서 css 및 js파일 경로를 잡아줍니다.
<script type="text/javascript" src="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.css">
[code]
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<script type="text/javascript" src="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="<?php echo G5_PLUGIN_URL ?>/jquery-ui/jquery-ui.css">
<script>
jQuery(function($){
[/code]
4) datepicker 나만의 색상 일괄 적용하기
샘플 디자인 뿐 만 아니라 내가 원하는 색상을 손쉽게 적용가능합니다.
jquery-ui.css
/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
#3f51b5 -> #777777(원하는 색상코드) 일괄변경!
[code]
/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
/* datepicker Style */
.ui-datepicker { width: 270px; padding: 0; display: none; border: 0; margin-top: 10px;}
.ui-widget.ui-widget-content { border: 0; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3) }
.ui-datepicker .ui-widget-header { position: relative; padding: 6px 0 36px 0; border: 0; background: #3f51b5; color: #fff; border-radius: 0; }
[/code]
--------------------------------------------------------------------------------------
datepicker.php는 샘플용으로 참고만 부탁드립니다.
자세한 내용은 아래 자세히 나와있어요^^
개발자가 아니라서 저도 잘은 몰라요..ㅎ
http://api.jqueryui.com/datepicker/
datepicker.php // 달력 기본형
datepicker2.php // 년월 셀렉트형
--------------------------------------------------------------------------------------
테스트는 크롬하고 ie9, 10, 11에서 해보았습니다.
모바일에서도 사용가능한 반응형입니다.(한줄 추가..ㅋ)
모바일은 480px 이하에서 좌우 중앙 정렬됩니다.
사용하시면서 css가 깨지거나 궁금한 부분이 있으시면
댓글 남겨주시면 아는 범위 내에서는 답변드리겠습니다^^
댓글 31개
공유 감사합니다 ^^
감사합니다.
감사합니다.
그리고 오늘 날짜가 같은 배경색이 안나옵니다
어디를 수정하면 되는지요?
감사합니다
[http://sir.kr/data/editor/1805/ce11b9166efa3e23a8f973c02476ed5c_1526480523_7348.png]
또 감사,,,,,
저는 날짜 입력 팝업 달력이 않되어 날짜를 못입력 하면 다시 글쓰기 ....언제가는 되고.안되어.....
강제적으로 오늘날짜 넣고 저장// 팝업창이 뜨면 선택 수정......
...아하,,,,,,이제는 ,,,,짜증 해방,,,,
적용하니
너무 잘됩니다.
감사 합니다......
3개월 달력으로 보기시 월별 겹치는 문제 어디를 수정 하면 되나요
정의 값을 부탁 드립니다.
촌시러운 달력 극복 감사합니다.
게시판 목록
그누보드5 스킨
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 2348 | 게시판 | 2년 전 | 3815 | ||
| 2347 | 게시판 | 2년 전 | 2226 | ||
| 2346 | 게시판 | 2년 전 | 4664 | ||
| 2345 | 최신글 | 2년 전 | 3147 | ||
| 2344 | 게시판 | 2년 전 | 1615 | ||
| 2343 | 게시판 | 2년 전 | 1795 | ||
| 2342 | 게시판 | 2년 전 | 1737 | ||
| 2341 | 게시판 | 2년 전 | 4467 | ||
| 2340 | 게시판 | 2년 전 | 1621 | ||
| 2339 | 게시판 | 2년 전 | 2570 | ||
| 2338 | 게시판 | 2년 전 | 1944 | ||
| 2337 | 레이아웃 | 2년 전 | 4662 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기