시작페이지로 즐겨찾기추가
로그인
회원가입 l 출석체크 l 마이페이지 l CGIMALL
happycgi
자료실 사이트등록 랭킹100 프로그램리뷰 관리자추천자료 초보가이드
커뮤니티
전체 펼쳐보기
퀵메뉴링크 jquery , CSS , PHP , Javascript , 무료폰트 , ASP
상세검색
 > JAVASCRIPT > javascript 소스창고 > JQuery > JQuery 를 이용한 달력 레이어 Datepicker 상세정보
사이트등록
현재접속자 새로고침
JQuery 를 이용한 달력 레이어 Datepicker
소스통계정보 오류신고 및 문의
해피팀
네티즌
트위터로 보내기 페이스북으로 보내기 싸이월드 공감
소스분류 JQuery
다운로드 횟수 246 회
간단설명 간단한 소스만으로도 날짜를 적용할 수 있는 소스입니다.
평가하기 훌륭함 매우좋음 좋음 괜찮음 보통 별로
홈페이지바로가기 소스다운로드 데모 미리보기 스크랩하기
JQuery를 이용하여 Input 에 날짜를 입력할 수 있는 소스입니다.

기본적으로 영문으로 출력이 되지만 옵션을 설정하면 국내에 맞게 사용을 하실 수 있습니다.



이미지와 같이 기본형태로 출력이 되며 아래 소스를 이용하시면 됩니다.

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });

</script>

<p>Date: <input type="text" id="datepicker"></p>

 




이미지와 같이 한글로 출력이 되도록 할려면 소스의 가공이 필요하며 아래와 같이
추가를 하여 원하는 형태로 변경이 가능합니다.


 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
 $(function(){
  $.datepicker.regional['ko'] = {
  prevText: '이전달',
  nextText: '다음달',
  currentText: '오늘',
  closeText: '닫기',
  monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  dayNames: ['일','월','화','수','목','금','토'],
  dayNamesShort: ['일','월','화','수','목','금','토'],
  dayNamesMin: ['일','월','화','수','목','금','토'],
  dateFormat: 'yy-mm-dd',
  firstDay: 0,
  isRTL: false,
  showMonthAfterYear: true,
  yearSuffix: '년'};
  $.datepicker.setDefaults($.datepicker.regional['ko']);
  $( "#datepicker" ).datepicker();
 });
</script>

<p>Date: <input type="text" id="datepicker"></p>

 
옵션 설정은 http://api.jqueryui.com/datepicker/ 를 참고하시면 됩니다.



네티즌 의견   이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)
내용 아이디 의견남기기
등록된 의견이 없습니다.
1
이름
내용
:네맞아요: :화나는군요: :잠와: :우울해: :이건아냐: :왕하하: 왕웃음~ 놀램~
도배방지키
 47205055 보이는 도배방지키를 입력하세요.