fechas - jQuery-UI datepicker fecha predeterminada

datepicker format

Question

Tengo un problema con el selector de fechas jQuery-UI, he buscado y buscado pero no encontré 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 de #birthdate fecha de #birthdate que la fecha actual seleccionada sea 01-01-1985 , ahora esté configurando la fecha actual.

Answer 1

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

<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 a través de un objeto Date 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'' para meses, ''w'' por semanas, ''d'' por días, por ejemplo ''+ 1m + 7d''), o nulo por hoy.

Answer 2

Jquery Datepicker defaultDate SOLO establece la fecha predeterminada que eligió en el calendario que aparece cuando hace clic en su campo. Si desea que la fecha predeterminada aparezca en su entrada antes de que el usuario haga clic en el campo, debe asignar un valor de val () a su campo. Algo como esto:

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

Answer 3

Puedes probar con el código que está abajo.

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

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

Answer 4

Si desea actualizar el día resaltado a un día diferente según la hora del servidor, puede anular el código del Selector de fecha para permitir una nueva opción personalizada llamada localToday o como quiera que quiera nombrarla.

Un pequeño ajuste a la respuesta seleccionada en jQuery UI DatePicker cambio resaltado "hoy" fecha

// 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
});

He anulado 2 métodos datepicker para usar condicionalmente una nueva configuración para la fecha "de hoy" en lugar de una new Date() . La nueva configuración se llama localToday .

Sobrescriba $.datepicker._gotoToday y $.datepicker._generateHTML esta manera:

$.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 el uso: demo

Answer 5

Viendo eso:

Establezca la fecha para resaltar en la primera apertura si el campo está en blanco. Especifique una fecha real a través de un objeto Date 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'' para meses, ''w'' por semanas, ''d'' por días, por ejemplo ''+ 1m + 7d''), o nulo por hoy.

Si no se reconoce el dateFormat actual, aún puede usar el objeto Date usando la new Date(year, month, day)

En tu ejemplo, esto debería funcionar (no lo probé):

<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 6

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

Un método, descrito de manera similar en otras respuestas a preguntas relacionadas, es anular el CSS de esa clase para que coincida ui-state-default de 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á 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 del cliente).

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

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

Si su objetivo es evitar resaltar el día actual en conjunto:

// 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 relevante (no minimizado por legibilidad) de:

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

a

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

Si su objetivo es cambiar la definición de "pionero" de datepicker:

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 relevante (no minimizado por legibilidad) 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)

Por useMyDateNotYours lugar de useMyDateNotYours también puede inyectar una cadena, función o lo que sea que se adapte a sus necesidades.

Answer 7

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