web-dev-qa-db-ja.com

Jquery UIテーマのアイコンでJQuery UI Datepickerを使用する

私は、JQuery UIを使用してdatepickerコントロールをセットアップしています。また、使用したいデフォルトアイコンの束を提供するJQuery UIテーマも使用しています。

DatePickerでは、特定の画像を指定できます。

<script type="text/javascript">
  $(document).ready(function() {
    $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

アイコンセットからアイコンを表示するには、次のようなものを使用します。

<span class="ui-icon ui-icon-calendar"></span>

2つを統合するのは簡単ですか、またはスタイル/画像を手動でハックする必要がありますか？

javascriptcssjquery-ui
29
Craig McGuff

手動で行う必要があると思います。デフォルトでは、Datepickerプラグインは次のHTMLを使用して、指定されたbuttonImageを挿入します。

<img title="..." alt="..." src="images/ui-icon-calendar.png" class="ui-datepicker-trigger">

ところで、あなたは使いたいかもしれません...

$(function() {
 // your code here
});

...の代わりに...

$(document).ready(function() {
 // your code here
});
14
Mathias Bynens

これを行うことで機能しました

$("#DateFrom").datepicker({
    showOn: 'button'
}).next('button').button({
    icons: {
        primary: 'ui-icon-calendar'
    }, text:false
});

カレンダーの入力の横に挿入するボタンを変更するだけです。デフォルトでは、テキストに3つの楕円がスローされるため、これも削除します。

29
Loktar

入力に画像を入れることをお勧めします

input.date_picker {
  text-align: center;
  background-image: url("images/ui-icon-calendar.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  width: 78px;
}

お気に入り

date_picker_example

私は使用しました このアイコン ニースから タンゴアイコン プロジェクトは png

利点：

  • JavaScriptから独立
  • DOMで即座にロード
  • 追加しやすい将来の日付入力
25
Pierre de LESPINAY

最善の方法は次のとおりです。

最初に、すでに使用したJavaScriptを使用します。

 <script type="text/javascript">
   $(document).ready(function() {
        $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
   });
 </script>

次に、次のCSSコードを追加します。

<style type="text/css">
.ui-datepicker-trigger
{
        padding:0px;
        padding-left:5px;
        vertical-align:baseline;

        position:relative;
        top:4px;
        height:18px;
}
</style>

このCSSは、必要に応じてカレンダー画像を正しく配置するのに役立ちます。

3
Muhammed Masood Alingaparambil

Evsの回答を少しだけフォローしてください（Evsに感謝します！）。

IE8でも機能し、ホバー時にカーソルを変更するCSSを追加しました。

button.date-picker-button-hidden:hover
{
    cursor: pointer; 
}
1
telb

このjqueryコードを使用して、テキスト入力フィールドの日付ピッカーと、日付ピッカーボタンの画像として機能するjquery UIアイコンを取得しました。

// Apply jQuery UI DatePicker to all controls with class = datepicker
    $('.datepicker').datepicker({
        showWeek: true,
        dateFormat: "yy-mm-dd",
        buttonImage: "ui-icon-calendar",
        regional: "sv",
        minDate: "-10Y",
        maxDate: "+10Y",
        showButtonPanel: true,
        buttonImageOnly: false,
        showWeekNumber: true,
        firstDay: 1,
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        showOn: "both"

    }).next('button').text('Show calendar').button({ icons: { primary: 'ui-icon-calendar' }, text: false });
0
Webking

アイコンボタンのHTMLをbuttonTextオプションに直接追加し、buttonImageオプションを無効にすることで、これが機能するようになりました。

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});
0
Marc

http://jqueryui.com/demos/datepicker/#icon-trigger

サンプルコードの非常に良い例が提供されています。

0
Nipun

手動でボタン/アイコンを設定するルートに進むには、この例を使用できます jQueryUI DatePickerのアイコントリガーをBootstrap 3の入力グループ と組み合わせる方法JSクリックイベントにより、関連する日付入力フィールドにフォーカスが設定され、jQueryUIの日付機能が表示されます。

または、 documentation 状態として、showメソッドを使用して日付ピッカーを表示できます（「日付ピッカーが入力に接続されている場合、入力は日付ピッカーが表示されます。」）。

$( ".selector" ).datepicker( "show" );

これにより、入力フィールドの横にあるボタン/画像/アイコンを使用でき、ボタン/画像/アイコンをクリックして入力フィールドの日付機能をトリガーできます。

0
pnairn

Loktarの答えを借りて拡張すると、このようなものを試すことができます。これはFF10でしかテストしていませんが、他のブラウザでは動作しない理由はわかりません。

$('.date-picker').datepicker({showOn: 'button'})
    .next('button').addClass('date-picker-button-hidden')
    .after($('<span/>')
        .addClass('ui-icon').addClass('ui-icon-calendar').addClass('date-picker-icon'));

この例では、date-picker-button-hiddenおよびdate-picker-iconが自分のクラスであることに注意してください。jQueryCSSクラスを直接スタイリングするのは好きではないからです。次のCSSを適用します。

span.date-picker-icon
{
    display: inline-block;
    z-index: -1;
    position: relative;
    left: -16px;
}

button.date-picker-button-hidden
{
    opacity: 0.0;
    filter: alpha(opacity=0);
    height: 16px;
    width: 16px;
    margin: 0;
    padding: 0;
}

これにより、通常のjQueryスパンアイコンがボタンの後ろに効果的に配置されます。ボタンは完全にシースルー/不透明（CSS経由）ですが、アイコンの上にあるため、アイコンをクリックするとボタンクリックイベントがトリガーされます。

0
evan w

変更：showOn： "both"に、//ボタン

<input type="text" name="date_from" id="date_from" />        
<input type="text" name="date_to" id="date_to" />

$(function() {
$("#date_from").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_to").datepicker("option", "minDate", selectedDate);
    }
});
$("#date_to").datepicker({
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    showOn: "both",//button
    buttonImageOnly: false,
    showAnim: "slideDown",
    dateFormat: "yy-mm-dd",
    onClose: function(selectedDate) {
        $("#date_from").datepicker("option", "maxDate", selectedDate);
    }
});
});

http://jsfiddle.net/wimarbueno/fpT6q/

0
Wilzon