Impedire inserimento data di oggi e date passate

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Buonasera a tutti,
con jquery ho inserito un input box che al click del mouse mostra un calendario dove l'utente deve inserire la data di scadenza di un'ipotetica scadenza revisione ministeriale.

Questa la form

HTML:
<div class="col-md-2">
    <div class="input-group">
        <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
            <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
     </div>
</div>
Vorrei con poter disabilitare tutte le date antecedenti alla data di domani e successive di almeno tre giorni alla data odierna, per fare un esempio, quando si apre il datapicker l'utente come prima data utile può selezionare solo una data almeno 3 giorni successivi a quella odiena. (Oggi 28/07/2020, la prima data selezionabile dall'utente sarà quella del 01/08/2020), vorrei altresi, una volta selezionata la data che comparisse un alert all'utente dove gli viene chiesto "Confermi la scadenza della revisione ministeriale ?"

Un grazie anticipato a tutti gli utenti che mi potranno dare una mano.

P.S
Avevo provato questo codice, ma non funziona
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Ho postato il thread nella sezione corretta ovvero jquery, chiedo a qualche amministratore la cortesia di eliminare lo stesso post dalla sezione javascript,

Mi scuso per l'accaduto e ringrazio anticipatamente.

:)
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.275
328
83
@elpirata
La prossima volta non aprire due discussioni! Se la sezione è sbagliata lo spostiamo noi
 
  • Like
Reactions: elpirata

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Ops scusa... il codice era questo ma da quello che ho capito riguarda bootstrap e non funziona con jquery

JavaScript:
$('#datepicker1').datepicker({
    format: 'dd/mm/yyyy',
    startDate: '+1d'
});
 

Tommy03

Utente Attivo
6 Giu 2018
466
46
28
17
Bassano del Grappa (VI)
Questa è la sintassi che dovresti usare per settare la data di partenza ad oggi ad esempio (6 perchè anche se è luglio si parte da 0 con i mesi, quindi 6 invece di 7):
PHP:
$('#datepicker1').datepicker({
    minDate: new Date(2020, 6, 28)
});
Quindi se vuoi fare in modo che la data minima sia tra 3 giorni, puoi provare così:
PHP:
<?php
$anno = date("Y",strtotime("+4 days"));
$mese = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>
...
$('#datepicker1').datepicker({
    minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
});
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Questa è la sintassi che dovresti usare per settare la data di partenza ad oggi ad esempio (6 perchè anche se è luglio si parte da 0 con i mesi, quindi 6 invece di 7):
PHP:
$('#datepicker1').datepicker({
    minDate: new Date(2020, 6, 28)
});
Quindi se vuoi fare in modo che la data minima sia tra 3 giorni, puoi provare così:
PHP:
<?php
$anno = date("Y",strtotime("+4 days"));
$mese = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>
...
$('#datepicker1').datepicker({
    minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
});

Ciao Tommy03, anzitutto grazie per la risposta e per il supporto,
ho provato ad implementare il codice da te suggerito, ma non sortisce nessun effetto sul datepicker1 :(

PHP:
<?php
$anno = date("Y",strtotime("+4 days"));
$mese = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>


<!-- SCRIPT CONTROLLO E VALORIZZAZIONE DATA REVISIONE-->
<script type="text/javascript">
$('#datepicker1').datepicker({
    minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
});
</script>


<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
<div class="form-container">

<div class="card-commesse">
  <div class="card-header">Anagrafica Cliente</div>
  <div class="card-block">

    <div class="row">
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
              </div>
        </div>
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
              </div>
        </div>
    </div>
 

Tommy03

Utente Attivo
6 Giu 2018
466
46
28
17
Bassano del Grappa (VI)
Jquery lo hai incluso correttamente? Forse hai dimenticato di mettere:
HTML:
$(document).ready(function(){
PHP:
<?php
$anno = date("Y",strtotime("+4 days"));
$mese = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>


<!-- SCRIPT CONTROLLO E VALORIZZAZIONE DATA REVISIONE-->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker1').datepicker({
minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
});
});
</script>


<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
<div class="form-container">

<div class="card-commesse">
  <div class="card-header">Anagrafica Cliente</div>
  <div class="card-block">

    <div class="row">
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
              </div>
        </div>
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
              </div>
        </div>
    </div>
Se non funziona, per curiosità prova a fare una qualsiasi semplice azione con Jquery e dimmi se funziona
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Onde evitare di portare te e chi successivamente legge questo thread fuori strada, ti posto il codice che viene incluso ad inizio pagina:


JavaScript:
<!-- SCRIPT JS PER CALENDARIO DATA PICKER -->

<script type="text/javascript">
$(function(){
     $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
     $('.datepicker').datepicker();
});
</script>

<!-- SCRIPT CONTROLLO FORMATO KM VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP-->

<script type="text/javascript">
    function VerificaKm(ele){
        var str=document.getElementById(ele.id).value;
        var filt=/^[0-9]+$/;
        if(!filt.test(str)) {alert('I km devono essere solo numeri');}
}
</script>

<!-- SCRIPT CONTROLLO FORMATO TARGA VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP-->

<script type="text/javascript">
    function VerificaTarga(ele){
        var str=document.getElementById(ele.id).value;
        var filt=/^[a-zA-Z0-9]+$/;
        if(!filt.test(str)) {alert('La targa è composta da solo numeri e lettere');}
}
</script>
Mentre questa è la pagina che contiene il datepicker che non riesco a far funzionare :(

PHP:
<script type="text/javascript"></script>
<?php include("js/cavicchi.js"); ?>

<?php
$anno = date("Y",strtotime("+4 days"));
$mese = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>

<!-- SCRIPT CONTROLLO E VALORIZZAZIONE DATA REVISIONE-->
<script type="text/javascript">
$(document).ready(function(){
$('#datepicker1').datepicker({
minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
});
});
</script>

<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
<div class="form-container">

<div class="card-commesse">
  <div class="card-header">Anagrafica Cliente</div>
  <div class="card-block">

    <div class="row">
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
              </div>
        </div>
        <div class="col-md-2">
              <div class="input-group">
                <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
                <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
              </div>
        </div>
    </div>
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
L'input type dovrebbe essere date non text
mi cambia solo lo stile del calendario, considera che ho gia inserito circa 9000 commesse, adesso questa della revisione è un aggiunta per poter gestire le scadenze delle revisioni, il datepicker "Data Commesse" mostra correttamente il calendario, quando salvo la commessa passa tutti i dati correttamente alla query e vengono salvati nel database. Il problema mi è sorto sulla modifica che vorrei apportare al datepicker1 per evitare che vengano inserite date antecedenti alla data odierna ed almeno superiori di 3 giorni a quest'ultima, sto impazzendo e facendo impazzire anche voi :(
 

Tommy03

Utente Attivo
6 Giu 2018
466
46
28
17
Bassano del Grappa (VI)
<script type="text/javascript"> $(document).ready(function(){ $('#datepicker1').datepicker({ minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>) }); }); </script>
prova per curiosità a cambiare cosi:
HTML:
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#modulo").hide();
$('#datepicker1').datepicker({ minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>) }); 
});
 </script>
se il form non scompare significa che l'errore è nell'inclusione di jquery...
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
prova per curiosità a cambiare cosi:
HTML:
<script type="text/javascript">
$(document).ready(function(){
$("#modulo").hide();
$('#datepicker1').datepicker({ minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>) });
});
</script>
se il form non scompare significa che l'errore è nell'inclusione di jquery...
Ti confermo che il modulo non scompare e che a questo punto per davvero non so dove andar a prendere piede :(
 

marino51

Utente Attivo
28 Feb 2013
2.919
164
63
Lombardia
ho riscritto così e sembra che funzioni, vedi se é consono alle tue aspettative,
ho lasciato un alert, se non dovesse essere visualizzato, c'é un errore nel codice js
PHP:
<?php
$anno   = date("Y",strtotime("+4 days"));
$mese   = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){

alert('SONO QUI ! '+new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>));

/* JS PER CALENDARIO DATA PICKER */

    $(function(){
        $( "#datepicker" ).datepicker();
        $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
    });

    $(function(){
        $( "#datepicker1" ).datepicker();
        $.datepicker1.setDefaults( $.datepicker.regional[ "it" ] );
    });

/* CONTROLLO E VALORIZZAZIONE DATA REVISIONE */

    $('#datepicker1').datepicker({
        minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
    });

/* CONTROLLO FORMATO KM VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP */

    function VerificaKm(ele){
        var str=document.getElementById(ele.id).value;
        var filt=/^[0-9]+$/;
        if(!filt.test(str)) {alert('I km devono essere solo numeri');}
    }

/* CONTROLLO FORMATO TARGA VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP */

    function VerificaTarga(ele)
    {
        var str=document.getElementById(ele.id).value;
        var filt=/^[a-zA-Z0-9]+$/;
        if(!filt.test(str)) {alert('La targa è composta da solo numeri e lettere');}
    }
});
</script>

</head>
<body>

<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
  <div class="form-container">
    <div class="card-commesse">
      <div class="card-header">Anagrafica Cliente
      </div>
      <div class="card-block">
        <div class="row">
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
            </div>
          </div>
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>
1596020446075.png


1596020480309.png
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
ho riscritto così e sembra che funzioni, vedi se é consono alle tue aspettative,
ho lasciato un alert, se non dovesse essere visualizzato, c'é un errore nel codice js
PHP:
<?php
$anno   = date("Y",strtotime("+4 days"));
$mese   = date("m",strtotime("+4 days"))-1;
$giorno = date("j",strtotime("+4 days"));
?>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function(){

alert('SONO QUI ! '+new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>));

/* JS PER CALENDARIO DATA PICKER */

    $(function(){
        $( "#datepicker" ).datepicker();
        $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
    });

    $(function(){
        $( "#datepicker1" ).datepicker();
        $.datepicker1.setDefaults( $.datepicker.regional[ "it" ] );
    });

/* CONTROLLO E VALORIZZAZIONE DATA REVISIONE */

    $('#datepicker1').datepicker({
        minDate: new Date(<?php echo $anno;?>, <?php echo $mese;?>, <?php echo $giorno;?>)
    });

/* CONTROLLO FORMATO KM VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP */

    function VerificaKm(ele){
        var str=document.getElementById(ele.id).value;
        var filt=/^[0-9]+$/;
        if(!filt.test(str)) {alert('I km devono essere solo numeri');}
    }

/* CONTROLLO FORMATO TARGA VALORIZZARE IL FORM INPUT CON IL VALORE ONKEYUP */

    function VerificaTarga(ele)
    {
        var str=document.getElementById(ele.id).value;
        var filt=/^[a-zA-Z0-9]+$/;
        if(!filt.test(str)) {alert('La targa è composta da solo numeri e lettere');}
    }
});
</script>

</head>
<body>

<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
  <div class="form-container">
    <div class="card-commesse">
      <div class="card-header">Anagrafica Cliente
      </div>
      <div class="card-block">
        <div class="row">
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
            </div>
          </div>
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>
Vedi l'allegato 7552

Vedi l'allegato 7553
Ciao Marino,
ho sostituito il tuo codice con il mio, mi è cambiato il layout del calendario e tra le altre cose è in lingua inglese. Il problema è che l'alert di test che mi hai lasciato non funziona, pertanto pur apparendo il calendario con un layout differente, non prende le funzioni per impedire inserimenti di date accidentali.
 

Tommy03

Utente Attivo
6 Giu 2018
466
46
28
17
Bassano del Grappa (VI)
Mi sa che l'errore è nell'inclusione di Jquery... Prova a creare una semplice pagina di prova con questo codice, visualizzi l'alert?
PHP:
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){

alert('prova');
});
</script>
</head>
<body>
<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
  <div class="form-container">
    <div class="card-commesse">
      <div class="card-header">Anagrafica Cliente
      </div>
      <div class="card-block">
        <div class="row">
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
            </div>
          </div>
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>
 

elpirata

Utente Attivo
18 Mar 2009
263
7
18
Mi sa che l'errore è nell'inclusione di Jquery... Prova a creare una semplice pagina di prova con questo codice, visualizzi l'alert?
PHP:
<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

alert('prova');
});
</script>
</head>
<body>
<form class="form" name="inscomm" method="post" id="modulo" action="index.php?page=salva_commessa" enctype="multipart/form-data">
  <div class="form-container">
    <div class="card-commesse">
      <div class="card-header">Anagrafica Cliente
      </div>
      <div class="card-block">
        <div class="row">
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker" placeholder="Data Commessa" name="data" autocomplete="off" required>
            </div>
          </div>
          <div class="col-md-2">
            <div class="input-group">
              <span class="input-group-addon"><i class="far fa-calendar-alt" aria-hidden="true"></i></span>
              <input type="text" class="form-control" id="datepicker1" placeholder="Scadenza Revisione" name="dtscrev" autocomplete="off">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

</body>
</html>
Ho creato una pagina prova.php ed appena la eseguo compare correttamente l'alert con la scritta "prova" ed il tasto ok