Cara mengubah ukuran kontrol jQuery DatePicker

Saya menggunakan kontrol DatePicker jQuery untuk pertama kalinya. Saya sudah membuatnya bekerja pada formulir saya, tapi ini sekitar dua kali lebih besar dari yang saya inginkan, dan sekitar 1,5 kali lebih besar dari demo di halaman jQuery UI. Apakah ada pengaturan sederhana yang saya lewatkan untuk mengontrol ukuran?

Sunting: Saya menemukan petunjuk, tetapi membuka masalah baru. Dalam file CSS, itu menyatakan komponen akan skala sesuai dengan ukuran font elemen induk. Mereka merekomendasikan pengaturan

body {font-size: 62.5%;}

untuk membuat 1em = 10px. Melakukan ini memberi saya datepicker berukuran bagus, tapi jelas itu mengacaukan sisa situs saya (saat ini saya memiliki ukuran font: .9em).

Saya mencoba melempar DIV di sekitar kotak teks saya dan mengatur ukuran font-nya, tetapi tampaknya mengabaikannya. Jadi harus ada beberapa cara untuk mengecilkan datepicker dengan mengubah font induknya, tetapi bagaimana cara melakukannya tanpa mengacaukan sisa situs saya?

Anda tidak perlu mengubahnya di file jquery-ui css (ini bisa membingungkan jika Anda mengubah file default), itu sudah cukup jika Anda menambahkan

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

dalam stylesheet yang dimuat setelah file-file ui

div.ui-datepicker diperlukan jika ui-widget disebutkan setelah ui-datepicker dalam deklarasi

Saya tidak bisa menambahkan komentar, jadi ini merujuk pada jawaban yang diterima oleh Keijro. Saya sebenarnya menambahkan yang berikut ke stylesheet saya sebagai gantinya:

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

dan itu berhasil juga. Ini mungkin lebih baik daripada nilai absolut 10px.

Tidak yakin apakah beberapa orang menyarankan cara berikut, jika ya, abaikan saja komentar saya. Saya menguji ini hari ini dan itu bekerja untuk saya. Dengan hanya mengubah ukuran font sebelum kontrol ditampilkan:

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

Menggunakan fungsi panggilan balik sebelumnya

Saya mengubah baris berikut di ui.theme.css:

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

untuk:

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

Menambahkan

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

dalam stylesheet yang dimuat setelah file-file ui. Ini juga akan mengubah ukuran item tanggal.

Bagi saya, ini adalah solusi termudah: Saya menambahkan font-size:62.5%;ke yang pertama.ui-datepicker tag dalam file css custom jquery:

sebelum:

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

setelah:

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

Saya mencoba contoh-contoh ini tanpa hasil. Rupanya stylesheet lain pada halaman itu mengatur ukuran font default untuk tag yang berbeda. Jika Anda menyesuaikan ui-datepicker Anda mengubah div. Jika Anda mengubah div Anda perlu memastikan konten div itu mewarisi ukuran itu. Inilah yang akhirnya berhasil untuk saya:

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

Semoga berhasil!

Saya menggunakan input untuk mengumpulkan dan menampilkan kalender, dan untuk dapat mengubah ukuran kalender saya telah menggunakan kode ini:

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

Itu bekerja seperti pesona.

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

Ini bekerja untuk saya dan tampaknya sederhana ...

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

Saya mencoba pendekatan menggunakan fungsi callback beforeShow tetapi ternyata saya juga harus mengatur ketinggian garis. Versi saya terlihat seperti:

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

tempat terbaik untuk mengubah ukuran kalender adalah di file jquery-ui.css

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

Kode ini akan berfungsi pada tombol Kalender. ukuran angka akan meningkat dengan menggunakan "line-height".

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

Anda dapat mengubah jquery-ui-1.10.4.custom.css sebagai berikut

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

Pendekatan lain:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); bekerja jika kita memanggilnya setelah $("#DueDate").datepicker();

Biola

Solusi Jacob Tsui sangat cocok untuk saya:

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

Kita dapat mengubah dalam file ' jquery-ui.css ' default seperti kode yang diberikan di bawah ini:

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

Namun, mengubah ' jquery-ui.css default ' tidak disarankan karena mungkin telah digunakan di tempat lain dalam proyek. Mengubah nilai dalam file default dapat mengubah font datepicker di halaman web lain di mana ia telah digunakan.

Saya menggunakan kode di bawah ini untuk mengubah "ukuran font". Saya menempatkannya tepat setelah datepicker () dipanggil seperti yang ditunjukkan di bawah ini.

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

Semoga ini membantu...

Saya rasa saya menemukannya - saya harus masuk ke file CSS dan mengubah ukuran font untuk kontrol datepicker secara langsung. Jelas sekali Anda mengetahuinya, tetapi pada awalnya membingungkan.

buka ui.all.css

pada akhirnya put

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

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

dan pergi !

Agar ini berfungsi di Safari 5.1 dengan Rails 3.1, saya harus menambahkan:

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

Saya memiliki datepicker yang muncul di modal dan karena "tanggal-tampilan-wadah" di sisi kiri, kalender sebagian tidak terlihat, jadi saya menambahkan:

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