jQuery DatePicker 컨트롤의 크기를 조정하는 방법

195

jQuery DatePicker 컨트롤을 처음 사용하고 있습니다. 내 양식에서 작동하지만 jQuery UI 페이지의 데모보다 약 2 배, 데모의 약 1.5 배입니다. 크기를 제어하기 위해 누락 된 간단한 설정이 있습니까?

편집 : 단서를 찾았지만 새로운 문제가 발생합니다. CSS 파일에서 구성 요소는 부모 요소의 글꼴 크기에 따라 크기가 조정됩니다. 그들은 설정을 권장합니다

body {font-size: 62.5%;}

1em = 10px로 만듭니다. 이렇게하면 멋진 크기의 날짜 선택기가 제공되지만 분명히 내 사이트의 나머지 부분을 엉망으로 만듭니다 (현재 글꼴 크기는 .9em입니다).

텍스트 상자 주위에 DIV를 던지고 글꼴 크기를 설정하려고 시도했지만 무시하는 것 같습니다. 따라서 부모의 글꼴을 변경하여 datepicker를 줄이는 방법이 있어야하지만 나머지 사이트를 망칠 필요없이 어떻게해야합니까?

jquery-ui 
— 멍청이
소스
코드를 붙여 넣으십시오. 왜 더 큰지 알 수 없습니다. 이미지 버튼 또는 날짜를 표시하는 실제 캘린더를 참조하고 있습니까?
— TStamper
datepicker HTML이 포함 된 div 외부에 삽입되는 것을 알았습니다. 그렇기 때문에 div의 글꼴 크기를 설정하지 않아도됩니다 (Jimmy Stenke의 답변과 같이 스타일 선언이 더 구체적이어야한다는 사실 외에도).
— evanrmurphy

답변:

390

jquery-ui css 파일에서 변경할 필요가 없습니다 (기본 파일을 변경하면 혼란 스러울 수 있음). 추가하면 충분합니다.

div.ui-datepicker{
 font-size:10px;
}

UI 파일 다음에로드 된 스타일 시트

선언에서 ui-datepicker 다음에 ui-widget이 언급 된 경우 div.ui-datepicker가 필요합니다.

— 지미 스텐 케
소스
26
"ui-files 이후에로드 된 스타일 시트에서"단계는 매우 중요합니다. jquery ui 스타일 시트 전에 스타일 시트를로드하면 설정 한 모든 속성을 겹쳐 씁니다.
— Travis
7
주석 1에 따라 덮어 쓴 문제를 중지하려면 다음과 같이하십시오. font-size : 10px! important;
— Martin
7
! 중요한 것은 hack-ish입니다. 나는 그것을 사용하지 않는 것이 좋습니다.
— Derek Adair
5
이것이 바로 캐스 케이 딩 스타일 시트 (CSS)라고 불리는 이유입니다.
— Mark W
1
lol는 문제가 글꼴 크기 일 수 있음을 알지 못했습니다! 감사합니다
— themhz
30

의견을 추가 할 수 없으므로 Keijro가 수락 한 답변과 관련이 있습니다. 실제로 대신 스타일 시트에 다음을 추가했습니다.

    div.ui-datepicker {
    font-size: 62.5%;
}

그리고 그것은 효과가 있었다. 이것은 10px의 절대 값보다 선호 될 수 있습니다.

— 브라이언트 보 우먼
소스
20

일부 신체가 다음과 같은 방법으로 제안했는지 확실하지 않은 경우, 내 의견을 무시하십시오. 나는 이것을 오늘 시험했고 그것은 나를 위해 일한다. 컨트롤이 표시되기 전에 글꼴 크기를 조정하면됩니다.

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});

beforeShow 콜백 함수 사용

— 야곱 CUI
소스
2
이 솔루션이 더 좋습니다
— Code Monkey
9

ui.theme.css에서 다음 줄을 변경합니다.

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

에:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }
— 파벨 추 추바
소스
5

더하다

div.ui-datepicker, .ui-datepicker td{
 font-size:10px;
}

UI 파일 다음에로드 된 스타일 시트에서. 날짜 항목의 크기도 조정됩니다.

— 사티 아람 BV
소스
5

나를 위해, 이것은 가장 쉬운 해결책이었다 : 나는 추가 font-size:62.5%;처음에.ui-datepicker .jquery 사용자 정의 CSS 파일 태그에 .

전에:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;}

후:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }
— 로버트 케이
소스
4

나는 성공하지 않고이 예제를 시도하고있었습니다. 페이지의 다른 스타일 시트는 다른 태그의 기본 글꼴 크기를 설정 한 것 같습니다. ui-datepicker를 조정하면 div가 변경됩니다. div를 변경하면 해당 div의 내용이 해당 크기를 상속하는지 확인해야합니다. 이것이 마침내 나를 위해 일한 것입니다.

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

행운을 빕니다!

— 차드 쿠엔
소스
2

입력을 사용하여 달력을 수집하고 표시 하고이 코드를 사용하여 달력의 크기를 조정할 수있었습니다.

div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

그것은 매력처럼 작동합니다.

— 크리스
소스
1

이것은 나를 위해 일했고 간단 해 보입니다 ...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
— 짐 카페
소스
1 
with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:


<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>

<script>



$(function() {

$( "#datepicker" ).datepicker({
//font-size:10px;
 //numberOfMonths: 3,

showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>

</head>
— 바부
소스
1

beforeShow 콜백 함수를 사용하는 접근법을 시도했지만 라인 높이도 설정해야한다는 것을 알았습니다. 내 버전은 다음과 같습니다

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
— 페드로
소스
1

달력의 크기를 변경하는 가장 좋은 장소는 jquery-ui.css 파일에 있습니다.

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
— 존 벨 알카사르
소스
1

이 코드는 캘린더 버튼에서 작동합니다. "행 높이"를 사용하면 숫자의 크기가 증가합니다.

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>
— 이르 샤드 칸
소스
1

다음과 같이 jquery-ui-1.10.4.custom.css를 변경할 수 있습니다

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}
— 안슈
소스
1

다른 접근법 :

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});
— 염색체
소스
1

$('div.ui-datepicker').css({ fontSize: '12px' }); 우리가 나중에 전화하면 작동 $("#DueDate").datepicker();

깡깡이

— 모스 타파
소스
1

Jacob Tsui 솔루션은 나에게 완벽하게 작동합니다.

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){ 
        $(".ui-datepicker").css('font-size', 12)
    }
});
— 가브리엘 몰리나
소스
1

아래의 주어진 코드와 같이 기본 ' jquery-ui.css '파일 에서 변경할 수 있습니다

div.ui-datepicker {
font-size: 80%; 
}

그러나 기본 ' jquery-ui.css 변경 '파일을 하면 프로젝트의 다른 곳에서 사용되었을 수 있으므로 권장되지 않습니다. 기본 파일에서 값을 변경하면 사용 된 다른 웹 페이지에서 날짜 선택 글꼴을 변경할 수 있습니다.

아래 코드를 사용하여 "font-size"를 변경했습니다. 아래와 같이 datepicker ()가 호출 된 직후에 배치했습니다.

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

도움이 되었기를 바랍니다...

— 사용자 3401675
소스
0

나는 그것을 발견했다고 생각한다 .CSS 파일로 가서 datepicker 컨트롤의 글꼴 크기를 직접 변경해야했다. 일단 당신이 그것에 대해 알고 있지만 처음에는 혼란 스럽습니다.

— 멍청이
소스
0

ui.all.css를여십시오

마지막에

@import "ui.base.css";
@import "ui.theme.css";

div.ui-datepicker {
font-size: 62.5%; 
}

그리고 가자!

0

이것을 Rails 3.1과 함께 Safari 5.1에서 작동 시키려면 다음을 추가해야했습니다.

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
— 점토
소스
0

datepicker가 모달로 나타나고 왼쪽의 "date-display-container"로 인해 일정이 부분적으로 보이지 않으므로 추가했습니다. 

.datepicker-date-display {
  display: none;
}

.datepicker-calendar-container {
  max-height: 21em;
}
.datepicker-day-button {
  line-height: 1.2em;
}

.datepicker-table > thead > tr > th {
  padding: 0;
}
— 맥
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.