JQuery datepicker
프로그래밍/JavaScript·JQuery 2013. 2. 21. 10:22 |<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
.ui-datepicker {
font-family: 나눔고딕;
font-size: 10px;
padding: 10px;
width: 24em;
}
.ui-widget-header {
border-style: none;
background-image: url("");
background-color: rgb(255, 255, 255);
}
.ui-datepicker .ui-datepicker-title {
margin-top: 4px;
margin-bottom: 4px;
}
.ui-datepicker .ui-datepicker-prev SPAN {
margin-top: -3px;
margin-left: 10px;
}
.ui-datepicker .ui-datepicker-next SPAN {
margin-top: -3px;
margin-left: -36px;
}
.ui-datepicker TABLE {
margin-top: 8px;
}
.ui-datepicker TH {
font-family: dotum;
font-size: 12px;
font-weight: normal;
margin-top: 0.4em;
margin-bottom: 0.4em;
padding-bottom:0.4em;
background-color: rgb(244, 244, 244);
border-top-style: solid;
border-bottom-style: solid;
border-top-width: 1px;
border-bottom-width: 1px;
border-color: rgb(200, 200, 200);
}
.ui-datepicker TD A {
font-family: 나눔고딕;
font-weight: bold;
font-size: 10px;
text-align: center;
}
.ui-datepicker TD:first-child A {
color: #f00;
}
.ui-datepicker TD:last-child A {
color: blue;
}
.ui-widget-content .ui-state-default {
border-style: none;
background-image: url("");
background-color: rgb(255, 255, 255);
}
.ui-datepicker SELECT.ui-datepicker-month {
width: 20%;
font-family: 나눔고딕;
font-size: 11px;
text-align: center;
}
.ui-datepicker SELECT.ui-datepicker-year {
width: 30%;
font-family: 나눔고딕;
font-size: 11px;
text-align: center;
}
</style>
<script language="javascript">
$(document).ready(function() {
$('#testDate').datepicker({
monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
dateFormat: 'yymmdd', //형식(2012.03.03)
changeMonth: true,
changeYear: true,
showButtonPanel: true,
currentText: '오늘',
closeText: "X"
});
</script>
</head>
<body>
<input type="text" id="testDate" size="10" value="">
</body>
</html>