2012-06-08 8 views
8

Sto usando questo multidate picker. È possibile utilizzare la modalità intervallo di date in cui non verranno selezionati i fine settimana?jquery ui intervallo di selezione dati multi data senza fine settimana

Ho già eseguito il multidatepicker dove i fine settimana sono bloccati e dove l'utente può selezionare solo 5 giorni ma questo non è il mio obiettivo. Vorrei questa funzionalità: quando l'utente fa clic su data, cinque giorni nella gamma sarebbero stati evidenziati, senza giorni di fine settimana ...

Il mio codice sotto:

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

ora sono abbastanza vicino della mia propria soluzione :

Conta tutti i giorni che devono essere abilitati e tutti i nuovi giorni che devono essere selezionati se c'è un intervallo di giorni nel fine settimana.

Aggiungo il mio nuovo metodo in multidatepicker.js daysRangeWithoutWeekends dove conto tutti i giorni nuovi e disabilitati. Quindi utilizzo due cicli foreach in cui disattivo e abilito nuove date:

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

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

valore Data oggetto. Il primo ciclo foreach funziona perfettamente e rimuove tutti i fine settimana evidenziati, ma il secondo ciclo non funziona. Mi restituisce l'errore:

Empty array of dates received. 

Sai perché?

Per tutto ciò che non si capisce che cosa il mio obiettivo è: multidatepicker range without weekend

devo scegliere di 5 giorni in gamma senza fine settimana se clicco su 21.6.2012 risale 21.6, 22.6, 25.6, 26.6, 27.6.. . devono essere selezionati.

Con codice superiore, riesco a rimuovere la classe evidenziata nei fine settimana ma non so perché il secondo ciclo (guarda il mio codice in alto) non è evidenziato 26.6.2012 e 27.6.2012.

+0

dove inserisci quei cinque giorni ??> .. hai data di inizio e data di fine tipo di cosa ?? –

+0

intendi la calibrazione automatica della data di fine con la data di inizio e 5 giorni dati esclusi i fine settimana ?? –

+0

Puoi inserire altro codice, mostrando come si popolano all_new_dates per favore – Ateszki

risposta

0

Prima di tutto questa non è una soluzione generica. Non avevo tempo per la soluzione generica. La mia soluzione è se devi scegliere 5 giorni nel range senza fine settimana.

in jquery-ui.multidatepicker.js nel metodo onSelect (. Cca 81 righe) aggiungere:

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

in jquery-ui.multidatepicker.js nel metodo toogleDate prima caso '(cca 431 riga.) daysRange' add:

case 'daysRangeWithoutWeekends': 

in jQuery-ui.multidatepicker.js a setMode (cca.473row) prima di caso 'daysRange' add:

case 'daysRangeWithoutWeekends': 

calandra è init con:

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

Se qualcuno fa algoritmo generico si prega di condividerlo =)

+0

todo: aggiungi giorni nazionali nel codice superiore – Gasper

0

Perché non provare questo

methods.addDates.call(obj,all_new_dates); 

invece di questo

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

Forse il looping e la modifica dei contenuti dell'array potrebbero funzionare?

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

cambiamento caso daysRange con il seguente codice

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

disabilitare solo domenica: aggiungere nell'opzione beforeShowDay: noWeekendsOrHolidays

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

se errore nella console: Errore: matrice vuota di date ricevute. in jquery-ui.multidatespicker.js cercando "addDates: function (dates, type)" e aggiungi 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.'); 
      } 
     }, 
Problemi correlati