JQuery UI - Datepicker

Programming/JavaScript, Sencha

JQuery UI - Datepicker

파란크리스마스 2017. 4. 9. 18:57

출처 : Datepicker | jQuery UI
JQuery UI datepicker 한국어 적용 - 제타위키

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css"/>">
<title>Insert title here</title>
<script>
// Datepicker 오늘 날짜 설정
function setDatepickerToday(datepicker) {
	var d = new Date();
	datepicker.datepicker("setDate", new Date(d.getFullYear(), d.getMonth(), d.getDate()) );
}

// 한글화 설정
$.datepicker.setDefaults({
	dateFormat: 'yy-mm-dd',
	prevText: '이전 달',
	nextText: '다음 달',
	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: ['일', '월', '화', '수', '목', '금', '토'],
	showMonthAfterYear: true,
	yearSuffix: '년'
});

$( function() {
	// datepicker 생성
	$( "#datepicker" ).datepicker({
		// 날짜를 선택했을 경우 이벤트 발생
		onSelect: function (dateText, inst) {
			alert('날짜선택 = ' + dateText);
		}
	});
	
	// 오늘 날짜 설정
	setDatepickerToday($( "#datepicker" ));
});
</script>
</head>
<body>
 
<p>날짜 : <input type="text" id="datepicker"></p>

</body>
</html>

저작자표시