Datepicker 머티리얼 디자인 스타일 > 그누보드5 스킨

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

Datepicker 머티리얼 디자인 스타일 정보

레이아웃 Datepicker 머티리얼 디자인 스타일

첨부파일

jquery-ui.zip (105.0K) 968회 다운로드 2018-01-27 00:50:49

본문

1991275276_1516982072.3341.jpg1991275276_1516979021.3455.jpg1991275276_1516979024.1316.jpg1991275276_1516979025.9507.jpg

 

 

 

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

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

 

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">

 


<?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($){

 

 

 

 

4) datepicker 나만의 색상 일괄 적용하기

샘플 디자인 뿐 만 아니라 내가 원하는 색상을 손쉽게 적용가능합니다.

 

jquery-ui.css

/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */

#3f51b5    ->    #777777(원하는 색상코드)  일괄변경!


/* 해당 #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; }

 

 

 

--------------------------------------------------------------------------------------

 

 

 

 

datepicker.php는 샘플용으로 참고만 부탁드립니다.

자세한 내용은 아래 자세히 나와있어요^^

개발자가 아니라서 저도 잘은 몰라요..ㅎ

http://api.jqueryui.com/datepicker/

 

datepicker.php // 달력 기본형

datepicker2.php // 년월 셀렉트형

 

 

 

--------------------------------------------------------------------------------------

 

 

 

테스트는 크롬하고 ie9, 10, 11에서 해보았습니다.

모바일에서도 사용가능한 반응형입니다.(한줄 추가..ㅋ)

모바일은 480px 이하에서 좌우 중앙 정렬됩니다.

 

사용하시면서 css가 깨지거나 궁금한 부분이 있으시면

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

 

 

 

 

추천
19

댓글 전체

요일이 다음처럼 잘 안나타닙니다
그리고 오늘 날짜가 같은 배경색이 안나옵니다
어디를 수정하면 되는지요?

감사합니다
오...감사
또 감사,,,,,

저는 날짜 입력 팝업 달력이 않되어 날짜를 못입력 하면 다시 글쓰기 ....언제가는 되고.안되어.....
강제적으로 오늘날짜 넣고 저장// 팝업창이 뜨면 선택 수정......
...아하,,,,,,이제는 ,,,,짜증 해방,,,,

적용하니 

너무 잘됩니다.
감사 합니다......
전체 235 |RSS
그누보드5 스킨 내용 검색 레이아웃에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT