JQuery Datepicker – sin fecha predeterminada

Deseo eliminar la fecha predeterminada en mi JQuery Datepicker.

Intento el siguiente código:

$(this).datepicker({defaultDate: ''}); 

Pero parece que no funciona. La fecha de hoy todavía está seleccionada como predeterminada.

Resolví el problema usando un campo alternativo oculto:

 

y el siguiente script:

  

Luego, utilicé el campo #Date oculto en mis rutinas de validación.

Ninguna de las respuestas en el momento de escribir estas líneas realmente funcionó para mí, así que esta fue mi solución improvisada a partir de un par de respuestas (para un datepicker en línea).

  $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight 

Esto es realmente un problema abierto con jQuery UI Datepicker . Aquí está el boleto para el problema:

Ticket 8159

En el corazón de este problema está el hecho de que Datepicker maneja incorrectamente un valor predeterminado de null . De las soluciones ofrecidas aquí, me gusta la de j-polfer la mejor y la he votado por ese motivo. El motivo por el que esta solución funciona, sin embargo, es porque hay un parche integrado en el método setDate para borrar la selección si se pasa null al parámetro de fecha. Pero quería averiguar por qué el Datepicker no respondía correctamente al DefaultDate: null en las opciones, por lo que eché un vistazo a la fuente.

Descubrí que necesitaba hacer tres cambios en el código fuente de Datepicker para solucionar este problema. Aquí están los cambios que hice:

  1. El método _getDefaultDate devolvió la fecha actual cuando la opción defaultDate era nula o faltaba (este es el corazón del problema).

Cambié este método de esto …

  _getDefaultDate: function(inst) { return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date())); } 

a esto….

 _getDefaultDate: function(inst) { var def = this._get(inst, "defaultDate"); return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null; }, 
  1. El método _setDate estaba configurando el día seleccionado en el día actual cuando se pasó null al parámetro de fecha. Cambié a líneas para corregir esto:

Cambié esta línea …

 inst.selectedDay = inst.currentDay = newDate.getDate(); 

a…

 inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate(); 

y esta línea …

 this._adjustInstDate(inst); 

a…

 if (date != null) { this._adjustInstDate(inst); } 
  1. Por último, el método _generateHTML no manejó un valor de retorno de null desde _getDefaultDate .

Así que cambié esta línea …

  (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ? 

a…

 (defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ? 

Eso es. Ahora, la opción datepicker defaultDate responde de forma más intuitiva a un valor de nulo que se pasa o a esta opción que falta.

 $('#test').datepicker({ altField: '#alt'}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: null}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: 0}); // Today selected $('#test').datepicker({ altField: '#alt', defaultDate: +1}); // Tomorrow selected $('#test').datepicker({ altField: '#alt', defaultDate: -1}); // Yesterday selected 

Aquí hay una demostración en JSFIDDLE : demo de Datepicker con defaultDate null

Tenga en cuenta que estos cambios no se han probado exhaustivamente, por lo que puede haber otros problemas derivados del hecho de que el método _getDefaultDate ahora podría devolver nulo. ¡Entonces haz tus propias pruebas primero! 😉

¡Espero que esto ayude a alguien! 🙂

En base a las respuestas publicadas aquí, logré hacer algo que funcionara. Para mis propósitos, tenía un calendario siempre visible. Si necesita esto para un calendario emergente, debe poder utilizar el controlador onSelect existente para realizar algo similar la primera vez que se abre.

 $("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active"); 

Afortunadamente, es así de simple con la última versión de jQuery UI (1.10.2 al momento de escribir esto). No parece interferir con el correcto funcionamiento del widget. La única advertencia es que el uso de getDate getter resultados en lo que normalmente habría sido la fecha seleccionada por defecto.

A los efectos de mi código, esto es aceptable ya que mis usuarios no pueden continuar (ni siquiera tienen el botón Continuar) hasta que hayan hecho clic en una fecha válida del selector. Si este no es el caso para usted, algo como la respuesta de Florian Peschka debería darle lo que necesita.

Para abrir el cuadro de diálogo datepicker debe abrirse en algún mes de algún año. Quiero decir, ¿quieres mostrar este cuadro de diálogo y estar en blanco? …

Creo que si no quieres pasar ninguna fecha predeterminada, lo mejor que puedes hacer es obtener la fecha actual con:

 $(document).ready(function() { $('#datepicker').datepicker(); }); 

Pasar esto fallará, debido a fecha predeterminada dada, no nula pero en blanco

 $(this).datepicker({defaultDate: ''}); 

Esto es algo que hará lo que se pretendía en el código anterior

 $(this).datepicker({defaultDate: null}); 

pero su comportamiento es el mismo que el primer bloque de código en esta respuesta.

Tengo el mismo problema usando datepicker en línea . El complemento agrega en cell / td de hoy la clase .ui-datepicker-current-day y .ui-state-active. Mi solución es usar una clase personalizada como .ui-datepicker-selected-day e implementa beforeShowDay para gestionar la visualización del día seleccionado. Algo como eso:

 $("datepicker").datepicker({ beforeShowDay: function(date) { var dateIso = $.datepicker.formatDate("yy-mm-dd", date); var dateSelected = $("input").val(); var classDate = ""; if(dateSelected === dateIso){ return [false,"ui-datepicker-selected-day"]; }else{ return [true]; } } 

Muestra de css para poner en “resaltar” la celda:

 .ui-widget-content .ui-datepicker-selected-day .ui-state-active{ background-color: red; } + disable some css from the plugin 

$('.datefield').val('') para mostrar en blanco en lugar de mostrar la fecha predeterminada.

Sé que esta es una vieja pregunta, y la encontré porque tenía el mismo requisito; no muestre una fecha en la entrada (cuadro de texto), haga que el usuario seleccione una fecha del selector de fecha.

The Markup (MVC)

 
@Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})

Salida de HTML:

 

Script (en el documento listo):

 $('.DateShipOn').datepicker({ constrainInput: true, display: true, border: true, background: true, maxDate: "+1m", minDate: new Date('@minDate') }); $('.DateShipOn').datepicker("setDate", new Date()); 

El efecto del código anterior es que el cuadro de entrada tiene el valor de la variable ‘minDate’ en la pantalla Y al hacer clic en la entrada, el marcador de fecha cae y se selecciona ‘minDate’ por defecto.

Nota: no permitimos la entrada manual, esta es la razón del atributo ‘solo lectura’.

Resolución:

Todo lo que tenía que hacer, en mi caso, era comentar / eliminar la línea:

 $('.DateShipOn').datepicker("setDate", new Date()); 

El resultado:

El efecto es eso en la pantalla;

  • No hay un valor de fecha predeterminado en la entrada (cuadro de texto)
  • El usuario no puede escribir la entrada (cuadro de texto)
  • El selector de fecha cae sin una fecha predeterminada seleccionada
  • El minDate evita las fechas antes de que se seleccione el valor minDate
  • MaxDate evita las fechas posteriores a la selección del valor de maxDate

Nota: Para mi requerimiento, ‘+ 1m’ para maxDate limita la selección de fecha a solo los 30 días desde el valor de minDate.

Espero que esto ayude a alguien.

Tuve un problema similar, pero con un comportamiento específico.

(Como nota al margen, creo que el comportamiento esperado debería ser comenzar con la fecha actual en el calendario, pero no seleccionarla).

Mi implementación incluía un calendario en línea con una entrada oculta altField . Lo que hice fue eliminar la opción altField y agregar una función onSelect que la actualizó. De esta forma, la fecha de hoy todavía parece seleccionada, pero el campo oculto que representa el valor real permanece vacío.

Mi solución implica anular el apéndice de jQuery para que podamos eliminar los elementos cada vez que el HTML se regenera y se agrega al div. Esto corrige un destello de la fecha predeterminada al cambiar meses y también borra el vuelo estacionario.

 (function($) { var origAppend = $.fn.append; $.fn.append = function () { return origAppend.apply(this, arguments).trigger("append"); }; })(jQuery); var datePickerDiv = $("#date-picker"); datePickerDiv.bind("append", function() { $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over"); $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover"); }); datePickerDiv.datepicker(); 

Funciona para mi:

 $(document).ready(function() { $("#datepicker .ui-state-active").removeClass("ui-state-active"); $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight"); $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today"); }); 

¿A qué te refieres con querer “eliminar” la fecha predeterminada?

¿Cómo crees que se abrirá el marcador cuando no tenga un mes para empezar? Tienes que tener una fecha predeterminada.

Edite en su comentario

Establezca una fecha predeterminada como desee y marque, si el usuario la ha cambiado. Si es así, seleccionó una fecha personalizada.

Otro enfoque sería crear una variable que se establezca como true tan pronto como el usuario haga clic en el campo datepicker.

Si el usuario envía el formulario, verifica esa variable. Si es true , el usuario ha seleccionado una fecha. Si no, no tocó el campo datepicker.