Cách thay đổi kích thước điều khiển DatePicker của jQuery

Tôi đang sử dụng điều khiển DatePicker của jQuery lần đầu tiên. Tôi đã làm cho nó hoạt động trên biểu mẫu của mình, nhưng nó lớn gấp đôi tôi muốn và lớn gấp 1,5 lần bản demo trên trang UI UI. Có một số cài đặt đơn giản tôi bị thiếu để kiểm soát kích thước?

Chỉnh sửa: Tôi tìm thấy một manh mối, nhưng nó mở ra những vấn đề mới. Trong tệp CSS, nó tuyên bố thành phần sẽ chia tỷ lệ theo kích thước phông chữ của phần tử cha. Họ khuyên bạn nên thiết lập

body {font-size: 62.5%;}

để tạo 1em = 10px. Làm điều này mang lại cho tôi một công cụ hẹn hò có kích thước độc đáo, nhưng rõ ràng nó làm rối tung phần còn lại của trang web của tôi (hiện tại tôi có cỡ chữ: .9em).

Tôi đã thử ném DIV xung quanh hộp văn bản của mình và đặt kích thước phông chữ của nó, nhưng dường như bỏ qua điều đó. Vì vậy, phải có một số cách để thu nhỏ ngày tháng bằng cách thay đổi phông chữ của cha mẹ của nó, nhưng làm thế nào để tôi làm điều đó mà không làm hỏng phần còn lại của trang web của tôi?

Bạn không phải thay đổi nó trong tệp css jquery-ui (có thể gây nhầm lẫn nếu bạn thay đổi các tệp mặc định), nó là đủ nếu bạn thêm

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

trong biểu định kiểu được tải sau tệp ui

div.ui-datepicker là cần thiết trong trường hợp ui-widget được đề cập sau ui-datepicker trong khai báo

Tôi không thể thêm một bình luận, vì vậy đây là tham khảo câu trả lời được chấp nhận bởi Keijro. Tôi thực sự đã thêm những điều sau vào biểu định kiểu của mình thay vào đó:

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

và nó đã làm việc như là tốt. Điều này có thể thích hợp hơn với giá trị tuyệt đối là 10px.

Không chắc chắn liệu một số cơ thể đã đề nghị theo cách sau, nếu có, chỉ cần bỏ qua ý kiến ​​của tôi. Tôi đã thử nghiệm điều này ngày hôm nay và nó hoạt động cho tôi. Bằng cách chỉ thay đổi kích thước phông chữ trước khi điều khiển được hiển thị:

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

Sử dụng chức năng gọi lại trướcShow

Tôi thay đổi dòng sau trong ui.theme.css:

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

đến:

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

Thêm vào

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

trong biểu định kiểu được tải sau tệp ui. Điều này cũng sẽ thay đổi kích thước các mục ngày.

Đối với tôi, đây là giải pháp đơn giản nhất: Tôi đã thêm thẻ font-size:62.5%;đầu tiên .ui-datepickervào tệp css tùy chỉnh jquery:

trước:

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

sau:

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

Tôi đã thử những ví dụ này mà không thành công. Rõ ràng các bảng định kiểu khác trên trang đang đặt kích thước phông chữ mặc định cho các thẻ khác nhau. Nếu bạn điều chỉnh ui-datepicker, bạn đang thay đổi div. Nếu bạn thay đổi div, bạn cần đảm bảo nội dung của div đó kế thừa kích thước đó. Đây là những gì cuối cùng đã làm việc cho tôi:

<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>

Chúc may mắn!

Tôi đã sử dụng một đầu vào để thu thập và hiển thị lịch và để có thể thay đổi kích thước lịch tôi đã sử dụng mã này:

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

Nó hoạt động như một say mê.

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Điều này làm việc cho tôi và có vẻ đơn giản ...

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

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>

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>

Tôi đã thử cách tiếp cận sử dụng chức năng gọi lại trướcShow nhưng thấy tôi cũng phải đặt chiều cao của dòng. Phiên bản của tôi trông như:

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}

nơi tốt nhất để thay đổi kích thước của lịch là trong tệp jquery-ui.css

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}

Mã này sẽ hoạt động trên các nút Calender. kích thước của các con số sẽ tăng lên bằng cách sử dụng "chiều cao dòng".

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

bạn có thể thay đổi jquery-ui-1.10.4.custom.css như sau

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

Cách tiếp cận khác:

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});

$('div.ui-datepicker').css({ fontSize: '12px' }); làm việc nếu chúng ta gọi nó sau $("#DueDate").datepicker();

Vĩ cầm

Giải pháp Jacob Tsui hoạt động hoàn hảo đối với tôi:

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

Chúng tôi có thể thay đổi trong tệp ' jquery-ui.css ' mặc định như mã dưới đây:

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

Tuy nhiên, việc thay đổi tệp ' jquery-ui.css ' mặc định không được khuyến nghị vì có thể nó đã được sử dụng ở một nơi khác trong dự án. Thay đổi giá trị trong tệp mặc định có thể thay đổi phông chữ ngày tháng trong các trang web khác nơi nó đã được sử dụng.

Tôi đã sử dụng đoạn mã dưới đây để thay đổi "cỡ chữ". Tôi đã đặt nó ngay sau khi datepicker () được gọi như hình bên dưới.

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

Hi vọng điêu nay co ich...

Tôi nghĩ rằng tôi đã tìm thấy nó - tôi đã phải đi vào tệp CSS và thay đổi kích thước phông chữ cho điều khiển datepicker trực tiếp. Rõ ràng một khi bạn biết về nó, nhưng lúc đầu khó hiểu.

mở ui.all.css

cuối cùng đặt

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

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

và đi!

Để làm việc này trong Safari 5.1 với Rails 3.1, tôi đã phải thêm:

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

Tôi đã có datepicker xuất hiện trong một phương thức và vì "hộp chứa ngày hiển thị" ở phía bên trái, lịch bị che khuất một phần, vì vậy tôi đã thêm:

.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;
}