วิธีการปรับขนาดตัวควบคุม jQuery DatePicker

195

ฉันใช้ตัวควบคุม jQuery DatePicker เป็นครั้งแรก ฉันทำให้มันทำงานได้ในแบบฟอร์มของฉัน แต่มันใหญ่เป็นสองเท่าตามที่ฉันต้องการและประมาณ 1.5 เท่าใหญ่พอ ๆ กับการสาธิตบนหน้า jQuery UI มีการตั้งค่าง่ายๆที่ฉันขาดการควบคุมขนาดหรือไม่?

แก้ไข:ฉันพบเบาะแส แต่เปิดปัญหาใหม่ ในไฟล์ CSS จะระบุส่วนประกอบที่จะขยายตามขนาดตัวอักษรขององค์ประกอบหลัก พวกเขาแนะนำการตั้งค่า

body {font-size: 62.5%;}

เพื่อสร้าง 1em = 10px การทำเช่นนี้ทำให้ datepicker มีขนาดพอดี แต่เห็นได้ชัดว่ามันยุ่งกับส่วนที่เหลือของไซต์ของฉัน (ขณะนี้ฉันมีขนาดตัวอักษร: .9em)

ฉันพยายามโยน DIV ไปรอบ ๆ กล่องข้อความและตั้งขนาดตัวอักษร แต่ดูเหมือนว่าจะไม่สนใจมัน ดังนั้นจะต้องมีวิธีการลด datepicker บางโดยการเปลี่ยนแบบอักษรของผู้ปกครองของมัน แต่ฉันจะทำอย่างนั้นโดยไม่เลอะส่วนที่เหลือของเว็บไซต์ของฉันได้อย่างไร

jquery-ui

— gfrizzle
แหล่งที่มา

วางโค้ดของคุณทำให้ฉันรู้ว่าทำไมมันถึงใหญ่กว่านี้ และคุณหมายถึงปุ่มภาพหรือปฏิทินจริงที่แสดงวันที่?

— TStamper

ฉันสังเกตเห็นว่า datepicker HTML จะถูกแทรกนอก div ใด ๆ ที่มี นั่นเป็นเหตุผลที่การตั้งค่าขนาดตัวอักษรของ div ของคุณไม่ได้ทำ (นอกเหนือจากข้อเท็จจริงที่ว่าการประกาศสไตล์ต้องมีความเฉพาะเจาะจงมากขึ้นเช่นในคำตอบของ Jimmy Stenke)

— evanrmurphy

390

คุณไม่จำเป็นต้องเปลี่ยนมันในไฟล์ jquery-ui css (มันอาจสร้างความสับสนหากคุณเปลี่ยนไฟล์เริ่มต้น) มันก็เพียงพอแล้วถ้าคุณเพิ่ม

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

ในสไตล์ชีทที่โหลดหลังไฟล์ ui

จำเป็นต้องใช้ div.ui-datepicker ในกรณีที่กล่าวถึง ui-widget หลังจาก ui-datepicker ในการประกาศ

— Jimmy Stenke
แหล่งที่มา

26

ขั้นตอน "ในสไตล์ชีทที่โหลดหลังจากไฟล์ ui" เป็นสิ่งสำคัญมาก หากคุณโหลดสไตล์ชีทของคุณก่อน jquery ui สไตล์ชีทคุณลักษณะใด ๆ ที่คุณตั้งค่าไว้จะถูกเขียนทับ

— Travis

7

หากต้องการหยุดปัญหาที่เขียนทับตามความคิดเห็น 1 - คุณสามารถทำได้: ขนาดตัวอักษร: 10px! สำคัญ;

— Martin

7

! สำคัญคือ hack-ish ฉันขอแนะนำว่าอย่าใช้มัน

— Derek Adair

5

นี่คือเหตุผลที่พวกเขาถูกเรียกว่า CASCADING Style Sheets (CSS)

— ทำเครื่องหมาย W

1

ฮ่า ๆ ไม่ได้สังเกตว่าปัญหาอาจเป็นขนาดตัวอักษร! ขอบคุณ

— 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) 
    }
});

ใช้ฟังก์ชั่นการโทรกลับก่อนแสดง

— Jacob 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 Satyaram
แหล่งที่มา

5

สำหรับฉันนี่เป็นทางออกที่ง่ายที่สุด: ฉันเพิ่มแท็กfont-size:62.5%;แรกลง.ui-datepickerในไฟล์ css jquery custom:

ก่อน:

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

โชคดี!

— ชาด Kuehn
แหล่งที่มา

2

ฉันใช้อินพุตเพื่อรวบรวมและแสดงปฏิทินและเพื่อให้สามารถปรับขนาดปฏิทินที่ฉันใช้รหัสนี้:

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

มันทำงานเหมือนจับใจ

— คริส
แหล่งที่มา

2

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

— Stefan Höltker
แหล่งที่มา

1

สิ่งนี้ใช้ได้กับฉันและดูเหมือนง่าย ...

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

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

— jimscafe
แหล่งที่มา

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>

— babbu
แหล่งที่มา

1

ฉันลองวิธีการใช้ฟังก์ชั่นการโทรกลับก่อนแสดง แต่พบว่าฉันต้องตั้งค่าความสูงของเส้นด้วย เวอร์ชันของฉันดูเหมือนว่า:

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

— PedroKTFC
แหล่งที่มา

1

ที่ที่ดีที่สุดในการเปลี่ยนขนาดของปฏิทินอยู่ในไฟล์ jquery-ui.css

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

— John Belalcazar
แหล่งที่มา

1

รหัสนี้จะทำงานกับปุ่มปฏิทิน ขนาดของตัวเลขจะเพิ่มขึ้นโดยใช้ "ความสูงบรรทัด"

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

— Irshad Khan
แหล่งที่มา

1

คุณสามารถเปลี่ยน jquery-ui-1.10.4.custom.css ดังนี้

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

— Anshu
แหล่งที่มา

1

วิธีอื่น:

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

— mromagnoli
แหล่งที่มา

1

$('div.ui-datepicker').css({ fontSize: '12px' }); ทำงานถ้าเราเรียกมันว่าหลังจาก $("#DueDate").datepicker();

ซอ

— Mostafa
แหล่งที่มา

1

โซลูชั่น Jacob Tsui ทำงานได้สมบูรณ์แบบสำหรับฉัน:

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

— Gabriel Molina
แหล่งที่มา

1

เราสามารถแก้ไขไฟล์ ' jquery-ui.css ' ที่เป็นค่าเริ่มต้นได้ตามรหัสด้านล่าง

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

อย่างไรก็ตามไม่แนะนำให้เปลี่ยนไฟล์ ' jquery-ui.css ' เนื่องจากอาจมีการใช้งานที่อื่นในโครงการ การเปลี่ยนค่าในไฟล์เริ่มต้นสามารถเปลี่ยนฟอนต์ datepicker ในเว็บเพจอื่น ๆ ที่มีการใช้งานได้

ฉันใช้รหัสด้านล่างเพื่อแก้ไข "ขนาดตัวอักษร" ฉันวางไว้หลัง datepicker () เรียกว่าตามที่แสดงด้านล่าง

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

หวังว่านี่จะช่วย ...

— user3401675
แหล่งที่มา

0

ฉันคิดว่าฉันพบมัน - ฉันต้องเข้าไปที่ไฟล์ CSS และเปลี่ยนขนาดตัวอักษรสำหรับการควบคุม datepicker โดยตรง ชัดเจนเมื่อคุณรู้เกี่ยวกับมัน แต่สับสนในตอนแรก

— gfrizzle
แหล่งที่มา

0

เปิด ui.all.css

ในตอนท้ายใส่

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

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

และไป !

0

เพื่อให้การทำงานใน Safari 5.1 พร้อม Rails 3.1 ฉันต้องเพิ่ม:

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

— ดินเหนียว
แหล่งที่มา

0

ฉันมี datepicker ปรากฏใน modal และเนื่องจาก "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;
}

— แม็ค
แหล่งที่มา