jQuery datepicker establece la fecha seleccionada, sobre la marcha


121

¿Cómo puedo cambiar la fecha seleccionada de jquery Date picker dinámicamente sobre la marcha? He dicho que creó un selector de fechas en línea. Luego, después de un tiempo, quiero reflejar una fecha diferente allí sin volver a crear el selector de fechas desde cero.

Probé el método setDate, pero no funcionó y no hay mucha documentación en el documento .

Hay otro complemento (¿extendido?) Aquí , pero quiero usar el complemento que se envía con jquery.ui.all.js.

Respuestas:


187

¿Qué versión de jQuery-UI estás usando? Probé lo siguiente con 1.6r6, 1.7 y 1.7.1 y funciona:

//Set DatePicker to October 3, 2008
$('#dateselector').datepicker("setDate", new Date(2008,9,03) );

16
use defaultDate en lugar de setDate, si setDate no funciona.
bingjie2680

8
pero para mí no funcionó de ninguna manera, se cambió la fecha, pero la fecha seleccionada no aparece en el calendario. me muestra solo hoy resaltado.
Prageeth godage

28

Compruebe que la fecha en la que está intentando establecerla se encuentre dentro del rango de fechas permitido si se establecen las opciones minDate o maxDate.


10

Este ejemplo muestra cómo usar el valor predeterminado en el calendario desplegable y el valor en el cuadro de texto. También muestra cómo establecer el valor predeterminado en la fecha anterior.

selectedDate es otra variable que contiene la fecha seleccionada actual del control de calendario

    var date = new Date();
    date.setDate(date.getDate() - 1);

    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        defaultDate: date,
        onSelect: function () {
            selectedDate = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker('getDate'));
        }
    });

    $("#datepicker").datepicker("setDate", date);

8

Observó que para DatePicker de Keith Wood ( http://keith-wood.name/datepickRef.html ) lo siguiente funciona: tenga en cuenta que la configuración de la fecha predeterminada es la última:

    $('#datepicker').datepick({
        minDate: 0,
        maxDate: '+145D',
        multiSelect: 7,
        renderer: $.datepick.themeRollerRenderer,
        ***defaultDate: new Date('1 January 2008')***
    });

7

Por alguna razón, en algunos casos no pude hacer que setDate funcione.

Una solución alternativa que encontré es simplemente actualizar el atributo de valor de la entrada dada. Por supuesto, el selector de fecha en sí no se actualizará, pero si lo que solo busca es mostrar la fecha, funciona bien.

var date = new Date(2008,9,3);
$("#your-input").val(date.getMonth()+"/"+date.getDate()+"/"+date.getFullYear());
// Will display 9/3/2008 in your #your-input input

6
Hay un descuento en uno durante meses, por lo que necesita (date.getMonth () + 1)
Adam

1
setDate no funciona si se establece en las opciones iniciales, lo encadené después con .datepicker ('setDate', ...)
martinedwards

4
$('.date-pick').datePicker().val(new Date()).trigger('change')

¡por fin, eso es lo que busco en las últimas horas! ¡Necesito iniciar cambios, no solo la fecha de configuración en el campo de texto!


2
No debería ser .datepicker()así.datePicker()
Arslan Tabassum

3

Este es un hilo antiguo, pero solo quiero dar algo de información sobre cómo lo he usado. Si desea establecer la fecha de hoy, simplemente puede aplicarla como se muestra a continuación.

 $("#datepickerid").datepicker("setDate", "0");

Si desea establecer algunos días antes / después de la fecha actual, use el -/+símbolo de cuántos días desea, como se muestra a continuación.

 $("#datepickerid").datepicker("setDate", "-7");
 $("#datepickerid").datepicker("setDate", "+5");

2

setDate solo parece ser un problema con un selector de fecha en línea utilizado en la interfaz de usuario de jquery, el error específico es InternalError: demasiada recursividad.


2

Esto funciona para mi:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));

2

En Html puede agregar su campo de entrada con un selector de fecha como este

<input class="form-control date-picker fromDates" id="myDate" type="text">

y luego en java script, inicialice su selector de fechas y establezca su valor en la fecha como esta,

$('.fromDates').datepicker({
                maxDate: '0',
                dateFormat: "dd/mm/yy",
                changeYear: true,
                changeMonth: true,
                yearRange: "-100:+0"
            });

var myDateVal = moment('${value}').format('DD/MM/YYYY');
$('#myDate').datepicker().datepicker('setDate', myDateVal );

(Aquí el atributo fromdate muestra las fechas anteriores de la fecha actual)


0
var dt = new Date();
var renewal = moment(dt).add(1,'year').format('YYYY-MM-DD');
// moment().add(number, period)
// moment().subtract(number, period)
// period : year, days, hours, months, week...

Las respuestas de solo código no se recomiendan en Stack Overflow porque no explican cómo resuelve el problema. Edite su respuesta para explicar qué hace el código y cómo responde la pregunta, de modo que sea útil para otros usuarios y también para el OP.
FluffyKitten

-1

También tuve muchos problemas con el método setDate. parece que solo funciona en v1. Sin embargo, lo que parece funcionar es usar el método dpSetSelected:

    $("#dateselector").dpSetSelected(new Date(2010, 0, 26).asString());

¡buena suerte!


-1

o simplemente puedes tener

$('.date-pick').datePicker().val(new Date()).trigger('change')

1
No debería ser .datepicker()así .datePicker().
Florin Frătică
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.