datepicker jquery: impostare il date range con un minimo ed un massimo di date

[allin81]

Buongiorno
Nel dattaglio di un'offerta per le vacanze ho i campi "arrivo" e "partenza" e vorrei rendere cliccabili solo i giorni che rientrano in quel range che ho nel database.

Per esempio se un'offerta è valida dal 2 giugno al 25 giugno, vorrei che il campo "arrivo" deve partire dal 2 giugno ed il campo partenza deve arrivare massimo al 25 giugno.

I campi li prendo dal database e sono inseriti nel formato yyyy-mm-dd che poi estraggo nel formato dd/mm/yyyy e si chiamano valida_da e valida_fino

Attualmente uso questo codice

<script>
        $(function() {
            var dates = $( "#arrivo, #partenza" ).datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1,
                minDate: +1,
                dateFormat: 'dd/mm/yy',
                monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno', 'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
               monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu', 'Lug','Ago','Set','Ott','Nov','Dic'],
               dayNames: ['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato'],
               dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
               dayNamesMin: ['Do','Lu','Ma','Me','Gio','Ve','Sa'],
                onSelect: function( selectedDate ) {
                    var option = this.id == "arrivo" ? "minDate" : "maxDate",
                        instance = $( this ).data( "datepicker" ),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
                }
            });
        });
        </script>

Come potrei limitare i giorni cliccabili?
Stavo pensando di usare maxDate ma non riesco a fare quello cdi cui ho bisogno

Chiedo questo perche' spesso alcuni utenti vedono l'offerta di maggio e richiedono informazioni per agosto dove costa di piu' (invece di farlo proprio dalla pagina dell'offerta di agosto).
Grazie

[KillerWorm]

Ciao, puoi definire opportunamente le due proprietà minDate e maxDate dell'oggetto datepicker.

Per definire delle date in JavaScript parti comunque dal formato standard yyyy-mm-dd.

Avrai quindi le tue date di inizio e fine, "2022-06-02" e "2022-06-25" che puoi memorizzare in qualche variabile a livello JavaScript, ad esempio valida_da e valida_fino.

Considerando che la data di inizio è anche in funzione della data odierna (o meglio, di domani, come specificato da quel +1 per la proprietà minDate nel tuo script), puoi quindi ricalcolare minDate prendendo la data massima tra il tuo valida_da e domani. Per cui sono escluse date inferiori a domani.

Mentre la proprietà maxDate sarà semplicemente riferita alla data definita per valida_fino.

Il range selezionabile è quindi limitato a questi due intervalli.

Qui i passaggi:

const valida_da = '2022-06-02';
const valida_fino = '2022-06-25';

const domani = new Date();
domani.setDate(domani.getDate() + 1);

const minDate = new Date(Math.max(new Date(valida_da), domani));
const maxDate = new Date(valida_fino);

Passa quindi le variabili alle relative proprietà dell'oggetto datapicker e il gioco è fatto:

...datepicker({
   ...
   minDate: minDate,
   maxDate: maxDate,
   ...
}

Prova è fai sapere.

[allin81]

Eccomi
sembra funzionare alla grande, lo sto testando su varie offerte e sembra andare.

Il +1 nel minDate l'avevo messo per la ricerca generale delle offerte in modo da mostrare solo le disponibilità da domani visto che non potrei prendere prenotazioni con arrivo oggi stesso, infatti l'ho rimosso dal tuo codice


Grazie sempre dell'aiuto

[KillerWorm]

visto che non potrei prendere prenotazioni con arrivo oggi stesso, infatti l'ho rimosso dal tuo codice

Aspetta... è esattamente quello che faccio con la variabile domani. Quel +1 l'ho riportato infatti in quella variabile proprio per escludere dal range le date fino ad oggi.

Mi pare funzioni proprio come stai dicendo, no?

[allin81]

non ho capito
In pratica nella ricerca globale dall'home page, do la possibilit� di selezionare la data di arrivo a partire da domani, oggi non lo rendo selezionabile.

Nella pagina delle offerte, invece voglio far selezionare solo le date di quell'offerta.

[KillerWorm]

Forse sono io a non capire.

Nella pagina delle offerte, invece voglio far selezionare solo le date di quell'offerta.

Chiaro, ma a prescindere che siano delle date comprese nell'offerta, in qualche modo dovrai limitarne l'inizio alla data odierna (che sia la data di oggi o quella di domani) per escludere la possibilità di selezionare date già trascorse?

Se vuoi che l'inizio sia da oggi (e non da domani) dovrai comunque inserire il limite a partire da oggi, no?

In tal caso la formula potrebbe essere posta in questo modo:

const minDate = new Date(Math.max(new Date('2022-05-20'), Date.now()));

Poi vedi tu ciò che ti serve ottenere