<!DOCTYPE html>
<!--head에 jquery에서 지원하는 달력위젯을 import한다-->
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<input type="text" id="date">
<script>
$("#date").datepicker();
</script>
</body>
</html>
[출력 결과]
datepicker 옵션 들
<script>
$("#date").datepicker({dateFormat: 'yy-mm-dd'});
</script>[출력 결과]
<script>
$("#date").datepicker({dateFormat: 'yy-mm-dd'
,changeYear: true //콤보박스에서 년 선택 가능
,changeMonth: true //콤보박스에서 월 선택 가능
});
</script>
[출력 결과]
이외에도
showOtherMonths: true //빈 공간에 현재월의 앞뒤월의 날짜를 표시
showMonthAfterYear: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:일년후) 오늘 날짜로 초기값 설정하기
$('#date').datepicker('setDate', 'today'); //(-1D:하루전, -1M:한달전, -1Y:일년전), (+1D:하루후, -1M:한달후, -1Y:일년후)
여러 날짜 UI 설정을 한 번에 적용하기
<script>
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
changeYear: true,
changeMonth: true
});
$("#date1").datepicker();
$("#date2").datepicker();
</script>
반응형
'기타 프로그램' 카테고리의 다른 글
| 윈도우10에서 Node.js&npm설치하기 (0) | 2021.07.05 |
|---|---|
| PHP 값 비교 함수 isset() vs empty() (0) | 2021.06.24 |
| [html] input text값 저장 안함/크롬창 자동완성 없애기 (0) | 2021.06.08 |
| 라즈베리파이 한글 보이게/ 한글 설치/ 한글 깨짐 해결 (0) | 2021.06.03 |
| 라즈베리파이 메뉴바(작업표시줄) 없애기 (0) | 2021.06.01 |
댓글