¿Cómo borro / restablezco las fechas seleccionadas en el calendario de jQuery UI Datepicker?

85

¿Cómo restablezco los valores del calendario del selector de fechas? ... ¿Las restricciones de fecha mínima y máxima?

El problema es que cuando borro las fechas (eliminando los valores del cuadro de texto), las restricciones de fechas anteriores aún se aplican.

He estado revisando la documentación y nada saltó como solución. Tampoco pude encontrar una solución rápida en una búsqueda de SO / Google

http://jsfiddle.net/CoryDanielson/tF5MH/


Solución:

// 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 () es un método privado del objeto DatePicker. No lo encontrará en la API pública en el sitio web de jQuery UI, pero funciona de maravilla.

Cory Danielson
fuente

Respuestas:

86

Estaba tratando de lograr esto mismo, es decir, vaciar el selector de fechas para que los filtros ingresados ​​por el usuario pudieran eliminarse. Buscando un poco en Google, encontré este dulce código:

Puede agregar la función de borrar incluso en campos de solo lectura. Simplemente agregue el siguiente código a su selector de fechas:

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

Las personas podrán resaltar (incluso campos de solo lectura) y luego usar la tecla de retroceso o eliminar para eliminar la fecha usando la _clearDatefunción.

Fuente

Leniel Maccaferri
fuente
9
Guau. ¿Por qué no se publicaría eso? También está excluido de la API en jQuery UI ... no tiene sentido. ---- Edité tu publicación para que la solución coincida mejor con mi pregunta. Muy buen hallazgo
Cory Danielson
acepte mi edición, modifiqué su respuesta para que coincida con mi pregunta en lugar de ser un volcado de copiar / pegar de código incompleto
Cory Danielson
¿Tu edición ya no está activa? No veo una opción para aceptar su edición ... :)
Leniel Maccaferri
3
No, está bien. Creo que tanto la solución incluida en mi publicación original como la tuya ayudarán a casi cualquier persona que encuentre el camino a esta página. Tal vez algunos comentarios sobre qué son los códigos clave 8 y 46 o qué thisestá exactamente dentro de _clearDates ()
Cory Danielson
1
¿Dónde pones esto exactamente?
w0051977
63

Has probado:

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

Eso debería funcionar de acuerdo con la documentación de la API

DavidWainwright
fuente
Tengo un formulario con alguna entrada de selector de fecha que utilizo para editar alguna fecha que quiero completar de acuerdo con la fecha actual. Encuentro esta solución para restablecer mi formulario de edición antes de usar "setDate" con la fecha actual, pero tengo un problema de formato: sin el ('setDate', null)tengo el formato que quiero (DD / MM / AAAA) , pero cuando lo uso tengo MM / DD / YYYY ... la única diferencia es el uso de ('setDate', null), ¿alguna idea de por qué?
Mickaël Leger
Lo siento Mickael, no sé nada de eso. ¿Ha intentado restablecer el formato después de establecer la fecha en nula según stackoverflow.com/questions/1328025/… ?
DavidWainwright
22

solo necesita establecer las opciones nuevamente en nulo:

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

He cambiado su jsfiddle: http://jsfiddle.net/tF5MH/9/

Simon Wang
fuente
sí, gracias. Estás en lo correcto. Es gracioso, este problema incluso existe en la página de demostración de jQuery UI Datepicker. jqueryui.com/demos/datepicker/#date-range Establezca la fecha hasta, luego vacíe el cuadro de texto y el problema existe
Cory Danielson
1
Esta es la forma más limpia, seguro. date.datepicker( "option" , {setDate: null, minDate: null, maxDate: null} );
AL3X
13
$('.date').datepicker('setDate', null);
Soni Sharma
fuente
10

Intente cambiar el código de compensación a:

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

Pruebe esto, esto agregará un botón de borrar en el calendario de Jquery que borrará la fecha.

$("#DateField").datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
         onClose: function (dateText, inst) {
        if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
        {
            document.getElementById(this.id).value = '';
        }
    }
});
sohaib
fuente
1
Esta respuesta probablemente sea mejor que las demás, aunque no funciona en Firefox. Y reemplazar document.getElementById(this.id).value = '';con lo $(this).val('').change();hace aún mejor porque entonces también se llama a cualquier controlador de cambio establecido.
Ryan
3

Restablezca los atributos de fecha máxima en su selector de fechas cuando haga clic en borrar.

Desde el sitio web de jquery

Get or set the maxDate option, after init.

    //getter
    var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
    //setter
    $( ".selector" ).datepicker( "option", "maxDate", '+1m +1w' );
Mark W
fuente
Sí, tienes razón. Marqué j08691 como la mejor respuesta porque me dio un código que pude introducir en el violín que funcionó. Desafortunadamente, no pude marcarlos a ambos como los mejores: /
Cory Danielson
Sí, lo sé, iba a explicarlo un poco mejor con un código relativo a tu problema, pero me adelantó. :)
Mark W
3

Sé que es un poco tarde, pero aquí hay un código simple que lo hizo por mí:

$('#datepicker-input').val('').datepicker("refresh");
Miguel BinPar
fuente
No veo que la actualización haga algo más. Simplemente puede borrar el valor.
omarjebari
1
Me gusta que esté usando una llamada pública frente a una función privada para borrar el control.
snowYetis
1
@Miguel BinPar, sé que esta publicación es antigua, pero tu respuesta es la única respuesta que funcionó para mí después de 3 días de intentar resolver esto. ¡Gracias!
kejo
3

La respuesta obvia fue la que funcionó para mí.

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

donde $ ('# datepicker') es el id del elemento de entrada.

omarjebari
fuente
Probé esa solución en JSFiddle y no funcionó. jsfiddle.net/tF5MH/407 Vea los pasos de reproducción debajo de las entradas. El uso .val('')vaciará las entradas, pero no borrará las restricciones del selector de fechas en los calendarios.
Cory Danielson
También probé con la última versión de jQuery UI (v1.12.0) y no funcionó.
Cory Danielson
Muchas gracias omar. He estado buscando esta solución de trabajo desde los últimos 20 minutos. ¡Eres un salvavidas! ..
Mahesh
0

Una versión modificada de la solución de Leniel Macaferi para tener en cuenta que la tecla de retroceso es un atajo de "retroceso de página" en IE8 cuando un campo de texto no tiene el foco (que parece ser el caso cuando el selector de fechas está abierto).

También se usa val()para despejar el campo ya _clearDate(this)que no funcionó para mí.

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

La inicialización de mi selector de fechas se ve así:

    dateOptions = {
                changeYear: true,
                changeMonth: true,
                dateFormat: 'dd/mm/yy',
                showButtonPanel: true,
                closeText: 'Clear',
            };

Por lo tanto, el botón "Listo" predeterminado tendrá texto "Borrar" .

Ahora, dentro de datepicker.js encuentra la función interna '_attachHandlers' Se ve así:

 _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 () {...}
                    ... 

Y cambie la función de ocultar para que se vea así:

                   ...
                   hide: function () {
                        $.datepicker._clearDate(id);
                        $.datepicker._hideDatepicker();
                    },
                    ...

La solución vino de este * data-handler = "hide" *

Alexandru Banaru
fuente
0

Utilizo este código para limpiar el campo y todas las travesuras. Necesitaba un campo vacío para mi caso de uso

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

Por alguna razón .val('')no funcionaría para mí. Pero eludir jQuery lo hizo. En mi opinión, es un error que no haya una opción .datepicker ('borrar').

Tschallacka
fuente
0

Mi forma de resolver este problema

Cambiar var 'controles' en ui.js

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>" : "");

Luego agregue una var 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

Y antes de mostrar la función

$(".i_date").datepicker
(
    {
        beforeShow: function (input, inst)
        {
            setTimeout
            (
                function () 
                { 
                    $('.ui-datepicker-clear').bind('click', function() { $(input).val(''); });
                }, 
                0
            );
        }
    }
);
Дмитрий Бабушкин
fuente
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('');
            }
        }
    });
Jain Abhishek
fuente
0

En Firefox funciona para mí en forma (mediante programación), donde el control de selector de fecha está deshabilitado de forma predeterminada:

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

Pruebe esta solución, funcionará correctamente como lo he intentado

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

 $('selector').datepicker('setEndDate', 0);
$('selector').datepicker('update');
gaurav bhatt
fuente