mindol1004/Blog_Project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Spring][쇼핑몰 프로젝트][18] 상품 등록 - 달력 위젯 적용

Browse Source 
https://kimvampa.tistory.com/194
This commit is contained in:
SeoJin Kim
2021-03-23 14:29:07 +09:00
parent 804616c615
commit 351ffa0888
4 changed files with 88 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
VamPa/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
View File

@@ -6,12 +6,14 @@
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../resources/css/admin/goodsEnroll.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
</head>
<body>
@@ -43,7 +45,7 @@
<label>출판일</label>
</div>
<div class="form_section_content">
<input name="publeYear">
<input name="publeYear" autocomplete="off" readonly="readonly">
</div>
</div>
<div class="form_section">
@@ -149,7 +151,31 @@ $("#enrollBtn").on("click",function(e){
console.error(error);
});
/* 캘린더 위젯 적용 */
/* 설정 */
const config = {
dateFormat: 'yy-mm-dd',
showOn : "button",
buttonText:"날짜 선택",
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: ['일','월','화','수','목','금','토'],
yearSuffix: '년',
changeMonth: true,
changeYear: true
}
/* 캘린더 */
$(function() {
$( "input[name='publeYear']" ).datepicker(config);
});
</script>
</body>

16
VamPa/src/main/webapp/resources/css/admin/goodsEnroll.css
View File

@@ -143,6 +143,22 @@ ul{
height: 170px;
}
.ui-datepicker-trigger { /* 캘린더 css 설정 */
margin-left: 25px;
width: 14%;
height: 38px;
font-weight: 600;
background-color: #dfe8f5;
font-size: 15px;
cursor:pointer;
}
input[name='publeYear'] {
width: 80%;
text-align: center;
}
/* 버튼 영역 */
.btn_section{
text-align: center;

30
VamPa_MySQL/src/main/webapp/WEB-INF/views/admin/goodsEnroll.jsp
View File

@@ -6,12 +6,14 @@
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../resources/css/admin/goodsEnroll.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" />
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/26.0.0/classic/ckeditor.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>
</head>
<body>
@@ -43,7 +45,7 @@
<label>출판일</label>
</div>
<div class="form_section_content">
<input name="publeYear">
<input name="publeYear" autocomplete="off" readonly="readonly">
</div>
</div>
<div class="form_section">
@@ -149,7 +151,31 @@ $("#enrollBtn").on("click",function(e){
console.error(error);
});
/* 캘린더 위젯 적용 */
/* 설정 */
const config = {
dateFormat: 'yy-mm-dd',
showOn : "button",
buttonText:"날짜 선택",
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: ['일','월','화','수','목','금','토'],
yearSuffix: '년',
changeMonth: true,
changeYear: true
}
/* 캘린더 */
$(function() {
$( "input[name='publeYear']" ).datepicker(config);
});
</script>
</body>

16
VamPa_MySQL/src/main/webapp/resources/css/admin/goodsEnroll.css
View File

@@ -143,6 +143,22 @@ ul{
height: 170px;
}
.ui-datepicker-trigger { /* 캘린더 css 설정 */
margin-left: 25px;
width: 14%;
height: 38px;
font-weight: 600;
background-color: #dfe8f5;
font-size: 15px;
cursor:pointer;
}
input[name='publeYear'] {
width: 80%;
text-align: center;
}
/* 버튼 영역 */
.btn_section{
text-align: center;