PDA

Visualizza la versione completa : jQuery Date Range Picker selezionare range di date e disabilitare alcune date


!!\Freedom9/!!
18-03-2021, 20:10
Ciao, ho questo semplice codice che mi permette di selezionare un range di date e di disabilitare alcune specifiche date. Per provare il codice puoi cliccare qui (http://layout999.hostinggratis.it/prove/calendarioNEW.htm).


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>

<body>

<input type="text" name="daterange" id="demo" />

<script>
invalid_dates = ['2021-03-25', '2021-03-28', '2021-04-15']
$('#demo').daterangepicker({
isInvalidDate: function(date)
{
return !!(invalid_dates.indexOf(date.format('YYYY-MM-DD')) > -1);
},
"startDate": "03/18/2021",
"endDate": "03/18/2021",
"minDate": "03/18/2021",
"maxDate": "05/31/2021"
}, function(start, end, label) {
console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});
</script>
</body>
</html>




Vorrei fare in modo che l'utente possa selezionare solo range di date contigue. Poniamo caso, ad esempio, che il 15 aprile sia disabilitato, l'utente non deve poter selezionare il 14 ed il 16 aprile, perchè in mezzo c'è una data appunto disabilitata. Invece, come potete provare voi stessi cliccando qui, il programma lo lascia fare (http://layout999.hostinggratis.it/prove/calendarioNEW.htm).

Ho trovato questa interessante pagina https://longbill.github.io/jquery-date-range-picker/ punto 26 Disable some dates, in cui jQuery Date Range Picker funziona proprio come vorrei funzionasse io.
Nel codice vengono però disabilitati solo i weekend, mentre io vorrei disabilitare delle date specifiche che ho racchiuso in un array. Non so come fare ...

Grazie infinite a chiunque mi possa mettere sulla giusta strada.

!!\Freedom9/!!
19-03-2021, 18:51
Scusate, il post di ieri era confuso. Ho lavorato sul codice, ho fatto l'upload qui

(http://layout999.hostinggratis.it/jquery-date-range-picker-master/) Devo agire sul file http://layout999.hostinggratis.it/jquery-date-range-picker-master/demo.js



beforeShowDay: function(t)
{
var valid = !(t.getDay() == 0 || t.getDay() == 6); //disable saturday and sunday
var _class = '';
var _tooltip = valid ? '' : 'già prenotato';
return [valid,_class,_tooltip];
}


Nel parametro valid di questa funzione vengono disabilitati i sabati e le domeniche. Dovrei modificare tale parametro per fare in modo che ad essere disabilitati siano non i sabati e le domeniche ma dei giorni specifici, contenuti in un array. Non so come fare, in javascript sono un somaro.

Se qualcuno mi può aiutare posso contraccambiare con lavoretti in php.

Grazie ancora

KillerWorm
19-03-2021, 19:09
Ciao, in base a quanto hai postato nel primo post chiariamo subito che si tratta di due plugin differenti.
Inizialmente hai usato Date Range Picker di Dan Grossman (http://www.daterangepicker.com/) mentre quella "interessante pagina" espone gli esempi per configurare jQuery Date Range Picker di Chunlong Liu (http://jszen.com/jquery-date-range-picker-plugin.4.html), che poi hai usato nel tuo ultimo upload.

Chiaramente i due plugin funzionano in modo differente anche se alcune configurazioni possono essere similari. Col primo plugin non ho trovato un modo semplice per fare ciò che stai chiedendo; se usi invece il secondo plugin (di Chunlong) penso sia più semplice, ora provo e ti aggiorno più tardi.

KillerWorm
19-03-2021, 21:22
Prova a modificare così questa riga:

var valid = !(invalid_dates.indexOf(moment(t).format('YYYY-MM-DD')) > -1)
Chiaramente l'array invalid_dates puoi dichiararlo a livello globale, come hai fatto inizialmente.

Fai sapere.

!!\Freedom9/!!
20-03-2021, 09:43
Prova a modificare così questa riga:

var valid = !(invalid_dates.indexOf(moment(t).format('YYYY-MM-DD')) > -1)
Chiaramente l'array invalid_dates puoi dichiararlo a livello globale, come hai fatto inizialmente.

Fai sapere.

Funziona benissimo, grazie infinite KillerWorm (https://forum.html.it/forum/member.php?userid=74013)!!
Tra i due script utilizzerò jQuery Date Range Picker di Chunlong Liu (http://jszen.com/jquery-date-range-picker-plugin.4.html). Mi occorre per un piccolo b&b di sole due camere che covid permettendo avvierò alla fine dell'anno con un amico.
Nei prossimi mesi affinerò il plugin per adattarlo alle mie esigenze ed a quelle di tutti coloro che lo vogliono utilizzare per gestire un sistema di booking di una struttura ricettiva.
Una delle cose che modificherò nel breve è l'etichetta con il numero di giorni che compare dopo che viene fatta una selezione. Vedrò di far comparire anzichè il numero di giorni il numero di notti.

Se qualcuno è interessato ad sviluppare in questo senso il plugin assieme a me, benvenuto a bordo!!

KillerWorm
20-03-2021, 10:37
Funziona benissimo
Bene, mi fa piacere :)


Se qualcuno è interessato ad sviluppare in questo senso il plugin assieme a me, benvenuto a bordo!!
Personalmente non sono interessato ma se ritieni rendere più valida la tua proposta puoi riformularla adeguatamente, e in modo formale, nell'apposita sezione Offro lavoro/collaborazione (https://forum.html.it/forum/forumdisplay.php?forumid=67)

Buone cose :ciauz:

Loading