"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 날짜 선택

@@ 6번째 줄: / 6번째 줄: @@
 ;jQuery UI 날짜 선택기 작게
-<source lang='html'>
+<syntaxhighlight lang='html'>
 <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>
@@ 12번째 줄: / 12번째 줄: @@
 <style>
-.ui-datepicker{ font-size: 12px; width: 375px; }
+.ui-datepicker{ font-size: 12px; width: 160px; }
-.ui-datepicker select.ui-datepicker-month{ width:50%; font-size: 11px; }
+.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
 .ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
 </style>
@@ 25번째 줄: / 25번째 줄: @@
 <input type="text" id="datepicker1">
-</source>
+</syntaxhighlight>
 <jsfiddle height='250'>wyapenfh</jsfiddle>