カレンダーの下部にある日付ピッカーに「リセット」コントロールを追加したいのですが、「閉じる」コントロールを配置します。これにより、ユーザーは日付ピッカーに関連付けられた入力を空白(日付なし)にリセットできます。
バインド関数の記述方法がわかりません。具体的には、コントロールにバインドされている要素を保持する方法を教えてください。
if (this.displayClear) {
$pop.append(
$('<a href="#" id="dp-clear">' + $.dpText.TEXT_CLEAR + '</a>')
.bind(
'click',
function()
{
c.clearSelected();
//help! reset the value to '': $(this.something).val('')
c._closeCalendar();
}
)
);
}
これが実際の解決策です。datepickerを呼び出す前にcleanDatepicker()を呼び出すだけです。
function cleanDatepicker() {
var old_fn = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
old_fn.call(this, inst);
var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");
$("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>Delete</button>").appendTo(buttonPane).click(function(ev) {
$.datepicker._clearDate(inst.input);
}) ;
}
}
私はより良い解決策を見つけました:
$(document).ready(function () {
$(".datepicker").datepicker({
showOn: 'focus',
showButtonPanel: true,
closeText: 'Clear', // Text to show for "close" button
onClose: function () {
var event = arguments.callee.caller.caller.arguments[0];
// If "Clear" gets clicked, then really clear it
if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
$(this).val('');
}
}
});
});
これにより、日付をクリアするJqueryカレンダーにクリアボタンが追加されます。
$("#txtDOJ").datepicker({
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
document.getElementById(this.id).value = '';
}
}
});
完了ラベルをクリアに変更し、コードを追加してクリアします
$(document).ready(function () {
$("#startdate").datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: "css/images/calendar.gif",
showButtonPanel: true,
closeText: 'Clear',
onClose: function (dateText, inst) {
$(this).val('');
}
});
});
カレンダーに[キャンセル]ボタンを追加する
$("#termdate").datepicker({
showOn: 'both',
buttonImageOnly: true,
buttonImage: "css/images/calendar.gif",
showButtonPanel: true,
beforeShow: function (input) {
setTimeout(function () {
var buttonPane = $(input).datepicker("widget")
.find(".ui-datepicker-buttonpane");
var btn = $('<button class="ui-datepicker-current'
+ ' ui-state-default ui-priority-secondary ui-corner-all"'
+ ' type="button">Clear</button>');
btn.unbind("click").bind("click", function () {
$.datepicker._clearDate(input);
});
btn.appendTo(buttonPane);
}, 1);
}
});
私はこれと同じ問題を経験していました。つまり、日付ピッカーを空にするオプションはありません。次に、この非常に便利なコメントを見つけて、コードの甘い部分を投稿しました here :
読み取り専用フィールドでもクリア機能を追加できる簡単な方法の1つは、次のコードを既存の日付ピッカーコントロールに追加することです。
}).keyup(function(e) {
if(e.keyCode == 8 || e.keyCode == 46) {
$.datepicker._clearDate(this);
}
});
これにより、ユーザーは強調表示し(読み取り専用フィールドでも可能)、バックスペースを使用するか、内部_clearDate
関数を使用して日付を削除することができます。
これがスクープです
デフォルトの完了ボタンを使用して、カスタムのクリア関数をバインドできます。
$("#date_picker").datepicker({minDate:myDate,dateFormat: 'yy-mm-dd',showButtonPanel:true,closeText:'Clear',
beforeShow: function( input ) {
setTimeout(function() {
var clearButton = $(input )
.datepicker( "widget" )
.find( ".ui-datepicker-close" );
clearButton.unbind("click").bind("click",function(){$.datepicker._clearDate( input );});
}, 1 );
}
});
魅力のように機能します。乾杯:);)
クレジット:SébastienRenauldおよびBehranG BinA