jQuery-UI fecha predeterminada datepicker

Question

Tengo un problema con jQuery-UI datepicker, he buscado y buscado pero no he encontrado la respuesta. Tengo el siguiente código:

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: '01-01-1985' 
    }); 
}); 
</script> 

Quiero que cuando el usuario haga clic en la entrada #birthdate que la fecha actual seleccionada para ser 01-01-1985, ahora se ha ajustado la fecha.

Answer 1

Intente pasar en un objeto Date en su lugar. No puedo ver por qué no funciona en el formato que ha entrado:

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985, 00, 01) 
    }); 
}); 
</script> 

http://api.jqueryui.com/datepicker/#option-defaultDate

Especifique una fecha real través de un objeto Fecha o como una cadena en el dateFormat actual, o un número de días a partir de hoy (por ejemplo, +7) o una cadena de valores y períodos ('y' para años, 'm' durante meses, 'w' para semanas, 'd' para días, p. ej. '+ 1m + 7d'), o nulo para hoy.

Answer 2

Puede probar con el código que se muestra a continuación.

Hará que la fecha predeterminada se convierta en la fecha que está buscando.

$('#birthdate').datepicker("setDate", new Date(1985,01,01)); 

Answer 3

Al ver que:

Ajuste la fecha para poner de relieve durante la primera apertura si el campo está en blanco. Especifique una fecha real mediante un objeto Date o una cadena en el formato de fecha actual, o varios días a partir de hoy (por ejemplo, +7) o una cadena de valores y períodos ('y' para años, 'm' para meses, 'w' por semanas, 'd' por días, p. ej. '+ 1m + 7d'), o nulo por hoy.

Si no se reconoce la dateFormat actual, todavía se puede utilizar el objeto Date utilizando new Date(year, month, day)

En su ejemplo, esto debería funcionar (no he probado es):

<script type="text/javascript"> 
$(function() {    
    $("#birthdate").datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     yearRange: '1920:2010', 
     dateFormat : 'dd-mm-yy', 
     defaultDate: new Date(1985,01,01) 
    }); 
}); 
</script> 

Answer 4

jQuery UI Datepicker está codificado para resaltar siempre la fecha local del usuario utilizando la clase ui-state-highlight. No hay una opción incorporada para cambiar esto.

Un método, que se describe de manera similar en otras respuestas a preguntas relacionadas, es para anular el CSS para esa clase para que coincida con ui-state-default de su tema, por ejemplo:

.ui-state-highlight { 
    border: 1px solid #d3d3d3; 
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; 
    color: #555555; 
} 

Sin embargo esto no es muy útil si están utilizando temas dinámicos, o si su intención es resaltar un día diferente (por ejemplo, tener "hoy" basado en el reloj de su servidor en lugar de en el del cliente).

Un enfoque alternativo es anular el prototipo de selector de fecha que es responsable de resaltar el día actual.

Suponiendo que está utilizando una versión minimizada de la IU javascript, los siguientes fragmentos pueden abordar estas inquietudes.

---

Si su objetivo es evitar que destacar el día de hoy por completo:

// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// remove the string "ui-state-highlight" 
_generateHtml.toString().replace(' ui-state-highlight', ''); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

Esto cambia el código en cuestión (unminimized para facilitar la lectura) a partir de:

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...] 

a

[...](printDate.getTime() == today.getTime() ? '' : '') + [...] 

---

Si su objetivo es cambiar la definición del selector de fecha de "hoy":

var useMyDateNotYours = '07/28/2014'; 
// copy existing _generateHTML method 
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML; 
// set "today" to your own Date()-compatible date 
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),'); 
// and replace the prototype method 
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML); 

Esto cambia el código en cuestión (unminimized para facilitar la lectura) a partir de:

[...]var today = new Date();[...] 

a

[...]var today = new Date(useMyDateNotYours);[...] 
// Note that in the minimized version, the line above take the form `L=new Date,` 
// (part of a list of variable declarations, and Date is instantiated without parenthesis) 

En lugar de useMyDateNotYours, por supuesto, también podría inyectar una cadena, función o lo que se ajuste a sus necesidades.

Answer 5

Si desea actualizar el día resaltado a un día diferente en función de la hora del servidor, puede anular el código del selector de fecha para permitir una nueva opción personalizada llamada localToday o lo que quiera llamar.

Un pequeño pellizco a la respuesta seleccionada en jQuery UI DatePicker change highlighted "today" date

// Get users 'today' date 
var localToday = new Date(); 
localToday.setDate(tomorrow.getDate()+1); // tomorrow 

// Pass the today date to datepicker 
$("#datepicker").datepicker({ 
    showButtonPanel: true, 
    localToday: localToday // This option determines the highlighted today date 
}); 

hemos anulado 2 métodos datepicker utilizar condicionalmente un nuevo escenario para el "hoy" fecha en lugar de un new Date(). La nueva configuración se llama localToday.

Anulación $.datepicker._gotoToday y $.datepicker._generateHTML así:

$.datepicker._gotoToday = function(id) { 
    /* ... */ 
    var date = inst.settings.localToday || new Date() 
    /* ... */ 
} 

$.datepicker._generateHTML = function(inst) { 
    /* ... */ 
    tempDate = inst.settings.localToday || new Date() 
    /* ... */ 
} 

Aquí hay una demo que muestra el código completo y uso: http://jsfiddle.net/NAzz7/5/

Answer 6

jQuery DatePicker defaultDate fijadas solo la fecha predeterminada que haya elegido en el calendario que aparece cuando haces clic en tu campo. Si desea que la fecha predeterminada aparezca en su entrada antes de que el usuario haga clic en el campo, debe dar un valor val() a su campo. Algo como esto:

$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" }); 
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1)); 

Answer 7

$("#birthdate").datepicker("setDate", new Date(1985,01,01))