Datepicker 머티리얼 디자인 스타일

매번 질문게시판을 통해 많은 도움을 받고 있습니다.

저도 아주 조금이나마 도움이 되고자 이렇게 글을 남깁니다. 

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가 깨지거나 궁금한 부분이 있으시면

댓글 남겨주시면 아는 범위 내에서는 답변드리겠습니다^^