jQuery DatePicker - sin fecha predeterminada

Question

Quiero eliminar la fecha predeterminada en mi jQuery selector de fechas.

Puedo probar el siguiente código:

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

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

Answer 1

para abrir el diálogo selector de fechas que se debe abrir en algunos meses de algunos años. ? Es decir, que desea mostrar este cuadro de diálogo y estar en blanco ...

Creo que si no quiere pasar cualquier fecha por defecto, lo mejor que puede hacer es obtener la fecha actual con:

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

la superación de esta fallará, debido dada defaultDate, no es nulo, pero en blanco

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

esto es algo que va a hacer lo que pretende 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.

Answer 2

¿Qué quiere decir por querer "eliminar" la fecha predeterminada?

¿Cómo cree que el selector de fechas se abrirá cuando no tiene que empezar desde el mes ?! Usted tiene para tener una fecha predeterminada.

Editar en su comentario

Fije una fecha predeterminada que desee y comprobar, si el usuario ha cambiado. Si es así, seleccionó una fecha personalizada.

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

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

Answer 3

que tenía un problema similar, pero con un comportamiento específico.

(Como nota al margen, creo que el comportamiento esperado debe ser comenzar con la fecha actual en el calendario, pero no seleccionarlo.)

Mi aplicación incluye 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.

Answer 4

me dieron la vuelta al problema utilizando un altField oculto:

<div id="DatePicker"></div> 
<input type="hidden" value="" name="Date" id="Date" /> 

y la escritura siguiente:

<script> 
    $(function() { 

     $('#DatePicker').datepicker({ 
      altField: '#Date', // ID of the hidden field 
      altFormat: 'dd/mm/yy' 
     }); 

     // Remove the style for the default selected day (today) 
     $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day'); 

     // Reset the current selected day 
     $('#Date').val(''); 
    }); 
</script> 

Entonces, utilicé el campo #Fecha oculto en mis rutinas de validación.

Answer 5

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

Answer 6

Basado en 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 usar el controlador existente onSelect 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 partir de este escrito). No parece interferir con el correcto funcionamiento del widget. La única advertencia es que al usar el getter getDate se obtiene lo que normalmente sería la fecha seleccionada por defecto.

Para los fines de mi código, esto es aceptable ya que mis usuarios no pueden continuar (ni siquiera tienen el botón Continuar) hasta que hagan clic en una fecha válida del selector. Si este no es el caso para usted, algo como Florian Peschka's answer debe darle lo que necesita.

Answer 7

Tengo el mismo problema usando en línea datepicker. 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 así:

$("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 "punto culminante" de la célula:

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

Answer 8

Sé que esto es una cuestión de edad, y lo he encontrado 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.

El marcado (MVC) de salida

<div class="leftContent"> 
    @Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"}) 
</div> 

HTML:

<div class="leftContent"> 
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn"> 
</div> 

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 para el atributo 'readonly'.

Resolución:

Todo lo que tenía que hacer, en mi caso, fue el comentario/quitar la línea:

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

El resultado:

El efecto es que el monitor;

• No hay un valor de fecha predeterminado en la entrada (cuadro de texto)
• el usuario no puede escribir en la entrada (cuadro de texto)
• El selector de fecha cae sin fecha predeterminada seleccionada
• Los evita MinDate fechas anteriores el valor MinDate de ser seleccionado
• el MaxDate impide fechas después del valor MaxDate de ser seleccionado

Nota: Por mi requisito de la '+ 1m' para MaxDate limita la selección de fecha únicamente a los 30 días a partir del valor MinDate.

Espero que esto ayude a alguien.

Answer 9

Ninguna de las respuestas en el momento de escribir esto realmente funcionó para mí, así que aquí fue mi solución empedrado de un par de respuestas (para un selector de fechas 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 

Answer 10

Esto es en realidad una cuestión abierta con jQuery UI DatePicker. Aquí está el boleto para el tema:

Ticket 8159

En el corazón de este problema es el hecho de que selector de fechas trata incorrectamente un defaultDate valor de nula. De las soluciones que se ofrecen aquí, me gusta la de j-polfer el mejor y upvoted que por esa razón. La razón de esta solución funciona, sin embargo, se debe a que hay un parche integrado en el método setDate para borrar la selección si nula se pasa en el parámetro de fecha. Pero quería saber por qué el selector de fechas no estaba respondiendo correctamente a la defaultDate: null en las opciones, y por lo que tomó un vistazo a la fuente.

Descubrí que necesitaba hacer tres cambios en el código fuente Datepicker para solucionar este problema. Estos son los cambios que he realizado:

1. El método _getDefaultDate regresaron a la fecha actual cuando opción defaultDate era nula o desaparecidos (Este es el corazón del problema).

me cambió este método de esta ...

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

a esta ....

_getDefaultDate: function(inst) { 
    var def = this._get(inst, "defaultDate"); 
    return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null; 
}, 

2. El _setDate método se ponía el día seleccionado para el día actual cuando nulo se pasó en la fecha parámetro. He cambiado a líneas para corregir esto:

he cambiado 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); 
} 

3. Por último, el método _generateHTML no manejar un valor de retorno de null de _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 todo. Ahora la opción selector de fechasdefaultDate responde de forma más intuitiva a un valor de nula ser pasado en o a esta opción es 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í está una demostración en jsFiddle: Datepicker demo with defaultDate null

Tenga en cuenta: Estos cambios no se han probado exhaustivamente, lo que puede haber otras cuestiones derivadas del hecho de que el método _getDefaultDate ahora podría volver nulo. ¡Entonces haz tus propias pruebas primero! ;)

Espero que esto ayude a alguien! :)

Answer 11

Mi solución implica anular la adición de jQuery para que podamos eliminar los elementos cada vez que se regenera el HTML 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(); 

Answer 12

Obras para mí:

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