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

그누보드5 스킨

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

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

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

첨부파일

datepicker.zip (3.1K) 594회 다운로드 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

댓글 전체

안녕하세요!! 올려주신 달력을 잘 쓰고있었습니다!
혹시 버튼클릭 말고 처음부터 화면에 나오게 할려고 하면 어떻게 해야하나요??
간편한 방법으로
input 에 autofocus 를 추가하시면 될거같습니다~

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

페이지로드후 해당 input으로 자동 포커스되어
datepicker 가 활성화 됩니다~
현재날자로 세트 라는 말씀이 input에 오늘 날짜를 미리 넣어두는걸
말씀하시는걸까요?

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


<?php
$today = date("Y.m.d");
?>
<input type="text" value="<?php echo $today; ?>" name="">
안녕하세요.
날짜 설정해서 시작날짜 끝는 날짜 선택 후 클릭 버튼을 누르면
그 값이 설정되어 mysql 값을 호출해서 보여지게 할려고 하는데

설명처럼

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

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

도움부탁드립니다.

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

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

조언 부탁드립니다.
input에 이벤트로 ajax로 처리하시거나

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

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

class="datepicker" 는
input에 클래스로 datepicker 만 추가하시면
캘린더를 사용할 수 있다는 내용 입니다~
안녕하세요.
추가로 한가지 더 질문드립니다.
처음 시작할때 설정값이 오늘 날짜로 설정되어
첫 페이지 값이 오늘 날짜의 값으로 표시되게 하는 방법도 조언 부탁드립니다.
안녕하세요.
답변 너무 감사드립니다.
그런데 제가 너무 초보라서 잘 안되네요.
좀더 도움 부탁드립니다.



<?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 값을 가져오기
- 날짜 설정하면 설정하는 '처음날짜'부터 '마지막날짜' 기간동안 합계 값 가져오기
- 날짜 설정시 과거 날짜가 설정이 안됩니다. 현재 또는 미래 날짜만 설정할 수 있습니다. 저는 과거 날짜 설정이 필요합니다.

어떻게 하면 될까요?

조언 부탁드립니다.
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게시판이나 제작의뢰로 도움 받으시는것이 맞을것 같습니다 ^^

감사합니다.
선택된정보는 스크립트로 처리하시거나
파라미터로 value 값을 넣어주셔도되고,,
선택을 어떻게 하는지를 몰라서 명쾌한 답변이 안될것 같네요 ㅠ
전체 2,423 |RSS
그누보드5 스킨 내용 검색

회원로그인

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