Data jQuery Data reset data

Question

Vorrei aggiungere un controllo "Reset" al datapicker nella parte inferiore del calendario, dove va il controllo "close". Ciò consentirebbe all'utente di reimpostare l'input legato a datepicker in bianco (nessuna data).

Non riesco a capire come scrivere la funzione di associazione, in particolare, come posso ottenere una sospensione dell'elemento associato al controllo?

 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

Ecco una soluzione funzionante, basta chiamare cleanDatepicker() prima di qualsiasi chiamata a 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

Stavo passando lo stesso problema, ovvero, nessuna opzione disponibile per svuotare il datepicker. Poi ho trovato questo commento super utile con un pezzo dolce di codice postato here:

Un modo rapido è possibile aggiungere la funzione chiara anche sulla sola lettura campi è quello di aggiungere il seguente codice al controllo datepicker esistente:

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

Ciò consentirà alle persone di evidenziare (che possono persino sui campi di sola lettura) e quindi utilizzare il backspace o eliminare per rimuovere la data utilizzando la funzione interna _clearDate.

Answer 3

1. modificare l'etichetta Fatto per cancellare e aggiungere il codice per cancellare

   $(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. Aggiungi pulsante Annulla per il calendario

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

ho trovato una soluzione più bello:

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

Ecco lo scoop

Possiamo usare il tasto predefinito fatto di legare una funzione chiara personalizzata.

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

Funziona come un fascino. Saluti :);)

crediti: Sébastien Renauld e Behrang Bina

Answer 6

Questo aggiungerà pulsante Cancella Jquery Calendario Questo sarà chiaro Data.

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