반응형
function setDatePicker(){
$("input.start_date").datepicker({
dateFormat: 'yy-mm-dd' //달력 날짜 형태
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
,changeYear: true //option값 년 선택 가능
,changeMonth: true //option값 월 선택 가능
,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: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
$("input.end_date").datepicker({
dateFormat: 'yy-mm-dd' //달력 날짜 형태
,showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
,showMonthAfterYear:true // 월- 년 순서가아닌 년도 - 월 순서
,changeYear: true //option값 년 선택 가능
,changeMonth: true //option값 월 선택 가능
,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: "-5Y" //최소 선택일자(-1D:하루전, -1M:한달전, -1Y:일년전)
,maxDate: "+5y" //최대 선택일자(+1D:하루후, -1M:한달후, -1Y:일년후)
});
$('.start_date').datepicker("option", "maxDate", new Date());
$('.end_date').datepicker("option", "minDate", $(".start_date").val());
$('.end_date').datepicker("option", "maxDate", new Date());
$("#end_date").on("change", function() { // sel02 정렬순서
$('.start_date').datepicker("option", "maxDate", $(".end_date").val());
$('.end_date').datepicker("option", "minDate", $(".start_date").val());
$('.end_date').datepicker("option", "maxDate", new Date());
});
$("#start_date").on("change", function() { // sel02 정렬순서
$('.start_date').datepicker("option", "maxDate", $(".end_date").val());
$('.end_date').datepicker("option", "minDate", $(".start_date").val());
$('.end_date').datepicker("option", "maxDate", new Date());
});
// $('#start_date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
// $('#end_date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
}
$(document).ready(function() {
setDatePicker();
})date.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<script type="text/javascript" src="./date.js"></script>
</head>
<body>
<div class="start">
<div class="date_picker">
<input class="start_date" type="text" id="start_date"
name="start_date" />
</div>
</div>
<div class="end">
<div class="date_picker">
<input class="end_date" type="text" id="end_date" name="end_date" />
</div>
</div>
</body>
</html>datepicker.html
반응형
'[JavaScript] > [jQuery Code]' 카테고리의 다른 글
| [jQuery Code] Ajax통신으로 체크된 체크박스값 보내기 (0) | 2022.03.19 |
|---|---|
| [jQuery Code] 제이쿼리 Ajax 기본 사용법 (0) | 2022.02.13 |
| [jQuery Code] 제이쿼리 click, hover, on (이벤트 리스너, 다중 이벤트 리스너) (0) | 2021.07.01 |
| [jQuery Code] 제이쿼리 애니메이션(Animation) 효과 주기 (animate) (0) | 2021.07.01 |
| [jQuery Code] 제이쿼리 동적으로 클래스(CLASS), 속성, CSS, 태그, 텍스트 추가, 삭제 및 읽기 (addClass, removeClass, attr, removeAttr, css, html, text) (0) | 2021.06.30 |