2012-06-08 48 views
8

Estoy usando esto multidate picker. ¿Es posible usar el modo de intervalo de fechas donde no se seleccionarían los fines de semana?jquery ui varias fechas rango de datos del selector sin fines de semana

Ya he hecho multidatepicker donde los fines de semana están bloqueados y el usuario puede seleccionar solo 5 días, pero este no es mi objetivo. Me gustaría que esta funcionalidad: cuando el usuario hace clic en fecha, cinco días en rango serían expuestos y sin días de fin de semana ...

Mi código de abajo:

jQuery('#deliverydate').multiDatesPicker({ 
    minDate:0, 
    beforeShowDay: noWeekendsOrHolidays, 
    mode: 'daysRangeWithoutWeekends', 
    autoselectRange: [0,5], 
    numberOfMonths: 2    
}); 

ahora estoy muy cerca de mi propia solución :

Cuento todos los días que deben activarse y todos los días nuevos que deben seleccionarse si hay un fin de semana en el rango de días.

Agrego mi nuevo método en multidatepicker.js daysRangeWithoutWeekends donde cuento todos los días nuevos y deshabilitados. Luego utilizo dos bucles foreach donde deshabilito y habilito nuevas fechas:

$.each(all_removed_dates, function(index, value) { 
    methods.removeDates.call(obj, value); 
}); 

$.each(all_new_dates, function(index, value) { 
    methods.addDates.call(obj,value); 
}); 

valor es el objeto Date. El primer bucle Foreach funciona perfectamente y elimina todos los fines de semana resaltados, pero el segundo bucle no funciona. Me devuelve error:

Empty array of dates received. 

¿Sabes por qué?

Por todo lo que no entienden lo que mi objetivo es: multidatepicker range without weekend

tengo que recoger de 5 días en rango sin fines si hago clic en fechas 21.6.2012 21,6, 22,6, 25,6, 26,6, 27,6.. . tiene que ser seleccionado.

Con el código superior consigo eliminar la clase resaltada los fines de semana pero no sé por qué el segundo ciclo (mira mi código superior) no se resalta 26.6.2012 y 27.6.2012.

+0

donde ingresas esos cinco días ?? .. ¿tienes fecha de inicio y fecha de finalización? –

+0

¿se refiere a la calibración automática de la fecha de finalización con la fecha de inicio y 5 días sin incluir los fines de semana? –

+0

¿Puede poner un poco más de código, mostrando cómo rellenar all_new_dates por favor – Ateszki

Respuesta

0

En primer lugar, esto no es una solución genérica. No tuve tiempo para una solución genérica. Mi solución es si tienes que elegir 5 días dentro del rango sin fines de semana.

en jquery-ui.multidatepicker.js en el método onSelect (. Cca 81 fila) añadir:

if(this.multiDatesPicker.mode == 'daysRangeWithoutWeekends' && this.multiDatesPicker.dates.picked.length > 0){ 
     var i = 0, 
     last 

     if(this.multiDatesPicker.dates.picked[0].getDay() == 2){ //thusday 
      i = 1 
      //remove sunday 
      all_removed_dates.push(this.multiDatesPicker.dates.picked[4]) 
     } 
     if(this.multiDatesPicker.dates.picked[0].getDay() == 3){//wednesday 
      i = 2 
      //remove sunday and saturday 
      all_removed_dates.push(this.multiDatesPicker.dates.picked[3],      this.multiDatesPicker.dates.picked[4]) 
     } 
     if(this.multiDatesPicker.dates.picked[0].getDay() == 4){ //thursday 
      i=2 
      all_removed_dates.push(this.multiDatesPicker.dates.picked[2], this.multiDatesPicker.dates.picked[3])         
     } 
     if(this.multiDatesPicker.dates.picked[0].getDay() == 5){ //friday 
      i=2 
      all_removed_dates.push(this.multiDatesPicker.dates.picked[1], this.multiDatesPicker.dates.picked[2])         
     } 

     last = this.multiDatesPicker.dates.picked.pop() 
     this.multiDatesPicker.dates.picked.push(last) 

     if(this.multiDatesPicker.dates.picked[0].getDay() == 2){ //thusday 
      //if we have thusday we add 2 day after last day so last day in range was saturday and we add 2 day and we get date for monday 
      var new_date = new Date(last.getFullYear(), last.getMonth(), last.getDate() + 2) 
      all_new_dates.push(new_date) 
     }else{ 
      //if there were sunday and saturday in range we add 2 days to last date in range 
      for(var j = 1; j <= i; j++){ 
       var new_date = new Date(last.getFullYear(), last.getMonth(), last.getDate() + j) 
       all_new_dates.push(new_date) 
      } 
     } 

     var obj = this 
     //remove sunday and saturday 
     $.each(all_removed_dates, function(index, value) { 
      methods.removeDates.call(obj, value); 
     }); 
     //add new days         
     $.each(all_new_dates, function(index, value) { 
      methods.add_new_date.call(obj,value); 
     });        
} 

en jquery-ui.multidatepicker.js en el método toogleDate antes caso '(cca 431 fila). Agregar daysRange':

case 'daysRangeWithoutWeekends': 

en jquery-ui.multidatepicker.js en setMode (ECP.473row) antes de añadir caso 'daysRange':

case 'daysRangeWithoutWeekends': 

calandra es init con:

jQuery('#deliverydate').multiDatesPicker({ 
    minDate:0, 
    beforeShowDay: noWeekendsOrHolidays, 
    mode: 'daysRangeWithoutWeekends', 
    autoselectRange: [0,5], 
    numberOfMonths: 2    
}); 

Si alguien haga algoritmo genérico por favor, comparta =)

+0

todo: agregar días nacionales en el código superior – Gasper

0

¿Por qué no probar esto

methods.addDates.call(obj,all_new_dates); 

en lugar de esta

$.each(all_new_dates, function(index, value) { 
    methods.addDates.call(obj,value); 
}); 
0

¿Tal vez funcionaría el simple bucle y la modificación de los contenidos de la matriz?

if (this.multiDatesPicker.mode === 'daysRangeWithoutWeekends' && this.multiDatesPicker.dates.picked.length > 0) { 
    var i = 0, 
     saturdayFound = false, 
     sundayFound = false; 
    for (i = 0; i < this.multiDatesPicker.dates.picked.length; i += 1) { 
     if (this.multiDatesPicker.dates.picked[i].getDay() === 6) { 
      this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(2); //make it Monday 
      saturdayFound = true; 
     } 
     if (this.multiDatesPicker.dates.picked[i].getDay() === 0) { 
      this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //make it Monday 
      sundayFound = true; 
     } 
     if (saturdayFound || sundayFound) { 
      //weekend exists before this element in the array 
      if ((this.multiDatesPicker.dates.picked[i].getDay() > 0) || (this.multiDatesPicker.dates.picked[i].getDay() < 6)) { 
       //weekday found following weekend 
       if (saturdayFound) { 
        this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //add a day to offset for Saturday 
       } 
       if (sundayFound) { 
        this.multiDatesPicker.dates.picked[i] = this.multiDatesPicker.dates.picked[i].addDays(1); //add a day to offset for Sunday 
       } 
      } 
     } 
    } 
    all_new_dates = this.multiDatesPicker.dates.picked; 
} 
0

cambio el caso daysRange con el siguiente código

caso 'daysRange':

this.multiDatesPicker.dates[type] = []; // deletes all picked/disabled 
var end = this.multiDatesPicker.autoselectRange[1]; 
var begin = this.multiDatesPicker.autoselectRange[0]; 
if(end < begin) { // switch 
    end = this.multiDatesPicker.autoselectRange[0]; 
    begin = this.multiDatesPicker.autoselectRange[1]; 
} 

var i1=begin; 
var i2=begin; 
while(i1<end){ 
    var tep= new Date(methods.sumDays(date, i2)); 
    if(tep.getDay()!=0 && tep.getDay()!=6){ 
     methods.addDates.call(this, methods.sumDays(date, i2), type); 
     i1++; 
    } 
    i2++; 
} 
0

deshabilitar sólo los domingos: añadir en la opción beforeShowDay: noWeekendsOrHolidays

function noWeekendsOrHolidays(date) { 
    DateRemove = date.getFullYear()+'-'+date.getMonth()+'-'+date.getDate(); 
    if (date.getDay() == 0) { // remove dimanche 
     return [false, '']; 
    } else { 
     return [true, '']; 
    } 
} 

si tiene un error en la consola: Error: matriz vacía de fechas recibidas. en jquery-ui.multidatespicker.js buscando "addDates: function (fechas, tipo)" y agrega return true;

addDates : function(dates, type) { 
      if(dates.length > 0) { 
       if(!type) type = 'picked'; 
       switch(typeof dates) { 
        case 'object': 
        case 'array': 
         if(dates.length) { 
          for(var i = 0; i < dates.length; i++) 
           addDate.call(this, dates[i], type, true); 
          sortDates.call(this, type); 
          break; 
         } // else does the same as 'string' 
        case 'string': 
        case 'number': 
         addDate.call(this, dates, type); 
         break; 
        default: 
         $.error('Date format "'+ typeof dates +'" not allowed on jQuery.multiDatesPicker'); 
       } 
       //$(this).datepicker('refresh'); 
      } else { 
       return true; // ADD THIS ONE 
       $.error('Empty array of dates received.'); 
      } 
     }, 
Cuestiones relacionadas