datepicker 년월
datepicker 중
년과 월을 선택하는 샘플입니다.
월일은 많은데 년월이 가끔 필요할때가 있어서 업로드합니다
[code]
<html>
<head><title>샘플</title>
<link href="./css/jquery-ui.css" rel="stylesheet" type="text/css">
<style>
#monthpicker {
width: 60px;
}
</style>
</head>
<body>
년월 <input id="monthpicker" type="text" /><br>
년월일 <input id="ymdpicker" type="text" class="input-date" />
<script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/jquery.mtz.monthpicker.js"></script>
<script>
$(function () {
/* MonthPicker 옵션 */
options = {
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2023,
startYear: 2023,
finalYear: 2030,
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월']
};
/* MonthPicker Set */
$('#monthpicker').monthpicker(options);
//모든 datepicker에 대한 공통 옵션 설정
$.datepicker.setDefaults({
dateFormat: 'yymmdd' //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: "-1M" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
//,maxDate: "+1M" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
$(".input-date").datepicker();
});
</script>
</body>
</html>
[/code]
댓글 4개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4426 | ||
| 2184 | 3년 전 | 3317 | ||
| 2183 | 3년 전 | 2458 | ||
| 2182 | 3년 전 | 4744 | ||
| 2181 | 3년 전 | 2332 | ||
| 2180 | 3년 전 | 2053 | ||
| 2179 | 3년 전 | 1874 | ||
| 2178 | 3년 전 | 3107 | ||
| 2177 | 3년 전 | 1880 | ||
| 2176 |
 Nikonikoni |
3년 전 | 2552 | |
| 2175 | 3년 전 | 1700 | ||
| 2174 | 3년 전 | 2696 | ||
| 2173 | 3년 전 | 2431 | ||
| 2172 | 3년 전 | 2372 | ||
| 2171 | 3년 전 | 3153 | ||
| 2170 |
와칸다포에버
|
3년 전 | 2096 | |
| 2169 | 3년 전 | 2904 | ||
| 2168 | 3년 전 | 2299 | ||
| 2167 | 3년 전 | 2715 | ||
| 2166 | 3년 전 | 1727 | ||
| 2165 |
 Dessi |
3년 전 | 2102 | |
| 2164 |
와칸다포에버
|
3년 전 | 2215 | |
| 2163 | 3년 전 | 3320 | ||
| 2162 | 3년 전 | 3918 | ||
| 2161 | 3년 전 | 3204 | ||
| 2160 | 3년 전 | 2345 | ||
| 2159 | 3년 전 | 6170 | ||
| 2158 | 3년 전 | 3315 | ||
| 2157 | 3년 전 | 3415 | ||
| 2156 |
멀티트리플
|
3년 전 | 1989 | |
| 2155 |
llllIlllIII |
3년 전 | 3111 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기