jquery - ejemplos - datepicker range




Cómo iniciar el show anterior de DatePicker desde otra función (2)

Tengo un selector de fecha con el siguiente código. Tengo un menú desplegable y, tras un cambio en el cuadro desplegable, deseo iniciar la función datePicker beforeShowDay. ¿Cómo puedo hacer esto?

var freeDate;

Parte de mi código es el siguiente:

$("#myDiv").datepicker({
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "yy/mm/dd",
    onSelect: function(dateText, inst) {},
    onChangeMonthYear: function(year, month, inst) {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url: '@Url.Action("ListDates", "Party")',
            data: {
                date: new Date(year, month - 1, 1).toString("yyyy/MM/dd"),
                userID: userID
            },
            success: function(data) {
                freeDate = eval(data);
            },
            error: function(request, status, error) {}
        });
    },
    beforeShowDay: function(dateToShow) {
        var returnResult = new Array();
        returnResult.push(true);
        var itemMatched = false;
        $.each(freeDate, function(key, value) {
            if (new Date(parseInt(value.substr(6))).compareTo(dateToShow) == 0) {
                itemMatched = true;
                returnResult.push('timeNotFree');
                return;
            }
        });
        if (!itemMatched) returnResult.push('');
        returnResult.push('');
        return returnResult;
    }
});​
$('#myList').change(function() {
    userID = $("#userList > option:selected").attr("value");
    // myList is used to have freeDate and the DatePicker must be shown accordingly.
    $.ajax({
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: '@Url.Action("ListDates", "Party")',
        data: {
            date: new Date($("#myDiv").datepicker("getDate").toString("yyyy/MM/dd")),
            userID: userID
        },
        success: function(data) {
            freeDate = eval(data);
        },
        error: function(request, status, error) {}
    });
    $("#myDiv").datepicker("setDate", $("#myDiv").datepicker("getDate").toString("yyyy/MM/dd"));
});​

Yo diría que probablemente debería definir esa función fuera de la llamada del selector de fechas y luego su cambio y el selector de fechas pueden llamar a esa función.

EDITAR: aclaración añadida.

Tratar de descubrir cómo funciona el complemento para llamar a la función es probablemente más trabajo del que vale la pena. Puede definir la función por separado y luego pasarla al complemento. Entonces su evento de cambio desplegable puede llamar a ese método independiente.

Algo como esto:

function doMyThing(dateToShow){
   // do stuff
}

$("#myDiv").datepicker({
    ...
    beforeShowDay: function(dateToShow){
        doMyThing(dateToShow);
    }
});  

$('#myList').change(function () {
    doMyThing(dateToShow);
});  

Lo único de lo que no estoy seguro es de lo que querrá pasar como parámetro en el intercambio. Como no es una acción de hacer clic en una fecha, no sé qué debería ser "dateToShow".


beforeShowDay es un evento que se beforeShowDay antes de que se procese un día . Puede usarlo para personalizar cómo se muestra la celda que contiene el día, por ejemplo, puede volverla roja para indicar las fechas bloqueadas.

Por lo que entiendo de su pregunta, puede llamar al método datapicker.refresh() para indicar que la variable freeDate ha cambiado (por ejemplo, una respuesta AJAX) y el calendario debe volver a representarse.

Editar

Creo que este es el código para su menú desplegable, parece que usa ajax:

$('#myList').change(
...

En la devolución de llamada de éxito, tienes:

freeDate = eval(data);

Aquí es donde cambia la fecha freeDate y es probable que sea donde debería llamar al método .refresh() . Tenga en cuenta que AJAX es asíncrono por defecto, por lo que hay un cierto retraso entre la selección del valor y la devolución de llamada del evento exitoso.

Y aquí es cómo se llama un método en un selector de fecha existente:

.
.
.
freeDate = eval(data);
$("#myDiv").datepicker("refresh");
.
.
.






jquery-ui-datepicker