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.

Sabya
fuente

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) );
Ben Koehler
fuente
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.

cfwall
fuente
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);
Vlad Bezden
fuente
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')***
    });
Miguel
fuente
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
Guillaume Flandre
fuente
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!

Oleksii Semeniuk
fuente
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");
Suresh Ponnukalai
fuente
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.

Allen
fuente
2

Esto funciona para mi:

$("#dateselector").datepicker("option", "defaultDate", new Date(2008,9,3));
Gjermund Dahl
fuente
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)

chamzz.dot
fuente
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...
study4u
fuente
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!

tijs
fuente
-1

o simplemente puedes tener

$('.date-pick').datePicker().val(new Date()).trigger('change')
Gayan
fuente
1
No debería ser .datepicker()así .datePicker().
Florin Frătică