JQuery datePicker date reset

Question

Me gustaría agregar un control "Restablecer" al selector de fechas en la parte inferior del calendario, donde va el control "cerrar". Esto permitiría al usuario restablecer el ingreso vinculado a datepicker en blanco (sin fecha).

No puedo averiguar cómo escribir la función de vinculación, específicamente, ¿cómo puedo obtener una retención del elemento vinculado al control?

 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

Aquí está la solución de trabajo, simplemente llame a cleanDatepicker() antes de llamar al 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

Estaba pasando por este mismo problema, es decir, no hay ninguna opción disponible para vaciar el marcador de fecha. Entonces, encontré este comentario muy útil con un buen trozo de código publicado here:

Una forma rápida puede agregar la característica clara incluso en campos de sólo lectura es añadir el siguiente código a su control de selector de fecha existente:

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

Esto permitirá a las personas resaltar (que pueden incluso en los campos de Solo lectura) y luego usar el retroceso o eliminar para eliminar la fecha usando la función interna _clearDate.

Answer 3

1. cambiar la etiqueta Hecho para limpiar y añadir código para borrar

   $(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. Añadir botón Cancelar para el 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

he encontrado una solución mejor:

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

Aquí está la primicia

Podemos utilizar el botón predeterminado hecho de obligar a una función personalizada clara.

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

Funciona como un encanto. Saludos :);)

créditos: Sébastien Renauld y Behrang Bina

Answer 6

Esto agregará el botón Borrar en jQuery calendario que despejará la fecha.

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