Jquery UIテーマのアイコンでJQuery UI Datepickerを使用する
-
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;
}
いいね
素敵なこのアイコンを使用しました< 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);
}
});
});
ボタン/アイコンを手動で設定するルートに進むには、 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"
});