Data resetowania JQuery datePicker

Question

Chciałbym dodać kontrolkę "Resetuj" do datepicker na dole kalendarza - gdzie idzie kontrola "zamknij". Umożliwiłoby to użytkownikowi zresetowanie danych wejściowych związanych z datepicker do pustego (bez daty).

Nie mogę wymyślić, jak napisać funkcję wiązania, w szczególności, w jaki sposób uzyskać chwyt elementu związany z formantem?

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

Answer 1

Oto działające rozwiązanie, wystarczy wywołać cleanDatepicker() przed każdym wywołaniem do datepicker.

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); 
     }) ; 
    } 
} 

Answer 2

Przechodziłem przez ten sam problem, to znaczy, nie ma opcji, aby opróżnić datepicker. I wtedy okazało to bardzo przydatna komentarz ze słodkim kawałkiem kodu pisał here:

Jeden szybki sposób można dodać wyraźną cechę nawet na tylko do odczytu pól jest, aby dodać następujący kod do istniejącej kontroli datepicker:

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

Umożliwia to podświetlanie osób (które mogą nawet w polach Tylko do odczytu), a następnie użycie opcji Backspace lub Delete w celu usunięcia daty przy użyciu wewnętrznej funkcji _clearDate.

Answer 3

1. Zmiana Sporządzono etykieta wyczyścić i dodać kod, aby usunąć

   $(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. Dodaj przycisk Anuluj, aby kalendarzu

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

Answer 4

znalazłem ładniejszy rozwiązanie:

$(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/

Answer 5

Oto miarka

Możemy użyć domyślnego zrobić przycisk, aby powiązać niestandardowy wyraźną funkcję.

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

Działa jak urok. Pozdrawiam :);)

ECTS: Sébastien Renauld i Behrang Bina

Answer 6

Doda przycisk Wyczyść Na Jquery Kalendarza To skasuje Data.

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