JQuery DatePicker異なるインスタンスの異なるスタイル

Question

jQuery datepickerを同じページの2か所で使用しています。しかし、私は彼らに異なったスタイルを与えたいと思っています。両方とも同じクラスを持っている間に、どうしたらいいですか？

コード：

$('#startDate').datepicker({ dateFormat: "DD, MM d, yy" }); 
$('#endDate').datepicker({ dateFormat: "DD, MM d, yy" }); 

これらの両方のdatepickersが異なって見えるはずです。

Answer 1

私は幸いにもデザインに変化をもたらしました。私のdatepickerの1つはインラインになり、もう1つは通常のdatepickerです。私は、このメソッドを定義し、JavaScriptで

<input type="text" name="startDate" id="startDate" onclick="applyDatepickerBorder();"/> 

：私は希望のスタイルを実現するために、このコードを書いたここで

function applyDatepickerBorder(){ 
    // Inline datepicker doesn't have this id 
    $('#ui-datepicker-div').css('border','1px solid'); 
} 

は私が最終的に得たものである：

あなたが使用できる

Answer 2

jQuery UIをダウンロードすると、テーマのCSSスコープを指定できます。 download pageにアクセスしたら、[高度なテーマ設定]のドロップダウンをクリックします。

テーマのスコープを利用するためには、まずテーマを選択する必要があります。 ThemeRollerでテーマをダウンロードすると、再度ダウンロードビルダーに戻ってダウンロードをカスタマイズできます。

テーマスコープフィールドには、テーマ（テーマ）が適用されるページ（またはサイト）の一部を表すCSSセレクタを入力します。たとえば、サイトのサイドナビゲーション列にアコーディオンウィジェットがあり、そのサイトの他の領域と異なるテーマを設定する場合は、そのサイドナビゲーション列に対応するCSSセレクタを入力できます（例：。 interiorNavigation）を開き、あなたのテーマをダウンロードしてください。ビルダはスコープセレクタの後ろにスペースを追加するので、追加する必要はありません。

CSSスコープを入力すると、ビルダーは対応するテーマフォルダ名を提案します。この名前は編集することができ、スコープフィールドに入力するときにフォルダフィールドが空であるか編集されていない限り、別の名前を自動的に提案することはありません。

zipファイルをダウンロードして解凍すると、「theme」という名前のテーマフォルダ（または入力したカスタム名）が含まれていることがわかります。そのフォルダの中に、jQuery UI CSS Frameworkを構成するすべてのファイルがあります。 Theme Scopeフィールドにスコープを入力したとすると、このフォルダに含まれるすべてのCSSはセレクタにスコープされます。

このテーマをページに追加するには、「theme_internalNavigation」フォルダのui.all.cssへのCSSリンクを送信するだけです。

<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" /> 

追加のヘルプはfilament groupページにあります。

Answer 3

beforeShow関数も同様に、

例えば。変更datapicker幅のために：

$('#input-field-id') 
    .datepicker({ 
     beforeShow: function(input_element, dp_instance){ 
      setTimeout(function(){ 
       // enter your styling here 
       $(dp_instance.dpDiv).css('width', '300px'); 
      },1, dp_instance); 
     } 
    });