web-dev-qa-db-ja.com

jQuery datePickerの日付のリセット

カレンダーの下部にある日付ピッカーに「リセット」コントロールを追加したいのですが、「閉じる」コントロールを配置します。これにより、ユーザーは日付ピッカーに関連付けられた入力を空白（日付なし）にリセットできます。

バインド関数の記述方法がわかりません。具体的には、コントロールにバインドされている要素を保持する方法を教えてください。

        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();
                    }
                 )
           );
        }
jquerydatedatepickerresetjquery-ui-datepicker
14
KateYoak

これが実際の解決策です。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);
      }) ;
   }
}
21
pma_

私はより良い解決策を見つけました：

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

http://jsfiddle.net/swjw5w7q/1/

17
vellotis

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

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

  1. 完了ラベルをクリアに変更し、コードを追加してクリアします

    $(document).ready(function () {
    $("#startdate").datepicker({
        showOn: 'both',
        buttonImageOnly: true,
        buttonImage: "css/images/calendar.gif",
        showButtonPanel: true,
        closeText: 'Clear',
        onClose: function (dateText, inst) {
            $(this).val('');
        }
    });
});

  2. カレンダーに[キャンセル]ボタンを追加する

    $("#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);
    }
});
6
BehranG BinA

私はこれと同じ問題を経験していました。つまり、日付ピッカーを空にするオプションはありません。次に、この非常に便利なコメントを見つけて、コードの甘い部分を投稿しました here ：

読み取り専用フィールドでもクリア機能を追加できる簡単な方法の1つは、次のコードを既存の日付ピッカーコントロールに追加することです。

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

これにより、ユーザーは強調表示し（読み取り専用フィールドでも可能）、バックスペースを使用するか、内部_clearDate関数を使用して日付を削除することができます。

3
Leniel Maccaferri

これがスクープです

デフォルトの完了ボタンを使用して、カスタムのクリア関数をバインドできます。

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

0
girish2040