[펄스나인] 쉽게쓰는 UI/UX - Datepicker (한글달력) > 그누보드5 스킨

최신글 매뉴얼 FAQ
그누보드5
그누보드6
가이드
포럼
  • Q&A
  • 파이써니스타
  • 이슈
  • 버그신고
  • 사용후기
    • 자료실
  • 다운로드
  • 팁자료실
  • 스킨
  • 테마
  • 플러그인
    • Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    프로모션! 신용카드 결제수수료 2.9%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    강좌
    기타
    매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

    그누보드5 스킨

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

    [펄스나인] 쉽게쓰는 UI/UX - Datepicker (한글달력) 정보

    레이아웃 [펄스나인] 쉽게쓰는 UI/UX - Datepicker (한글달력)

    첨부파일

    datepicker.zip (3.1K) 638회 다운로드 2020-10-30 21:52:10 포인트 차감10
    테스트한 버전5.4.3
    호환 가능 버전버전 무관함

    본문

     

    작업중에 구현했던 부분 공유 드립니다~

     

    JQuery UI 에서 지원하는 Datepicker 의 한글적용 및

    스타일 변경입니다.

     

    첨부된 파일 압축푸셔서 index.php 파일 안의 내용 복붙 하시면 되겠습니다.

    편의상 style 은 문서안에 포함시켰고,

    JS 및 CSS 파일 호출되는 부분 아래에 style 넣어주시면 적용 됩니다.

     

    파일내 background-image: url('./btns.png'); 부분의 경로는

    style 이 들어가는 파일을 기준으로 변경해주시면 되겠습니다.

     

    샘플 Url 있습니다!

    감사합니다.

     

    크로스브라우징 : 익스11, 크롬, 엣지, 웨일

    추천
    36
    #PC용 #모바일용 #반응형

    댓글 전체

    서잰션 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.09 18:30:59
    안녕하세요!! 올려주신 달력을 잘 쓰고있었습니다!
    혹시 버튼클릭 말고 처음부터 화면에 나오게 할려고 하면 어떻게 해야하나요??
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.11.09 20:24:50
    간편한 방법으로
    input 에 autofocus 를 추가하시면 될거같습니다~

    <input type="text" name="test"  class="datepicker inp" readonly="true" autofocus  />

    페이지로드후 해당 input으로 자동 포커스되어
    datepicker 가 활성화 됩니다~
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 21.04.30 14:50:58
    현재날자로 세트 라는 말씀이 input에 오늘 날짜를 미리 넣어두는걸
    말씀하시는걸까요?

    value="" 에 오늘 날자를 넣어주시면 됩니다 ㅎ; 

    
<?php
$today = date("Y.m.d");
?>
<input type="text" value="<?php echo $today; ?>" name="">
    Willfor716 자기소개 아이디로 검색 전체게시물 회원게시물 21.06.25 17:59:15
    안녕하세요.
    날짜 설정해서 시작날짜 끝는 날짜 선택 후 클릭 버튼을 누르면
    그 값이 설정되어 mysql 값을 호출해서 보여지게 할려고 하는데

    설명처럼

    <!-- 적용은 input에 class="datepicker" 만 추가하시면 됩니다. { -->

    이렇게 나와있는데 이 부분을 어떻게 하면 되는건가요?

    도움부탁드립니다.

    값을 받는 곳은 이렇게 했습니다.

    FROM abc WHERE result_date BETWEEN '2021-06-15' AND '2021-06-25'";

    조언 부탁드립니다.
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 21.06.26 10:18:16
    input에 이벤트로 ajax로 처리하시거나

    <form>
        <input value="">
        <button type="submit">
    </form>

    형태로 파라미터로 값을 넘겨서 받아도 될거같습니다~

    class="datepicker" 는
    input에 클래스로 datepicker 만 추가하시면
    캘린더를 사용할 수 있다는 내용 입니다~
    Willfor716 자기소개 아이디로 검색 전체게시물 회원게시물 21.06.25 18:10:34
    안녕하세요.
    추가로 한가지 더 질문드립니다.
    처음 시작할때 설정값이 오늘 날짜로 설정되어
    첫 페이지 값이 오늘 날짜의 값으로 표시되게 하는 방법도 조언 부탁드립니다.
    Willfor716 자기소개 아이디로 검색 전체게시물 회원게시물 21.06.28 11:22:49
    안녕하세요.
    답변 너무 감사드립니다.
    그런데 제가 너무 초보라서 잘 안되네요.
    좀더 도움 부탁드립니다. 

    

<?php 
$username = "username"; 
$password = "password"; 
$database = "database"; 
$mysqli = new mysqli("localhost", $username, $password, $database); 
$query = "SELECT SUM(abc) FROM date_report WHERE result_date BETWEEN 'begin_date' AND 'end_date'";
?>

<form>
<div style="width:400px; margin:0 auto; margin-top:100px; text-align:center;">
<input type="text" name="begin_date" value="<?php echo $today; ?>" class="datepicker inp" placeholder="처음날짜" readonly="true" /> 
<input type="text" name="end_date" value="<?php echo $today; ?>" class="datepicker inp" placeholder="마지막날짜" readonly="true" />
</div>
<button type="submit">
</form>


    이렇게 만들었는 아래 이미지처럼 날짜는 오늘 현재 날짜로만 고정이 되고 db 값을 못가져 옵니다. ㅠㅠ
    그리고 확인하는 버튼 자체가 db 값을 가져오는 전체 테이블이 통으로 버튼이 됩니다. ㅠㅠ



    - 페이지 첫 오픈했을때 오늘 날짜로 db 값을 가져오기
    - 날짜 설정하면 설정하는 '처음날짜'부터 '마지막날짜' 기간동안 합계 값 가져오기
    - 날짜 설정시 과거 날짜가 설정이 안됩니다. 현재 또는 미래 날짜만 설정할 수 있습니다. 저는 과거 날짜 설정이 필요합니다.

    어떻게 하면 될까요?

    조언 부탁드립니다.
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 21.06.29 10:57:30
    value를 <?php echo $today; ?>로 넣으셔서 DB값을 못가져오는것입니다~
    begin_date 와 end_date 로 저장이 되는거같은데
    이 값을 value로 넣어주셔야 합니다~

    if 문을 사용해서 해당항목의 db에 값이 없을때
    echo $today 로 오늘 날짜를 넣어주는게 맞는거같습니다.

    예시)

    <?php
    if($row['begin_date'] == "") {
        echo $today;
    } else {
        $row['begin_date'];
    }
    ?>

    그리고 이전 날짜를 선택 할 수 있게 하시려면
    달력 스크립트 중

    $(".datepicker").datepicker({
          //minDate: 0
    })

    minDate: 0 부분을 위와같이 주석처리 해주시면 되겠습니다.

    그리고 나머지 부분은
    Q&A게시판이나 제작의뢰로 도움 받으시는것이 맞을것 같습니다 ^^

    감사합니다.
    펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 23.07.31 11:32:02
    선택된정보는 스크립트로 처리하시거나
    파라미터로 value 값을 넣어주셔도되고,,
    선택을 어떻게 하는지를 몰라서 명쾌한 답변이 안될것 같네요 ㅠ
    전체 2,434 |RSS
    그누보드5 스킨 내용 검색

    회원로그인

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