Problemi strani datepicker

[marcopaolo79]

Ciao a tutti sto ormai da giorni impazzendo su dei problemi stranissimi su un datepicker di un sito sul quale sto lavorando.
La problematica è questa, ho 2 datepicker banalmente data_dal e data_al quando un utente seleziona la data_dal vorrei che il value di data_al diventasse data_dal + 4, esempio seleziono nel datepicker data_dal il 20/10/2019 e appena lo seleziono sul data_al appare 24/10/2019... banale direte ma non mi funziona nulla purtroppo.

Questi i codici del datepicker:

        $('input#data_dal').datepicker({
            startDate: "01/10/2019"
        });

        $('input#data_al').datepicker({
            startDate: "01/10/2019"
        });

ho provato così:

        $('input#data_dal').datepicker({startDate: "01/10/2019"}).on("changeDate", function (e) {
            var date = $(this).val();
            alert(date);
            $("input#data_al").datepicker('setDate', date);
        });

mi sente il "changeDate" e infatti l'alert funziona ma poi non imposta il valore date sul data_al dandomi questo errore "TypeError: inst.settings is undefined" ma vi assicuro che di data_al ce ne è 1 solo in tutta la pagina.

Banalmente se metto questo codice:

        $('input#data_dal').datepicker({startDate: "01/10/2019"}).on("changeDate", function (e) {
            var date = $(this).val();
            date.setDate(date.getDate()+4);
            //$('#partenza_d').datepicker('setDate', date );
        });

mi dà questo errore: "date.getDate is not a function" ...... però se estrapolo le cose dal changeDate invece funziona, infatti così me la imposta correttamente al caricamento della pagina:

        $("input#data_al").datepicker('setDate', '25/10/2019');
        
        $('input#data_al').datepicker({
            startDate: "01/10/2019"
        });

paradossalmente funziona solo se non "uso" più datepicker dentro la funzione changeDate perchè se la scrivo così la data viene scritta (anche se non è la data selezionata + 4 giorni) ma poi il datepicker non mi inizia dalla data che è stata scritta nel value

        $('input#data_dal').datepicker({startDate: "01/10/2019"}).on("changeDate", function (e) {
            var date = $(this).val();
            document.getElementById("data_al").value = date;
        });

qualche buona anima che mi aiuta?
sono disperato.... grazie a tutti

[KillerWorm]

Ciao, l'errore "date.getDate is not a function", della seconda prova, salta fuori perché la variabile date in quel caso è un semplice valore testuale e chiaramente non possiede il metodo getDate() che gli stai cercando di applicare. Dovresti invece "convertire" quel valore come istanza di un oggetto Date; a quel punto puoi usare i relativi metodi per poter aggiungere i giorni desiderati.

Potrebbe essere una cosa del genere:

$('input#data_dal').datepicker({startDate: "01/10/2019"}).on("change", function (e) {
  var date = new Date($(this).datepicker('getDate'));
  date.setDate(date.getDate() + 4);
  $('input#data_al').datepicker('setDate', date);
});

Da una semplice prova che ho fatto, a me funziona correttamente.

Quello che non mi torna però è il fatto che a te salti fuori questo errore (nella prima prova): "TypeError: inst.settings is undefined"

Prova a modificare lo script come indicato sopra, ma se continua a darti questo errore, ciò che hai indicato non mi pare sufficiente a capirne la causa. In tal caso posta il link della pagina in questione, se possibile. Eventualmente chiarisci che versione di datapicker stai usando esattamente e se utilizzi Bootstrap.

[marcopaolo79]

Grazie mille del prezioso aiuto
Effettivamente convertendo la stringa in data mi fa usare le proprietà data e mi fa aggiungere i 4 giorni famosi.
Il problema si manifesta quando all'interno della prima funzione datepicker provo ad usare un altro .datepicker, dove mi dà quell'errore strano inst.settings undefined, in pratica qua:

...
$('input#data_al').datepicker('setDate', date);
...

è di sicuro un problema della versione del datepicker solo che essendo dentro un template preso da themeforest mi viene complesso capire quale versione è...
La cosa strana è che se io estrapolo il comando setDate = date e lo metto diciamo esterno al datepicker funziona e imposta la data.

Della serie così non va:

        $('input#arrivo_d').datepicker({startDate: "<%=date+1%>"}).on("changeDate", function (e) {
          var dt_arrivo_string = $(this).val();
          var arrivo_d = new Date(dt_arrivo_string.substring(3, 5) + '/' + dt_arrivo_string.substring(0, 2) + '/' + dt_arrivo_string.substring(6, 10));
          arrivo_d.setDate(arrivo_d.getDate() + 4);
          $('input#partenza_d').datepicker('setDate', arrivo_d);
        });

così funziona ma ovviamente ho bisogno di calcolare la data alla selezione della precedente:

        $('input#arrivo_d').datepicker({startDate: "<%=date+1%>"}).on("changeDate", function (e) {
          var dt_arrivo_string = $(this).val();
          var arrivo_d = new Date(dt_arrivo_string.substring(3, 5) + '/' + dt_arrivo_string.substring(0, 2) + '/' + dt_arrivo_string.substring(6, 10));
          arrivo_d.setDate(arrivo_d.getDate() + 4);        
        });

$("input#partenza_d").datepicker('setDate', '01/01/2020');

quindi il "comando" setDate è supportato per così dire ma è come se gli dessero fastidio .datepicker annidati

[Shores]

Mmm, ma non stai chiamando la funzione datepicker in due modi complatemante diversi?

Sicuto che siano entrambi corretti?

.datepicker({startdate: "1/1/2019"})

.datepicker("setDate", date)

In un caso gli passi un oggetto di cui setti una proprietà, nell'altro gli passi una stringa e una date, sicuro che la seconda chiamata cnon debba essere qualcosa del tipo

.datepicker({setDate: date})

Magari mi sbaglio, ma io controllerei quello...

Un'altra cosa che controllerei è la costante testuale "01/10/2019" per la data... Non andavano scritte come "2019-10-01"?

[marcopaolo79]

Uso boostrap e l'esempio è a questo sito: https://www.eurocasa.com/

Non credo il problema sia il formato della data perchè per esempio il comando startDate ha il formato gg/mm/aaaa e funziona correttamente.
Ho provato a passare la data sia come stringa che nel formato setDate: date ma niente da fare il problema rimane.
Se passo la data .datepicker({setDate: date}) non mi dà l'errore javascript ma però non mi scrive la data nel campo di testo

[Shores]

Ok, allora, dall'esempio si capisce che stai usando il componente datepicker di jquery ui ( https://jqueryui.com/datepicker/ ) ...

Scusami, ma non starai mica davvero chiamando la tua variabile di data "date"?

Non usare MAI il nome di un tipo di JS come nome di una variabile!

[marcopaolo79]

Ma no certo che no, ovviamente no.... se guardi il codice a fondo pagina vedi che la variabile si chiama in un altro modo.
Ahimè il problema non è quello...

[Shores]

Hai provato con:

$('input#partenza_d').datepicker('setDate', arrivo_d.toString())

[Shores]

O anche con:

$('input#partenza_d').datepicker().setDate(arrivo_ d)

[marcopaolo79]

In entrambi i casi non funziona, nel primo caso: TypeError: inst.settings is undefined, nel secondo caso: SyntaxError: missing ) after argument list.

Ma ho capito dove è il problema.
Nel sito è presente un file .js chiamato common_scripts che non so cosa fa e che al suo interno ha il datepicker che probabilmente va in conflitto con quello dell'ui