jQuery DatePickerコントロールのサイズを変更する方法

195

初めてjQuery DatePickerコントロールを使用します。私のフォームでは機能していますが、私が望むサイズの約2倍、jQuery UIページのデモの約1.5倍です。サイズを制御するために欠けている簡単な設定はありますか？

編集：手がかりを見つけましたが、それは新しい問題を切り開きます。CSSファイルでは、コンポーネントが親要素のフォントサイズに従って拡大縮小することを示しています。彼らは設定をお勧めします

body {font-size: 62.5%;}

1em = 10pxにします。これを行うと、適切なサイズの日付ピッカーが得られますが、明らかに、サイトの残りの部分がめちゃくちゃになります（私は現在font-size：.9emを持っています）。

テキストボックスの周りにDIVを配置してフォントサイズを設定してみましたが、無視されているようです。だから、その親のフォントを変更して日付ピッカーを縮小する方法がいくつかあるはずですが、サイトの他の部分を台無しにせずにそれを行うにはどうすればよいですか？

jquery-ui 
— グフリズル
ソース
コードを貼り付けてください。コードが大きくなる理由がわかりません。そして、あなたは画像ボタンまたは日を示す実際のカレンダーを参照していますか？
— TStamper 2009年
日付ピッカーHTMLが、含まれているdivの外側に挿入されることに気づきました。そのため、divのフォントサイズを設定してもうまくいきませんでした（ジミーステンケの回答のように、スタイル宣言をより具体的にする必要があるという事実は別です）。
— evanrmurphy 2013

回答:

390

jquery-ui cssファイルで変更する必要はありません（デフォルトのファイルを変更すると混乱する可能性があります）。追加するだけで十分です。

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

UIファイルの後にロードされたスタイルシート

宣言でui-datepickerの後にui-widgetが記載されている場合は、div.ui-datepickerが必要です。

— ジミー・ステンケ
ソース
26
「ui-filesの後にロードされたスタイルシートで」ステップは非常に重要です。jquery uiスタイルシートの前にスタイルシートをロードすると、設定した属性は上書きされます。
— トラビス
7
コメントに従って上書きされた問題を停止するには1-これを行うことができます：font-size：10px！important;
— マーティン
7
！重要なのはハックっぽいので、絶対に使用しないことをお勧めします。
— Derek Adair
5
これが、CASCADINGスタイルシート（CSS）と呼ばれる理由です
— Mark W
1
lolは、問題がフォントサイズである可能性があることにさえ気が付きませんでした！ありがとう
— themhz 2013
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%; }
— ロバート・K
ソース
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})}
— ペドロKTFC
ソース
1

カレンダーのサイズを変更するのに最適な場所は、jquery-ui.cssファイルです。

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
— ジョン・ベラルカザール
ソース
1

このコードは、カレンダーボタンで機能します。「line-height」を使用すると、数値のサイズが大きくなります。

/* 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');
    }
});
— mromagnoli
ソース
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プロジェクトの別の場所で使用されている可能性がある」ファイルをお勧めしません。デフォルトファイルの値を変更すると、それが使用されている他のWebページの日付ピッカーフォントが変更される可能性があります。

以下のコードを使用して「font-size」を変更しました。以下に示すように、datepicker（）が呼び出された直後に配置しました。

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

お役に立てれば...

— ユーザー3401675
ソース
0

私はそれを見つけたと思います-CSSファイルに移動して、日付ピッカーコントロールのフォントサイズを直接変更する必要がありました。あなたがそれについて知っていれば明らかですが、最初は混乱します。

— グフリズル
ソース
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

日付ピッカーをモ​​ーダルで表示しましたが、左側にある「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.