jQueryUI Datepickerを使用していて、[今日]ボタンを表示しています。しかし、それは機能しません。また、デモでは機能しません：http ://www.jqueryui.com/demos/datepicker/#buttonbar
このボタンを押すと、今日入力を入力したいと思います。
それを機能させることは可能ですか？
67085 次
19 に答える
87
CDNを使用する機能が削除されるため、jQueryソースコードを変更するソリューションは好きではありません。代わりに、ページのJavaScriptスコープファイルのどこかに@meesterjeevesの回答に基づいてこのコードを含めることで、_gotoToday関数を再割り当てできます。
$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
// the below two lines are new
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}
上記のコードは、上記の2行を除いて、バージョン1.10.1のjQueryUIDatepickerと基本的に同じです。gotoCurrentそのオプションは「今日」の新しい意味では意味をなさないため、マンブルジャンボ全体を実際に削除することができます。
于 2011-09-30T17:14:55.873 に答える
47
彼らのコードは実際には壊れていません。ほとんどの人が期待することをしません。これは、今日の日付を入力ボックスに入力することです。それが行うことは、ユーザーがカレンダーで今日の日付を確認できるように強調表示することです。別の月または別の年にオフになった場合、ユーザーがすでに選択した日付の選択を解除せずに、カレンダーが今日のビューに戻ります。
より直感的にするには、ニーズに合わせてプラグインコードを更新する必要があります。どうなるか教えてください。
非圧縮バージョンのjquery-uijavascriptを入手する必要があります。バージョン1.7.2を見ていて、「_ gotoToday」関数は6760行目にあります。その_gotoTodayに呼び出しを追加して、6831行目の_selectDate（）関数を起動するだけです。:)ハッピーコーディング。
于 2009-07-02T19:35:44.557 に答える
29
これを処理する最良の方法は、ライブラリ自体の外部で_goToTodayメソッドをオーバーライドすることだと思います。これで問題は解決しました。
var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
old_goToToday.call(this,id)
this._selectDate(id)
}
シンプルで、イベントをハックしたり、基盤となる機能を変更したりする必要はありません
于 2012-04-10T18:25:41.693 に答える
10
todayBtn次のオプションを使用する必要があります。
$("...").datepicker({
todayBtn: "linked"
})
（の代わりにtodayBtn: true）。
今日Btn
ブール、「リンク」。デフォルト：false
trueまたは「リンク」の場合、日付ピッカーの下部に「今日」ボタンを表示して、現在の日付を選択します。trueの場合、[今日]ボタンは現在の日付のみを表示に移動します。「リンク」されている場合は、現在の日付も選択されます。
詳細については、次のリンクを参照してください：http: //bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn
于 2017-04-02T07:12:03.657 に答える
9
次の2行のコードを_gotoToday関数に追加するだけです...
/* Action for current link. */
_gotoToday: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
}
this._notifyChange(inst);
this._adjustDate(target);
/* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
this._setDateDatepicker(target, new Date());
this._selectDate(id, this._getDateDatepicker(target));
},
于 2010-07-26T17:30:29.853 に答える
9
これはすでに受け入れられていることはわかっていますが、SamyZineのアイデアに基づいた拡張ソリューションを次に示します。これはjQuery1.6.3とjQueryUI1.8.16を使用していて、Firefox6で機能しました。
$('.ui-datepicker-current').live('click', function() {
// extract the unique ID assigned to the text input the datepicker is for
// from the onclick attribute of the button
var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
// set the date for that input to today's date
var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
// (optional) close the datepicker once done
$associatedInput.datepicker("hide");
});
blur()また、$associatedInputページ内の次の入力/選択に焦点を合わせたい場合もありますが、それは一般的に行うのは簡単ではなく、実装固有です。
例として、私はレイアウトに使用されるテーブルで作業していたページでこれを行いました（始めないでください、それは悪い習慣です！）：
$associatedInput.closest('tr').next('tr').find('input,select').first().focus();
于 2011-09-23T04:22:58.007 に答える
7
jQueryのソースコードにコードを追加するというアイデアは好きではありません。_gotoTodayまた、JavaScriptコードのどこかに実装をコピーして貼り付け、下部に行を追加してメソッドをオーバーライドしたくありません。
だから、私はこのコードを使用してそれを微調整しました：
(function(){
var original_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(id) {
var target = $(id),
inst = this._getInst(target[0]);
original_gotoToday.call(this, id);
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
}
})();
于 2012-03-16T15:12:11.917 に答える
3
私はちょうどそれを取り除きました。
ページの一部であるCSSファイルの場合：
.ui-datepicker-current {
visibility:hidden
}
于 2009-07-14T20:15:58.050 に答える
2
その目的のために、日付ピッカーにオプションselectCurrentを追加しました。
同じことを行うには、非圧縮のjsファイルに以下を追加する必要があります。
1）関数Datepicker（）の終わりに向かって、以下を追加します。
selectCurrent: false // True to select the date automatically when the current button is clicked
2）_gotoToday関数の最後に、以下を追加します。
if (this._get(inst, 'selectCurrent'))
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
于 2011-01-26T11:05:01.143 に答える
2
ドキュメントには、どのタイトルを介して変更できる「今日」のボタンが記載されています
.datepicker('option', 'currentText', 'New Title')
表示された月を現在に変更するだけです。この動作も構成できます
.datepicker('option', 'gotoCurrent', true);
その後、ボタンを押すと、表示されている月が選択した日付に変わります。
このボタンで日付を送信することは、設計上不可能のようです。
于 2009-07-02T09:59:17.087 に答える
2
以下のコードを試して、[今日]ボタンをクリックして入力ボックスに現在の日付を入力することもできます。_gotoTodayの関数（関数の最後）に以下のコードを入れるだけjquery.ui.datepicker.jsです。
this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));
jquerydatepickerのバージョン1.8.5を使用していることに注意してください。
于 2010-12-30T05:40:31.630 に答える
2
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
于 2013-07-26T07:50:02.570 に答える
2
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<input type="text" id="id">于 2016-04-05T05:27:07.550 に答える
1
デートピッカーは、少なくとも10倍素晴らしいものになるようにリファクタリングされています。新しいバージョンはこの問題に対処します。
于 2011-02-28T04:46:18.973 に答える
1
これをスクリプトに追加することもできます。
$('.ui-datepicker-current').live('click', function() {
$(".datepicker").datepicker("setDate", date);
});
（.clickではなく.live関数を使用してください）
于 2011-09-09T08:25:23.067 に答える
1
これは、live（）アプローチではなく、DatepickerのbeforeShowコールバック関数を使用するハックです。
,beforeShow: function(input, datepicker) {
setTimeout(function() {
datepicker.dpDiv.find('.ui-datepicker-current')
.text('Select Today')
.click(function() {
$(input)
.datepicker('setDate', new Date())
.datepicker('hide');
});
}, 1);
return {};
}
于 2013-08-15T23:02:01.910 に答える
1
これは単純なハックです
$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}
$( “#datepicker” ).datepicker({
showButtonPanel: true
});
});
于 2017-02-28T04:12:21.697 に答える
0
私はそれを別の方法で解決しました。
日付に移動すると、（次の月/前の月をクリックした後）すでに選択されている場合でも、その日をクリックすることを忘れないでください。
ここでは、月/年を移動しながら入力フィールドを直接更新します。これは、[今日]ボタンがクリックされたときにも起動します。また、選択が変更されたときに必ず変更イベントを発生させる必要があります。
$input.datepicker({
...
onChangeMonthYear: function (year, month, inst)
{
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
if (!isNaN(date))
{
input.value = $.datepicker.formatDate("dd M yy", date);
$input.change();
}
}
}
于 2019-06-08T08:07:16.077 に答える
-1
（これは問題ではないことに注意してください。他のソリューションが機能しなかったため、ソリューションを提供することで役立つように努めています。）
デートピッカーを他の答えで隠しておくことができませんでした。カレンダーが閉じてから再び開きます。以下のコードは、[今日]ボタンを変更して日付を現在の日に設定し、カレンダーを閉じるために機能しました。
jQuery UI-v1.11.4jQueryJavaScriptライブラリv1.11.1IE11.0.28
完全を期すためにデフォルトを含めました。
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});于 2016-02-27T02:28:53.443 に答える