반응형
Jquery 달력 - Datepicker
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
https://jqueryui.com/datepicker/
$(function() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd', // 날짜표현타입
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: true, //달력 이미지표시
buttonImage: '<?php echo _SITE_COMMON_LIB?>/script/images/calendar.gif', // 달력 이미지파일
buttonText: '날짜를 선택하세요', // 달력이미지에 마우스오버일경우
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
showOn: 'both', //엘리먼트와 이미지 동시 사용
showButtonPanel:true, // 캘린더 하단에 버튼 패널을 표시한다(오늘날짜로이동버튼, 닫기버튼).
currentText: '오늘', // 오늘날짜로이동되는 버튼의 텍스트 변경
showAnim: "slideDown", //애니메이션을 적용한다.
closeText: '닫기', // 닫기버튼의 텍스트 변경
// 연도 셀렉트 박스 범위(현재연도의 - + 20연도)
yearRange: (datepicker_year.getFullYear()-20) + ':' + (datepicker_year.getFullYear()+20),
//firstDay: 0, // 주의 시작일을 일요일로 하려면 0, 월요일은 1 (기본값 0)
//isRTL: false, // 버튼이미지 좌우 위치
cleanText: '지우기' //추가한 기능 jquery-ui.js 파일에 소스 추가해아한다.
});
});
반응형
'Program > Jquery' 카테고리의 다른 글
| Jquery HTML 속성 제어 (0) | 2019.10.08 |
|---|---|
| jquery.get (0) | 2017.08.23 |
| jquery mobile demo - Checkboxradio widget(체크박스, 라디오 위젯) (0) | 2015.03.13 |
| jquery mobile demo - Button widget(버튼 위젯) (0) | 2015.03.12 |
| jquery mobile demo - Buttons(버튼) (0) | 2015.03.05 |
댓글