javascript rango - Desactivar / Activar el intervalo de fechas seleccionado en la interfaz de usuario jQuery datepicker





html calendario (2)


¿Pero cómo desactivo un rango de fechas? Como solo tengo las fechas de inicio y finalización.

Una forma podría ser crear una serie de fechas basadas en las fechas de inicio y finalización que tenga. Use esa matriz en beforeShowDay para desactivar el rango.

Demostración: http://jsfiddle.net/abhitalks/FAt66/1/

Por ejemplo, porciones relevantes de JS :

var startDate = "2014-06-15", // some start date
    endDate  = "2014-06-21",  // some end date
    dateRange = [];           // array to hold the range

// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
    dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}

// use this array 
beforeShowDay: function (date) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [dateRange.indexOf(dateString) == -1];
}

Ahora, puede establecer startDate y endDate siempre que se seleccione una fecha. En el violín de ejemplo al que he vinculado anteriormente, las fechas de inicio y final se establecen cada vez que se selecciona una fecha en las dos entradas principales. La matriz de datos se llena cuando se selecciona la fecha en la segunda entrada.

Nota : El ejemplo anterior es aditivo, es decir, cada vez que selecciona un nuevo rango, se agrega como fechas deshabilitadas al objetivo. Si desea borrar el rango deshabilitado existente antes de especificar un nuevo rango, entonces podría destroy y volver a unir el marcador de fecha. (Y también restablecer la matriz dateRange)

Demostración 2: http://jsfiddle.net/abhitalks/FAt66/3/

Parte relevante de JS :

$("#dt").datepicker("destroy");
$("#dt").datepicker({ 
    dateFormat : 'yy-mm-dd',
    beforeShowDay: disableDates
});

var disableDates = function(dt) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
    return [dateRange.indexOf(dateString) == -1];
}

En cuanto a su código real, todo lo que necesita es esto:

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

    for (var d = new Date(startDate);
        d <= new Date(endDate);
        d.setDate(d.getDate() + 1)) {
            dateRange.push($.datepicker.formatDate('dd/mm/yyyy', d));
    }

    selectCurrentWeek();
},
beforeShowDay: disableDates,
    ...

Esto seguirá sumando los intervalos de fechas recién seleccionados a la matriz y seguirá desactivando de forma aditiva. Pero ten en cuenta que necesitarás una ruta de escape cuando se elimine una semana ya seleccionada. En ese caso, puede trabajar con múltiples matrices que pueden fusionarse en una matriz maestra.

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.




Para un mejor rendimiento puedes usar

$('div.a.b')

Esto solo buscará los elementos div en lugar de recorrer todos los elementos html que tiene en su página.





javascript jquery jquery-ui datepicker