|
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
|
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="utf-8" />
<title>title</title>
<style type="text/css">
button.ui-datepicker-current,
button.ui-datepicker-trigger,
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.monthpicker = {
closeText: '닫기',
nextText : '다음 달',
prevText : '이전 달',
currentText : "오늘",
changeMonth : true,
changeYear : true,
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 : ['일', '월', '화', '수', '목', '금', '토'],
weekHeader : "주",
firstDay : 0,
isRTL : false,
showMonthAfterYear : true,
yearSuffix : "년",
showOn: 'both',
// buttonText: "달력",
showButtonPanel: true,
dateFormat: 'yy-mm',
yearRange: "-10:+0",
};
$.datepicker.setDefaults($.datepicker.monthpicker);
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));
}
$(".month_picker").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>
|
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({ |
|
| 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: "년" }); |
'퍼블리싱 > JS & JQ' 카테고리의 다른 글
| 패러미터값 없애기 (0) | 2019.04.25 |
|---|---|
| 패라미터 값으로 주소 변경 (0) | 2019.04.16 |
| animateNumber 사용시 소수점 사용 방법 (0) | 2019.04.03 |
| 오늘 하루 보지 않기 레이어 팝업 (1) | 2019.03.29 |
| "onclick"으로 "this"를 인식하는 방법 (0) | 2019.03.27 |