[javascript] Desactivar / Activar el intervalo de fechas seleccionado en la interfaz de usuario jQuery datepicker



Answers

Question

Así que tengo la siguiente demo http://dev.driz.co.uk/week.html que muestra un datepicker jQuery UI que tiene varias instancias para cada mes del año.

Lo he modificado para que el usuario seleccione semanas completas y luego las fechas de inicio y finalización para esas semanas se almacenan en la barra lateral derecha con un número de semana.

Lo que quiero hacer es desactivar las fechas una vez que el usuario las haya seleccionado para que puedan ver en el selector de calendario qué fechas se han seleccionado (y también evitar que agreguen el mismo intervalo de fechas más de una vez).

Sin embargo, no sé por dónde empezar con esto ... He creado algunas funciones de habilitar e inhabilitar la fecha, pero no sé cómo realmente desactivar las fechas usando el método beforeShowDay.

Por ejemplo:

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('.week-picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

¿Pero cómo desactivo un rango de fechas? Como solo tengo las fechas de inicio y finalización. ¿Y puedo llamar al beforeShowDay DESPUÉS de que el selector de fecha esté en la página como en mi ejemplo? Y ¿cómo puedo volver a habilitar las fechas?

Aquí está el código:

$(function() {

    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
        }, 1);
    }

    $('.week-picker').datepicker( {
        defaultDate: '01/01/2014',
        minDate: '01/01/2013',
        maxDate: '01/01/2015',
        changeMonth: false,
        changeYear: true,
        showWeek: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: 12,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

    $('.remove').live('click', function(e){

        enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));

        $(this).parent('div').remove();
    });

});

// adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){

    $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');

}

// disable the dates on the calendar
function disableDates(startDate, endDate){


}

// enable the dates on the calendar
function enableDates(startDate, endDate){


}

En resumen, hay dos preguntas aquí ... ¿Cómo desactivo las fechas DESPUÉS de que se agregue el marcador a la página? Y segundo, ¿cómo desactivo un rango entre dos fechas, ya que parece que el método beforeShowDay espera una matriz de fechas en lugar de un rango.






Links