Google에 검색어 : "jquery datepicker range example" 치면 많이 나옴.
https://longbill.github.io/jquery-date-range-picker/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> table.ui-datepicker-calendar { display: none; } </style> </head> <body> <script> $(function () { //input을 datepicker로 선언 var datepicker_default = { closeText: '닫기', prevText: '이전달', nextText: '다음달', currentText: '오늘', dateFormat: 'yy-mm' //Input Display Format 변경 , showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시 , showMonthAfterYear: true //년도 먼저 나오고, 뒤에 월 표시 , changeYear: true //콤보박스에서 년 선택 가능 , changeMonth: true //콤보박스에서 월 선택 가능 , showOn: "both" //button:버튼을 표시하고,버튼을 눌러야만 달력 표시 ^ both:버튼을 표시하고,버튼을 누르거나 input을 클릭하면 달력 표시 , buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif" //버튼 이미지 경로 , buttonImageOnly: true //기본 버튼의 회색 부분을 없애고, 이미지만 보이게 함 , buttonText: "선택" //버튼에 마우스 갖다 댔을 때 표시되는 텍스트 , yearSuffix: "년" //달력의 년도 부분 뒤에 붙는 텍스트 , monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] //달력의 월 부분 텍스트 , monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'] //달력의 월 부분 Tooltip 텍스트 , dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'] //달력의 요일 부분 텍스트 , dayNames: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'] //달력의 요일 부분 Tooltip 텍스트 , minDate: "-10Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전) , maxDate: "+1D" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후) , showButtonPanel: true }; datepicker_default.closeText = "선택"; datepicker_default.onClose = function (dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker("option", "defaultDate", new Date(year, month, 1)); $(this).datepicker('setDate', new Date(year, month, 1)); } datepicker_default.beforeShow = function () { var selectDate = $("#sdate").val().split("-"); var year = Number(selectDate[0]); var month = Number(selectDate[1]) - 1; $(this).datepicker("option", "defaultDate", new Date(year, month, 1)); } $("#sdate").datepicker(datepicker_default); }); </script> <form name="frmEX"> 년-월 : <input type="text" name="sdate" id="sdate" size="7" maxlength="7" value="2018-10" /> <br /> 년, 월만 선택 할수 있도록 변경하였습니다. </form> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html lang="ko-KR"> <head> <meta charset="utf-8" /> <title>JavaScript Example : datepicker 년도와 월만 선택 하도록 하기</title> <style type="text/css"> table.ui-datepicker-calendar { display: none; } </style> </head> <body> <div id="document_wrap"> <div id="content_box"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <script> $(document).ready(function () { $.datepicker.regional['ko'] = { closeText: '닫기', prevText: '이전달', nextText: '다음달', currentText: '오늘', monthNames: ['1월(JAN)', '2월(FEB)', '3월(MAR)', '4월(APR)', '5월(MAY)', '6월(JUN)', '7월(JUL)', '8월(AUG)', '9월(SEP)', '10월(OCT)', '11월(NOV)', '12월(DEC)'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화', '수', '목', '금', '토'], dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'], dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'], weekHeader: 'Wk', dateFormat: 'yy-mm-dd', firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: '', showOn: 'both', buttonText: "달력", changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: 'c-99:c+99', }; $.datepicker.setDefaults($.datepicker.regional['ko']); var datepicker_default = { showOn: 'both', buttonText: "달력", currentText: "이번달", changeMonth: true, changeYear: true, showButtonPanel: true, yearRange: 'c-99:c+99', showOtherMonths: true, selectOtherMonths: true } datepicker_default.closeText = "선택"; datepicker_default.dateFormat = "yy-mm"; datepicker_default.onClose = function (dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker("option", "defaultDate", new Date(year, month, 1)); $(this).datepicker('setDate', new Date(year, month, 1)); } datepicker_default.beforeShow = function () { var selectDate = $("#sdate").val().split("-"); var year = Number(selectDate[0]); var month = Number(selectDate[1]) - 1; $(this).datepicker("option", "defaultDate", new Date(year, month, 1)); } $("#sdate").datepicker(datepicker_default); }); </script> <form name="frmEX"> 년-월 : <input type="text" name="sdate" id="sdate" size="7" maxlength="7" value="2018-10" /> <br /> 년, 월만 선택 할수 있도록 변경하였습니다. </form> </div> </div> </body> </html> | cs |
아래 출처 : http://www.unida.co.kr/bbs/board.php?bo_table=tip_script&wr_id=3
$(".datepicker").datepicker({
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: "년" }); |
등록된 댓글이 없습
아래 출처 : http://ellordnet.tistory.com/130
아래 그림처럼 query datepicker 에서 오늘 날짜 배경색을 다른 색으로 변경하기.
방식은 오늘 날짜에 적용할 스타일을 만들고 datepicker() 안에서 적용한다.
출처: http://ellordnet.tistory.com/130 [IT in MT]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 아래 그림처럼 query datepicker 에서 오늘 날짜 배경색을 다른 색으로 변경하기. 방식은 오늘 날짜에 적용할 스타일을 만들고 datepicker() 안에서 적용한다. <input type="text" name="date1" value="" readonly id="date1" required size="9" maxlength="8" placeholder="날짜선택"> 1. 스타일 추가 jquery-ui.css 파일에 아래 내용을 추가한다. jquery-ui.css 파일이 아니어도 상관없으며 datepicker가 사용되는 페이지에서 호출되는 css 파일이면 된다. /*아래는 추가할 내용*/ .Highlighted a{ background-color : #456baf !important; background-image :none !important; color: White !important; font-weight:bold !important; font-size: 12px; } 2. datepicker 수정 $(function(){ // 날짜 입력 var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; var yyyy = today.getFullYear(); if(dd < 10){ dd = '0'+dd } if(mm < 10){ mm = '0'+mm } today = yyyy+'/'+mm+'/'+dd; //오늘날짜 ex. 2016/11/12 var todaydate = [today]; //배열에 넣음 $("#date1").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yymmdd", minDate: 0, maxDate: '+1Y+6M', showButtonPanel: true, beforeShowDay: function(dateStr){ var dd = dateStr.getDate(); var mm = dateStr.getMonth()+1; var yyyy = dateStr.getFullYear(); if(dd < 10){ dd = '0'+dd } if(mm < 10){ mm = '0'+mm } date = yyyy+'/'+mm+'/'+dd; //jquery 달력의 날짜를 yyyy/mm/dd 형태로 만듬. var Highlight = todaydate[date]; //스타일을 적용할 날짜 if ($.inArray(date, todaydate) >= 0) { //jquery달력의 날짜가 오늘날짜와 같다면 return [true, "Highlighted", Highlight]; //스타일 적용 }else{ return [true, '', '']; } }, }); }); 출처: http://ellordnet.tistory.com/130 [IT in MT] | cs |
'제이쿼리' 카테고리의 다른 글
| jQuery에서 함수를 선언하는 5 가지 다른 방법 (0) | 2019.04.14 |
|---|---|
| Javascript : 함수(function) 다시 보기 (0) | 2019.04.14 |
| [Jquery UI] Datepicker 간단 사용법 (0) | 2018.10.03 |