web-dev-qa-db-ja.com

jQuery UI Datepickerカレンダーで選択した日付をクリア/リセットするにはどうすればよいですか？

日付ピッカーのカレンダー値をリセットするにはどうすればよいですか？..最小および最大の日付制限は？

問題は、（テキストボックスの値を削除して）日付をクリアしても、以前の日付の制限が引き続き適用されることです。

documentation をソートしてきましたが、解決策として何も飛び出しませんでした。また、SO/Google検索で簡単な修正を見つけることができませんでした

http://jsfiddle.net/CoryDanielson/tF5MH/

解決策：

// from & to input textboxes with datepicker enabled
var dates = $("input[id$='dpFrom'], input[id$='dpTo']");

// #clearDates is a button to clear the datepickers
$('#clearDates').on('click', function(){
    dates.attr('value', '');
    dates.each(function(){
        $.datepicker._clearDate(this);
    });
});​​

_.clearDate（）は、DatePickerオブジェクトのプライベートメソッドです。 jQuery UIのWebサイトの公開APIにはありませんが、魅力のように機能します。

jqueryjquery-uijquery-ui-datepicker
77
Cory Danielson

私はこれをまさに達成しようとしていました。つまり、ユーザーが入力したフィルターを削除できるように、日付ピッカーを空にしました。少しグーグルでこの甘いコードを見つけました：

読み取り専用フィールドでもクリア機能を追加できます。次のコードを日付ピッカーに追加するだけです。

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

人々は（読み取り専用フィールドでも）強調表示し、_clearDate関数を使用してバックスペースまたは削除キーを使用して日付を削除できます。

ソース

80
Leniel Maccaferri

試しましたか：

$('selector').datepicker('setDate', null);

APIドキュメント に従って動作するはずです

54
DavidWainwright

オプションを再度nullに設定する必要があります。

dates.datepicker( "option" , {
    minDate: null,
    maxDate: null} );

Jsfiddleを変更しました： http://jsfiddle.net/tF5MH/9/

21
Simon Wang
$('.date').datepicker('setDate', null);
12
Soni Sharma

クリアコードを次のように変更してみてください。

$('#clearDates').on('click', function(){
    dates.attr('value', '');
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "maxDate", null );
    $("input[id$='dpFrom'], input[id$='dpTo']").datepicker( "option", "minDate", null );
});
10
j08691

これを試してください。これにより、日付をクリアするJqueryカレンダーにクリアボタンが追加されます。

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});
7
sohaib

クリアをクリックすると、日付ピッカーの最大日付属性をリセットします。

Jqueryウェブサイトから

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
3
Mark W

明らかな答えは私のために働いたものでした。

$('#datepicker').val('');

ここで、$（ '＃datepicker'）は入力要素のIDです。

2
omarjebari

私はそれが少し遅すぎることを知っていますが、これは私のためにそれをした簡単なコードの平和です：

$('#datepicker-input').val('').datepicker("refresh");
1
Miguel BinPar
$("#datepicker").datepicker({            
        showButtonPanel: true,
        closeText: 'Clear', 
        onClose: function () {
            var event = arguments.callee.caller.caller.arguments[0];                
            if ($(event.delegateTarget).hasClass('ui-datepicker-close')) {
                $(this).val('');
            }
        }
    });
0
Jain Abhishek

この問題を解決する私の方法

Ui.jsのvar 'controls'を変更します

controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "closeText") + "</button>" + "<button type='button' class='ui-datepicker-close ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
        this._get(inst, "clearText") + "</button>" : "");

次に、clearText変数を追加します

    this.regional[""] = { // Default regional settings
    closeText: "Done", // Display text for close link
    clearText: "Clear", // Display text for close link
    prevText: "Prev", // Display text for previous month link

そしてショー機能の前に

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);
0
Дмитрий Бабушкин

このコードを使用して、フィールドとすべてのshenannigansをクリアします。ユースケースに空のフィールドが必要でした

jQuery.datepicker._clearDate(window.firstDay);
window.firstDay.datepicker('setDate',null);
window.firstDay[0].value = '';

何らかの理由で.val('')が機能しません。しかし、jQueryをバイパスすることでできました。私の意見では、.datepicker（ 'clear'）オプションがないという欠陥です。

0
Tschallacka

私のdatepicker初期化は次のようになります：

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

したがって、デフォルトの 'Done'ボタンには 'Clear'テキストが含まれます。

さて、内部datepicker.js内部関数を見つける '_ attachHandlers'のような：

 _attachHandlers: function (inst) {
            var stepMonths = this._get(inst, "stepMonths"),
                id = "#" + inst.id.replace(/\\\\/g, "\\");
            inst.dpDiv.find("[data-handler]").map(function () {
                var handler = {
                    prev: function () {...},
                    next: function () {...},
                    hide: function () {
                        $.datepicker._hideDatepicker();
                    },
                    today: function () {...}
                    ...

そしてhide関数を次のように変更します：

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

The solution came from this *data-handler="hide"*

0
Alexandru Banaru

テキストフィールドにフォーカスがない場合（datepickerが開いている場合のように見える）IE8の「ページバック」ショートカットであるバックスペースキーを考慮したLeniel Macaferiのソリューションの修正バージョン。

val()が機能しなかったため、_clearDate(this)を使用してフィールドをクリアします。

$("#clearDates").datepicker().keyup(function (e) {
    // allow delete key (46) to clear the field
    if (e.keyCode == 46)
        $(this).val("");

    // backspace key (8) causes 'page back' in IE8 when text field
    // does not have focus, Bad IE!!
    if (e.keyCode == 8)
        e.stopPropagation();
});
0
Kidquick

Firefoxでは、datepickerコントロールがデフォルトで無効になっているフォームで（プログラムで）処理されます。

$("#txtDat2").prop('disabled', false); //temporary enable controls<br>
$("#txtDat2").val("YYYY-MM-DD"); //reset date to dd.mm.yyyyy
$("#txtDat2").prop('disabled', true); //back to default state
0
Isma