[jQuery] jQuery UI datepicker 옵션 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

[jQuery] jQuery UI datepicker 옵션

페이지 정보

본문

옵션 설명 사용예
altField $( ".selector" ).datepicker({
    altField: ".selecter"
});
선택한 날짜가 해당 폼에 입력된다.
altFormat $( ".selector" ).datepicker({
    altFormat: "yyyy-mm-dd"
});
altField의 폼에 입력될 날짜의 형식
beforeShow $( ".selector" ).datepicker({
    beforeShow: function(input, inst) {
        // input은 폼
        // inst는 datepicker의 여러 값이 있던데
        //          아직 쓸모를 찾지 못했다.
    }
});
달력이 그려지기 전에 처리할 일들을 지정할 수 있다.
buttonImage $( ".selector" ).datepicker({
    buttonImage: "/images/datepicker.gif"
});
 
buttonImageOnly $( ".selector" ).datepicker({
    buttonImageOnly: true
});
 
buttonText $( ".selector" ).datepicker({
    buttonText: "선택"
});
 
changeMonth $( ".selector" ).datepicker({
    changeMonth: true
});
셀렉트박스로 월 변경 여부
changeYear $( ".selector" ).datepicker({
     changeYear: true
});
셀렉트박스로 연도 변경 여부
closeText

$( ".selector" ).datepicker({
    closeText: "닫기"
});

 

constrainInput $( ".selector" ).datepicker({
    constrainInput: false
});
형식외 텍스트 입력제한. 디폴트 true
currentText

$( ".selector" ).datepicker({
    currentText: "Now" 

});

 
dateFormat $( ".selector" ).datepicker({
    dateFormat: "yy-mm-dd"
});
 
dayNames $( ".selector" ).datepicker({
    dayNames:
        [ "일요일", "월요일", "화요일", "수요일",
        "목요일", "금요일", "토요일" ]
});
 
dayNamesMin $( ".selector" ).datepicker({
    dayNamesShort:
        [ "S", "M", "T", "W", "T", "F", "Sa" ]
});
 
dayNamesShort $( ".selector" ).datepicker({
    dayNamesShort:
        [ "일", "월", "화", "수", "목", "금", "토" ]
});
 
defaultDate $( ".selector" ).datepicker({
    defaultDate: +7
});
달력 기본 출력될때 기준일. Date타입, 숫자, String 다 가능하다.
duration $( ".selector" ).datepicker({
    duration: "slow"
});
달력 나타나는 속도, "slow", "normal", "fast"
firstDay $( ".selector" ).datepicker({
    firstDay: 1
});
주의 시작일을 일요일로 하려면 0, 월요일은 1
gotoCurrent $( ".selector" ).datepicker({
    gotoCurrent: true
});
 
maxDate $( ".selector" ).datepicker({
    maxDate: "+1m +1w"
});
 
minDate $( ".selector" ).datepicker({
    minDate: new Date(2012, 1 - 1, 1)
});
 
monthNames $( ".selector" ).datepicker({
    monthNames:
        [ "1월", "2월", "3월", "4월", "5월", "6월",
        "7월", "8월", "9월", "10월", "11월", "12월" ]
});
 
monthNamesShort $( ".selector" ).datepicker({
    monthNamesShort:
        [ "Jan", "Feb", "Mar", "Apr", "Maj", "Jun",
        "Jul", "Aug", "Sep", "Okt", "Nov", "Dec" ]
});
 
nextText $( ".selector" ).datepicker({
    nextText: "차월"
});
 
numberOfMonths $( ".selector" ).datepicker({
    numberOfMonths: [ 2, 3 ]
});
여러개월 달력을 표시
onChangeMonthYear $( ".selector" ).datepicker({
    onChangeMonthYear: function(year, month, inst) {
        // year 년도 숫자
        // month 월 숫자
        // inst는 datepicker의 여러 값이 있던데
        //          아직 쓸모를 찾지 못했다.
    }
});
달력에서 연월을 셀렉트 박스로 바꿀 수 있을때 바꿀때 이벤트
onClose $( ".selector" ).datepicker({
    onClose: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데
        //          아직 쓸모를 찾지 못했다.
    }
});
 
onSelect $( ".selector" ).datepicker({
    onSelect: function(dateText, inst) {
        // dateText는 날짜 스트링
        // inst는 datepicker의 여러 값이 있던데
        //          아직 쓸모를 찾지 못했다.
    }
});
 
prevText $( ".selector" ).datepicker({
    prevText: "전월"
});
 
selectOtherMonths $( ".selector" ).datepicker({
    selectOtherMonths: true
});
다른 달도 출력시 선택가능 여부. 디폴트는 false
showAnim $( ".selector" ).datepicker({
    showAnim: "fold"
});
달력 에니메이션 효과. show(디폴트), slideDown, fadeIn etc..
showCurrentAtPos $( ".selector" ).datepicker({
    showCurrentAtPos: 3
});
여러 달의 달력을 한꺼번에 띄울 경우 시작월을 현재를 기준으로 달 수.
0이 현재월. -5면 5개월 전, 3이면 3개월 후
showOptions $( ".selector" ).datepicker({
    showOptions: { direction: "up" }
});
달력 보여줄때 이벤트 옵션
showOtherMonths $( ".selector" ).datepicker({
    showOtherMonths: true
});
월 1일 이전, 월 말일 이후 빈칸에 이전달, 다음달 날짜 출력 여부
showWeek $( ".selector" ).datepicker({
    showWeek: true
});
주수 출력 여부
stepMonths $( ".selector" ).datepicker({
    stepMonths: 3
});
달력에서 좌우 선택시 이동할 개월 수
weekHeader $( ".selector" ).datepicker({
    weekHeader: "주"
});
 
yearRange $( ".selector" ).datepicker({
    yearRange: "2010:2013"
});
연도 범위
yearSuffix $( ".selector" ).datepicker({
    yearSuffix: "년"
});
 
추천0

댓글목록

등록된 댓글이 없습니다.

Total 825건 6 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
700 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20964 0 08-25
699 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14777 0 11-26
698 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17968 0 01-04
697 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15295 0 11-01
696 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16004 0 11-01
695 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 20918 0 08-07
694 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15356 0 05-31
693 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17818 0 10-06
692 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16704 0 10-06
691 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14297 0 01-08
690 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14516 0 08-31
689 메빅맨쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15312 0 09-19
688 디란도쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13187 0 11-09
687 창호지쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15065 0 11-14
686 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13932 0 11-17
685 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15589 0 02-08
684 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 13374 0 02-29
683 쎄엠쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15214 0 03-06
682 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17632 0 03-21
681 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16201 0 05-01
680 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 14281 0 05-07
679 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 18723 0 05-07
678 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15142 0 05-07
677 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 14800 0 05-07
676 포인트쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 15828 0 05-07

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
1,813
어제
4,822
최대
7,259
전체
1,330,304
Copyright (c) 株式会社YHPLUS. All rights reserved.