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


85

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

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

私はドキュメントを整理してきましたが、解決策として何も飛び出しませんでした。また、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にはありませんが、魅力のように機能します。

回答:


86

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

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

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

ユーザーは(読み取り専用フィールドでも)強調表示してから、バックスペースまたはDeleteキーを使用して、_clearDate関数を使用して日付を削除できます。

ソース


9
ワオ。なぜそれが公表されないのですか?!jQueryUIのAPIからも除外されています....意味がありません。----解決策が私の質問によりよく一致するように、あなたの投稿を編集しました。とても素敵な発見
Cory Danielson 2012年

私の編集を受け入れ、不完全なコードのコピー/貼り付けダンプではなく、私の質問に一致するようにあなたの答えを微調整しました
Cory Danielson 2012年

あなたの編集はすでにアクティブではありませんか?編集を受け入れるオプションが表示されません... :)
Leniel Maccaferri 2012

3
いや、それは大丈夫です。私の元の投稿に含まれている解決策とあなたの解決策の両方が、このページへの道を見つけるほとんどすべての人に役立つと思います。keyCode 8と46が何であるか、またはthis_clearDates()の正確な内部にあるものについてのコメント
Cory Danielson

2
これを正確にどこに置きますか?
w0051977 2017

63

試しましたか:

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

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


現在の日付に従って入力したい日付を編集するために使用する日付ピッカー入力のあるフォームがあります。私は、現在の日付と「SETDATE」を使用する前に、私の編集フォームをリセットするには、この解決策を見つけるが、私はフォーマットの問題を抱えている:なし('setDate', null)、私は私が望むフォーマットしている(DD / MM / YYYY)私はそれを使用する場合、私は持っているMMを/ DD / YYYY ...唯一の違いは、の使用('setDate', null)です。理由は何ですか?
ミカエルレジェ2017

申し訳ありませんがミカエル-それについてはわかりません。stackoverflow.com/questions/1328025/…に従って日付をnullに設定した後、フォーマットをリセットしようとしましたか?
DavidWainwright

22

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

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

私はあなたのjsfiddleを変更しました:http://jsfiddle.net/tF5MH/9/


うん、ありがとう。あなたは正しいです。おかしいですが、この問題はjQuery UIDatepickerデモページにも存在します。jqueryui.com/demos/datepicker/#date-range日付を設定し、テキストボックスを空にすると、問題が発生します
Cory Danielson

1
確かに、これが最もクリーンな方法です。 date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X 2017年


10

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

$('#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 );
});

8

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

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

1
この答えは、Firefoxでは機能しませんが、おそらく他の答えよりも優れています。また、に置き換えるdocument.getElementById(this.id).value = '';$(this).val('').change();、確立された変更ハンドラーも呼び出されるため、さらに改善されます。
ライアン

3

[クリア]をクリックすると、日付ピッカーの最大日付属性がリセットされます。

jqueryのWebサイトから

Get or set the maxDate option, after init.

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

はい、その通りです。私はj08691をベストアンサーとしてマークしました。彼は、うまくいったフィドルに叩き込むことができるコードを私にくれたからです。残念ながら、両方を最高としてマークすることはできませんでした:/
Cory Danielson

はい、私はあなたの問題に関連するいくつかのコードでそれをもう少しよく説明するつもりでしたが、彼は私をそれに打ち負かしました。:)
マークW

3

少し手遅れだとは思いますが、これが私のためにそれを行った単純なコードの平和です:

$('#datepicker-input').val('').datepicker("refresh");

更新によって余分なことが行われることはわかりません。値をクリアするだけです。
omarjebari 2016

1
コントロールをクリアするためにパブリック呼び出しとプライベート関数を使用しているのが好きです。
snowYetis 2016

1
@Miguel BinPar、私はこの投稿が古いことを知っていますが、あなたの答えはこれを理解しようとした3日後に私のために働いた唯一の答えです。ありがとう!
kejo

3

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

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

ここで、$( '#datepicker')は入力要素のIDです。


JSFiddleでそのソリューションを試しましたが、機能しませんでした。jsfiddle.net/tF5MH/407入力の下の再生手順を参照してください。を使用.val('')すると、入力が空になりますが、カレンダーの日付ピッカーの制限はクリアされません。
Cory Danielson 2016

最新バージョンのjQueryUI(v1.12.0)も試してみましたが、機能しませんでした。
Cory Danielson 2016

トンオマールに感謝します。私は過去20分からこの実用的なソリューションを探しています。あなたは命の恩人です!
マヘシュ

0

テキストフィールドにフォーカスがない場合(日付ピッカーが開いている場合のように見える)にIE8の「ページバック」ショートカットであるバックスペースキーを説明するためのLenielMacaferiのソリューションの修正バージョン。

それは私にとってはうまくいかなかった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

私の日付ピッカーの初期化は次のようになります。

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: '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: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

解決策はこの* data-handler = "hide" *から来ました


0

私はこのコードを使用して、フィールドとすべてのシェナンニガンをクリアします。ユースケースに空のフィールドが必要でした

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

どういうわけか.val('')私にはうまくいきませんでした。しかし、jQueryをバイパスすることでそれが実現しました。私の意見では、.datepicker( 'clear')オプションがないという欠点があります。


0

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

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
$("#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

Firefoxでは、日付ピッカー制御がデフォルトで無効になっている形式で(プログラム的に)機能します。

$("#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

-1

私が試したようにそれが正しく動作するこのソリューションを試してみてください

$('selector').datepicker('setStartDate', 0);

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.