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

StackOverflow https://stackoverflow.com/questions/802379

  •  03-07-2019
  •  | 
  •  

質問

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つを統合するのは簡単ですか、それともスタイル/画像を手動でハックするだけですか？

役に立ちましたか？

解決

手動で行う必要があると思います。デフォルトでは、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
});

他のヒント

これを行うことで動作しました

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

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

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

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

素敵なこのアイコンを使用しました< href = "http://commons.wikimedia.org/wiki/Tango_icons"> tangoアイコンプロジェクトは、 png

利点：

  • javascriptから独立しています
  • DOMで即座にロード
  • 簡単に追加できる将来の日付入力

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

最初に、すでに使用した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は、必要に応じてカレンダー画像を正しく配置するのに役立ちます。

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

IE8でも動作し、ホバーでカーソルを変更するCSSを追加しました：

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

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

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

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 は自分のクラスであることに注意してください。jQueryのスタイリングが好きではないからですCSSクラス。次の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経由）ですが、アイコンの上にあるため、アイコンをクリックするとボタンクリックイベントがトリガーされます。

この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 });

change：toShowOn：＆quot; both＆quot;、// button 

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

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

または、ドキュメントに記載されているように、 show メソッドを使用して日付ピッカーを表示します（日付ピッカーが入力に接続されている場合、日付ピッカーを表示するには入力が表示されている必要があります。＆quot;）。

$（＆quot; .selector＆quot;）.datepicker（＆quot; show＆quot;）;

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

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

$('.datepicker').datepicker({
    showOn: "both",
    buttonText: '<i class="icon-calendar"></i>',
    dateFormat : "DD, MM d"
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top