showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다.
buttonImage: "/application/db/jquery/images/calendar.gif", // 버튼 이미지
buttonImageOnly: true, // 버튼에 있는 이미지만 표시한다.
changeMonth: true, // 월을 바꿀수 있는 셀렉트 박스를 표시한다.
changeYear: true, // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.
minDate: '-100y', // 현재날짜로부터 100년이전까지 년을 표시한다.
nextText: '다음 달', // next 아이콘의 툴팁.
prevText: '이전 달', // prev 아이콘의 툴팁.
numberOfMonths: [1,1], // 한번에 얼마나 많은 월을 표시할것인가. [2,3] 일 경우, 2(행) x 3(열) = 6개의 월을 표시한다.
stepMonths: 3, // next, prev 버튼을 클릭했을때 얼마나 많은 월을 이동하여 표시하는가.
yearRange: 'c-100:c+10', // 년도 선택 셀렉트박스를 현재 년도에서 이전, 이후로 얼마의 범위를 표시할것인가.
showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다.
currentText: '오늘 날짜' , // 오늘 날짜로 이동하는 버튼 패널
closeText: '닫기', // 닫기 버튼 패널
dateFormat: "yy-mm-dd", // 텍스트 필드에 입력되는 날짜 형식.
showAnim: "slide", //애니메이션을 적용한다.
showMonthAfterYear: true , // 월, 년순의 셀렉트 박스를 년,월 순으로 바꿔준다.
dayNamesMin: ['월', '화', '수', '목', '금', '토', '일'], // 요일의 한글 형식.
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'] // 월의 한글 형식.
});
옵션 | 설명 | 사용예 |
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({ |
|
constrainInput | $( ".selector" ).datepicker({ constrainInput: false }); |
형식외 텍스트 입력제한. 디폴트 true |
currentText |
$( ".selector" ).datepicker({ }); |
|
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: "년" }); |
'웹스토리 > Jquery,Js' 카테고리의 다른 글
외부 url을 호출하여 div에 넣기 (0) | 2013.07.23 |
---|---|
일정관리 달력 Jquery Plugin fullcalendar (1) | 2013.06.11 |
Jquery image gallery - AD Gallery (0) | 2013.05.27 |
텍스트 말줄임 (0) | 2013.05.09 |
ajax form 처리 (0) | 2013.04.30 |