"JQuery UI datepicker 크기 조정"의 두 판 사이의 차이

2020년 11월 2일 (월) 00:55 기준 최신판

✔️ jQuery UI 1.11.x, 1.12.x에서 테스트하였습니다.

1 개요[ | ]

jQuery UI datepicker 크기 조정
jQuery UI 날짜 선택기 너비
jQuery UI 날짜 선택기 작게

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<style>
.ui-datepicker{ font-size: 12px; width: 160px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
</style>
<script>
$(function() {
  $( "#datepicker1" ).datepicker({
    dateFormat: 'yy-mm-dd'
  });
});
</script>

<input type="text" id="datepicker1">

2 같이 보기[ | ]

jQuery UI 날짜 선택

@@ 1번째 줄: / 1번째 줄: @@
+{{테스트|jQuery UI 1.11.x, 1.12.x}}
 {{소문자}}
+==개요==
 ;jQuery UI datepicker 크기 조정
 ;jQuery UI 날짜 선택기 너비
 ;jQuery UI 날짜 선택기 작게
-==주요 소스 코드==
+<syntaxhighlight lang='html'>
-<source lang='css'>
+<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
+<script src="//code.jquery.com/jquery.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+<style>
 .ui-datepicker{ font-size: 12px; width: 160px; }
 .ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
 .ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
-</source>
+</style>
-==전체 소스 코드==
-<source lang='html5'>
-<!DOCTYPE html>
-<meta charset="utf-8" />
-<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
-<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
 <script>
 $(function() {
@@ 25번째 줄: / 23번째 줄: @@
 });
 </script>
-<style>
-.ui-datepicker{ font-size: 12px; width: 160px; }
+<input type="text" id="datepicker1">
-.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
+</syntaxhighlight>
-.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
+<jsfiddle height='250'>wyapenfh</jsfiddle>
-</style>
-<p>생년월일: <input type="text" id="datepicker1"></p>
-</source>
-*예시: http://jmnote.com/jqui/dpicker_size.php
 ==같이 보기==
@@ 38번째 줄: / 32번째 줄: @@
 [[분류: jQuery UI]]
+[[분류: datepicker]]