calendario - jquery datetimepicker example

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

Question

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

El problema es que cuando borro las fechas (eliminando los valores de la caja de texto), las restricciones de fecha anteriores todavía se aplican.

He estado revisando la documentation y nada salió como una solución. Tampoco pude encontrar una solución rápida en una búsqueda SO / google

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 como un encanto.

Answer 1

Has probado:

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

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

Answer 2

Intentaba lograr esto mismo, es decir, vaciar el marcador de fecha para que los filtros ingresados ​​por el usuario pudieran eliminarse. Buscando en Google encontré este dulce fragmento de código:

Puede agregar la característica clara incluso en los campos de solo lectura. Simplemente agregue el siguiente código a su selector de fecha:

}).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 función _clearDate .

Source

Answer 3

Intente cambiar el código de liberació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 );
});

Answer 4

La inicialización de mi datepicker se ve así:

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

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

Ahora, dentro de datepicker.js encuentra la función interna ''_attachHandlers'' Parece como sigue :

 _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 hide para que se vea así:

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

Answer 5

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

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

donde $ (''# datepicker'') es la identificación del elemento de entrada.

Answer 6

Mi manera de resolver este problema

Cambie var ''controls'' 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>" : "");

A continuación, 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
);
}
}
);

Answer 7

Por favor prueba esta solución, funcionará correctamente, como lo he intentado

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

Answer 8

Pruebe esto, esto agregará el botón Borrar en Jquery Calender 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 = '''';
}
}
});

Answer 9

Restablezca los atributos de fecha máxima en su selector de fecha 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'' );

Answer 10

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

$(''#datepicker-input'').val('''').datepicker("refresh");

Answer 11

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

También usa val() para borrar el campo ya que _clearDate(this) 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();
});

Answer 12

Uso este código para borrar el campo y todos los shenannigans. Necesité 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 pasando por alto jQuery lo hizo. En mi opinión, es un defecto que no existe la opción .datepicker (''clear'').

Answer 13

solo necesita configurar las opciones nuevamente para anular:

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

Cambié tu jsfiddle: http://jsfiddle.net/tF5MH/9/

Answer 14

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

Answer 15

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