Utilizzare il datapicker per le date sulla form

di il
11 risposte

Utilizzare il datapicker per le date sulla form

Ho la necessità di dover utilizzare il datapicker associato ai campi di tipo data.
Prima di inserire la richiesta ho fatto una ricerca su internet e ho trovato una serie di esempi, ma non riesco a farli attivare al mio progetto.
Uso Bootstrap href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

ho aggiunto in base,jsp i seguenti link


  <!-- Bootstrap Date-Picker Plugin -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <!-- jQuery per datepicker -->	
  	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>



per completezza riporto la base.jsp integrale

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
 

<!doctype html>
<html lang="it">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  
  <!-- Bootstrap Date-Picker Plugin -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
  
    
    <!-- Bootstrap CSS con personalizzazioni Moreno-->
    <link href="<c:url value="/static/css/bootstrap.min.4.0-moreno.css" />" rel="stylesheet">
    
    
    <!-- <link href="<c:url value="/static/css/bootstrap.min.css" />" rel="stylesheet"> -->  <!-- vecchio da cancellare -->
    
    <!-- open-iconic -->
    <link href="<c:url value="/static/css/open-iconic-bootstrap.css" />" rel="stylesheet">
    
    <!-- Altri CSS -->
    <link href="<c:url value="/static/css/main.css" />" rel="stylesheet">

    <!-- Altri CSS -->
    <link href="<c:url value="/static/css/Moreno.css" />" rel="stylesheet">

    <!-- CSS per Pagina di Login Moreno-->
   	<!--  <link href="<c:url value="/static/css/login.css" />" rel="stylesheet"> --> 
    
      <!-- CSS da sito per creazione grafica delle form --> 
      <!--    css utilizzati da Edit Grafico maschere (sito da consultare Moreno in Google Drive)
    <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.8033" rel="stylesheet" type="text/css" />
	<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.8033" />
	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.8033" />
	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?themeRevisionID=59fb4852cf3bfe589c6c6f21"/>
    <link href="<c:url value="/static/css/formwork1.css" />" rel="stylesheet">
    <link href="<c:url value="/static/css/formwork2.css" />" rel="stylesheet">   --> 
    
    


    
    
    
     
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <!-- jQuery per datepicker -->	
  	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  	
  	

    <title><tiles:insertAttribute name="titolo" /></title>
  </head>
  <body>
  <!-- Navigation Bar --> 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    		<span class="navbar-toggler-icon"></span>
  		</button>
  		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
  		
  			 <a class="navbar-brand" href="<spring:url value="/webstore/lastart"/>">Sanfra In Festa</a>
  			     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      				<li class="nav-item active">
        				<a class="nav-link" href="<spring:url value="/"/>">
        					<span class="oi oi-home" title="home" aria-hidden="true"></span>
        					Home 
        					<span class="sr-only">(current)</span>
        				</a>
      				</li>
       				<li class="nav-item">
        				<a class="nav-link" href="<spring:url value="/anadip/" /> ">
        					<span class="oi oi-box" title="utenti" aria-hidden="true"></span>
        					Utenti
        				</a>
      				</li>
      				
      				  <div class="dropdown">
					    <button class="btn btn-warning" type="button" id="menu1" data-toggle="dropdown">Utenti
					    <span class="caret"></span></button>
					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="/anadip" />">Elenco Utenti</a></li>
					      <li role="presentation" class="divider"></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="/anadip/aggiungi" />">Nuovo Utente</a></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
					      <li role="presentation" class="divider"></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
					    </ul>
					  </div>
 
     				  <div class="dropdown">
					    <button class="btn btn-success" type="button" id="menu1" data-toggle="dropdown">Prodotti
					    <span class="caret"></span></button>
					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Elenco Prodotti</a></li>
					      <li role="presentation" class="divider"></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Nuovo Prodotto</a></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
					      <li role="presentation" class="divider"></li>
					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
					    </ul>
					  </div>
      				
      				
       				<li class="nav-item">
        				<a class="nav-link" href="#">
        					<span class="oi oi-bullhorn" title="bullhorn" aria-hidden="true"></span>
        					Collaboratori
        				</a>
      				</li>
      				<li class="nav-item">
        				<a class="nav-link" href="#">
        					<span class="oi oi-credit-card" title="credit-card" aria-hidden="true"></span>
        					Commande
        				</a>
      				</li>
      				<li class="nav-item">
        				<a class="nav-link" href="#">
        					<span class="oi oi-cart" title="cart" aria-hidden="true"></span>
        					<span class="badge"></span>
        					Manifestazioni
        				</a>
      				</li>
    			</ul>
    			
    			<!-- Search Box -->
    			<!--  originaria
    			<form class="form-inline my-2 my-lg-0" id="search" role="search">
      				<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
    			</form>
    			-->
    			<c:choose>
    				<c:when test = "${IsManifestazione}">
		    			<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="/SifHb/manifestazione/search">
		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="Cerca Manifestazione">
		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
		    			</form:form>
	    			</c:when>
	    			<c:when test = "${IsAnadip}">
		    			<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="/SifHb/anadip/search">
		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="Cerca Utenti">
		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
		    			</form:form>
	    			</c:when>
	    			<c:otherwise>
	    				<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="">
		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="" disabled>
		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit" disabled >Cerca</button>
		    			</form:form>
	    			</c:otherwise>
    			</c:choose>
    			
    			
    			
    			
    			
    			
    			
    			
    			<!-- dropdown menu -->
    			<div class="dropdown">
    				<button class="btn btn-default dropdown-toggle thumbnail"
    					type="button"
    					id="dropdownMenu1"
    					data-toggle="dropdown"
    					aria-haspopup="true" 
    					aria-expanded="true">
    					<img class="img-circle" src="<c:url value="/static/images/offline_user.png" />">
    					<span class="caret"></span>
    				</button>
    				<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    					<!-- gestisce la visualizzazione di Login -->
    					<c:choose>
	    					<c:when test = "${User != null}">
	    						<a class="dropdown-item disabled" href="#">Accedi</a>
	    					</c:when>
	    					<c:otherwise>
	    						<a class="dropdown-item" href="<spring:url value="/login/form" /> ">Accedi</a>
	    					</c:otherwise>
    					</c:choose>
    					<a class="dropdown-item" href="login.jsp">Registrati</a>
    					<div class="dropdown-divider"></div>
    					<!-- gestisce la visualizzazione di Log Out -->
    					<c:choose>
    						<c:when test = "${User != null}">
    							<!--   <a class="dropdown-item" href="<spring:url value="/login/form?logout"/>"  title="Logout">Logout</a> -->
    							
    							<form id="myHiddenFormId" action="/SifHb/login/form?logout " method="post" style="display: none">
  								<input type="hidden" name="logout" value="${User}">
  								<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
								</form>
								<a class="dropdown-item" href="" onclick="$('#myHiddenFormId').submit(); return false;" title="Logout">Logout ${User}</a>
								
    						</c:when>
    						<c:otherwise>
    							<a class="dropdown-item disabled" href="#">Log out</a>
    						</c:otherwise>
    					</c:choose>
    				</div>
    			</div>
  		</div>
    </nav> 

    
     <tiles:insertAttribute name="content" /> 
     
     <tiles:insertAttribute name="footer" />  
      
  
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
         
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      
        
     
  </body>
</html>

nella pagina dattanadip.jsp ho inserito il seguente codice


<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div class="jumbotron jumbotron-billboard">
	<div class="img"></div>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<h2>${Titolo}</h2>
				<p>${Titolo2}</p>
			</div>
		</div>
	</div>
</div>
<section class="container">
	<div class="portlet light bordered">
		 <div class="portlet-title">
		 	 <div class="caption font-red-sunglo">
            	<i class="icon-settings oi oi-pencil"></i>
             	<span class="caption-subject bold uppercase"><spring:message code="insanadip.form.datiform.label"/></span>
            </div>
 	
		 </div>
		 

	
		 
		 
		<div class="portlet-body form">
				<form:form  method="POST" modelAttribute="AnadipForm">
				<div class="form-body">
				 
					<div class="form-group">
						<label for="matricola"><spring:message code="insanadip.form.matricola.label"/></label>
						<form:input  path="matricola" type="text" class="form-control" readonly="true"/>
					</div>
					
					<div class="form-group">
						
						<table>
								<tr>
								<td><label>Utente</label></td>
									<td>&emsp;</td>
									<td><form:input  path="cognomeNome" type="text" class="form-control_Moreno" readonly="true"/></td> 								</tr>
							</table>				
					</div>

					<div class="form-row">
			
						<div class="form-group">
							<label for="dTitolodTitolo"><spring:message code="insanadip.form.titolo.label"/></label>						
							<form:input  path="dTitolo" type="text" class="form-control" readonly="true"/> 	 
						</div>
		
						&emsp;&emsp;&emsp;						
						<div class="form-group">
							<label for="dStato"><spring:message code="insanadip.form.stato.label"/></label>						
							<form:input  path="dStato" type="text" class="form-control" readonly="true"/> 	 
						</div>
						&emsp;&emsp;&emsp;					
						<div class="form-group">
							<label for="dUserLevel"><spring:message code="insanadip.form.livello.label"/></label>	
							<table>
								<tr>
									<td><form:input  path="dUserLevel" type="text" class="form-control" readonly="true"/> </td>
									<td>&emsp;</td>
									<td><form:input  path="tipo" type="text" class="form-control" readonly="true"/> </td>
								</tr>
							</table>					
						</div>
					</div>
					<div class="form-row">
						<div class="form-group">
							<label for="userid"><spring:message code="insanadip.form.userid.label"/></label>						
							<form:input  path="userid" type="text" class="form-control" readonly="true"/> 	 
						</div>
						&emsp;&emsp;&emsp;						
						<div class="form-group">
							<label for="password"><spring:message code="insanadip.form.password.label"/></label>						
							<form:input  path="password" type="text" class="form-control_Moreno" readonly="true"/> 	 
						</div>					
					</div>		



					
					
							
					<div class="form-group">
						<label>Ultimo aggiornamento</label><br>
						<table>
								<tr>
									<td><label for="dateOp"><spring:message code="insanadip.form.dateOp.label" /></label> </td>
									<td>&emsp;</td>
									<td>
	    								<form:input  path="dateOp" type="text"  readonly="true" />  
   	
									</td>          
								</tr>
			
								
								
								
								<tr><td>&nbsp;</td></tr>
								<tr>
									<td><label for="keyUserOp"><spring:message code="insanadip.form.keyUserOp.label"/></label> </td>
								  	<td>&emsp;</td>
								  	<td><form:input  path="nameOperator" type="text" class="form-control" readonly="true"/></td>
								  	  
									
								</tr>								
								
						</table>
						</div>
		
										
  				</div>	
				<hr class="line-form">
	
	<!--   campo con modifiche per gestione datepicker  -->

				<div class="form-group">
					<label for="dateOp" class="control-label col-sm-2"><spring:message code="insanadip.form.dateOp.label" />Data da editare<span class=“asteriskField”>*</span></label>
					<div class="col-sm-10">
						<div class="input-group">
							<div class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</div>
							<form:input  path="dateOp" type="text"  readonly="true" class="form-control" placeholder="gg/mm/aaaa" id="dateOp"/>
						</div>
					</div>
				</div>
	
	<script>
    $(document).ready(function(){
        var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
        var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
        date_input.datepicker({
            format: 'mm/dd/yyyy',
            container: container,
            todayHighlight: true,
            autoclose: true,
        })
    })
</script>

	
	
	<hr class="line-form">
				
				<div class="form-actions">
				    <a href="<spring:url value="/anadip" />"   id="anadipElenco" class="btn btn btn-primary btn-lg">Anadip</a> 
					<a href="<spring:url value="/anadip/aggiungi" /> "  style="margin-left: 20px;" class="btn btn-success float-right">Nuovo Utente</a>				
				</div>
			
				</form:form>
			</div>
	</div>
</section>

in allegato lo screnshot con il campo sul quale vorrei utilizzare il datepicker.

grazie

Moreno
Allegati:
19656_bfebcebb975f784dc81722653b98b1ad.jpg
19656_bfebcebb975f784dc81722653b98b1ad.jpg

11 Risposte

  • Re: Utilizzare il datapicker per le date sulla form

    Hai già letto la documentazione?
    https://bootstrap-datepicker.readthedocs.io/en/latest
  • Re: Utilizzare il datapicker per le date sulla form

    Ciao AndBin

    Ho guardato la documentazione che mi hai indicato.
    Mi sembra di avere inserito in base.jsp le in dettanadip.jsp e specifiche indicate nella documentazione.
    So di sbagliare qualcosa, ma non trovo motivi.

    Riesci a verificare l'incongruenza ?

    Ti allego la pagina dettanadip.jsp con il codice aggiornato.
    Grazie

    Moreno
    
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    <div class="jumbotron jumbotron-billboard">
    	<div class="img"></div>
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-12">
    				<h2>${Titolo}</h2>
    				<p>${Titolo2}</p>
    			</div>
    		</div>
    	</div>
    </div>
    <section class="container">
    	<div class="portlet light bordered">
    		 <div class="portlet-title">
    		 	 <div class="caption font-red-sunglo">
                	<i class="icon-settings oi oi-pencil"></i>
                 	<span class="caption-subject bold uppercase"><spring:message code="insanadip.form.datiform.label"/></span>
                </div>
     	
    		 </div>
    		 
    
    	
    		 
    		 
    		<div class="portlet-body form">
    				<form:form  method="POST" modelAttribute="AnadipForm">
    				<div class="form-body">
    				 
    					<div class="form-group">
    						<label for="matricola"><spring:message code="insanadip.form.matricola.label"/></label>
    						<form:input  path="matricola" type="text" class="form-control" readonly="true"/>
    					</div>
    					
    					<div class="form-group">
    						
    						<table>
    								<tr>
    								<td><label>Utente</label></td>
    									<td>&emsp;</td>
    									<td><form:input  path="cognomeNome" type="text" class="form-control_Moreno" readonly="true"/></td> 								</tr>
    							</table>				
    					</div>
    
    					<div class="form-row">
    			
    						<div class="form-group">
    							<label for="dTitolodTitolo"><spring:message code="insanadip.form.titolo.label"/></label>						
    							<form:input  path="dTitolo" type="text" class="form-control" readonly="true"/> 	 
    						</div>
    		
    						&emsp;&emsp;&emsp;						
    						<div class="form-group">
    							<label for="dStato"><spring:message code="insanadip.form.stato.label"/></label>						
    							<form:input  path="dStato" type="text" class="form-control" readonly="true"/> 	 
    						</div>
    						&emsp;&emsp;&emsp;					
    						<div class="form-group">
    							<label for="dUserLevel"><spring:message code="insanadip.form.livello.label"/></label>	
    							<table>
    								<tr>
    									<td><form:input  path="dUserLevel" type="text" class="form-control" readonly="true"/> </td>
    									<td>&emsp;</td>
    									<td><form:input  path="tipo" type="text" class="form-control" readonly="true"/> </td>
    								</tr>
    							</table>					
    						</div>
    					</div>
    					<div class="form-row">
    						<div class="form-group">
    							<label for="userid"><spring:message code="insanadip.form.userid.label"/></label>						
    							<form:input  path="userid" type="text" class="form-control" readonly="true"/> 	 
    						</div>
    						&emsp;&emsp;&emsp;						
    						<div class="form-group">
    							<label for="password"><spring:message code="insanadip.form.password.label"/></label>						
    							<form:input  path="password" type="text" class="form-control_Moreno" readonly="true"/> 	 
    						</div>					
    					</div>		
    
    
    
    					
    					
    							
    					<div class="form-group">
    						<label>Ultimo aggiornamento</label><br>
    						<table>
    								<tr>
    									<td><label for="dateOp"><spring:message code="insanadip.form.dateOp.label" /></label> </td>
    									<td>&emsp;</td>
    									<td>
    	    								<form:input  path="dateOp" type="text"  readonly="true" />  
       	
    									</td>          
    								</tr>
    			
    								
    								
    								
    								<tr><td>&nbsp;</td></tr>
    								<tr>
    									<td><label for="keyUserOp"><spring:message code="insanadip.form.keyUserOp.label"/></label> </td>
    								  	<td>&emsp;</td>
    								  	<td><form:input  path="nameOperator" type="text" class="form-control" readonly="true"/></td>
    								  	  
    									
    								</tr>								
    								
    						</table>
    						</div>
    		
    										
      				</div>	
    				<hr class="line-form">
    	
    	
    	
    				<div class="form-group">
    					<label for="dateOp" class="control-label col-sm-2"><spring:message code="insanadip.form.dateOp.label" />Data da editare<span class=“asteriskField”>*</span></label>
    					<div class="col-sm-10">
    						<div class="input-group date"  data-provide="datapicker">
    							<form:input  path="dateOp" type="text"  readonly="true" class="form-control" placeholder="gg/mm/aaaa" id="dateOp"/>
    							<div class="input-group-addon" >
    								<span class="glyphicon glyphicon-th"></span>
    							</div>
    						</div>
    					</div>
    				</div>
    	
    	<script>
        $(document).ready(function(){
            var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'mm/dd/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
            })
        })
    </script>
    	
    	
    	
    	<hr class="line-form">
    				
    				<div class="form-actions">
    				    <a href="<spring:url value="/anadip" />"   id="anadipElenco" class="btn btn btn-primary btn-lg">Anadip</a> 
    					<a href="<spring:url value="/anadip/aggiungi" /> "  style="margin-left: 20px;" class="btn btn-success float-right">Nuovo Utente</a>				
    				</div>
    			
    				</form:form>
    			</div>
    	</div>
    </section>
    
    

    per una valutazione completa ti allego anche base.jsp

    
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%> 
    <%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%> 
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> 
     
    
    <!doctype html>
    <html lang="it">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      
      <!-- Bootstrap Date-Picker Plugin -->
    	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
      
        
        <!-- Bootstrap CSS con personalizzazioni Moreno-->
        <link href="<c:url value="/static/css/bootstrap.min.4.0-moreno.css" />" rel="stylesheet">
        
        
        <!-- <link href="<c:url value="/static/css/bootstrap.min.css" />" rel="stylesheet"> -->  <!-- vecchio da cancellare -->
        
        <!-- open-iconic -->
        <link href="<c:url value="/static/css/open-iconic-bootstrap.css" />" rel="stylesheet">
        
        <!-- Altri CSS -->
        <link href="<c:url value="/static/css/main.css" />" rel="stylesheet">
    
        <!-- Altri CSS -->
        <link href="<c:url value="/static/css/Moreno.css" />" rel="stylesheet">
    
        <!-- CSS per Pagina di Login Moreno-->
       	<!--  <link href="<c:url value="/static/css/login.css" />" rel="stylesheet"> --> 
        
          <!-- CSS da sito per creazione grafica delle form --> 
          <!--    css utilizzati da Edit Grafico maschere (sito da consultare Moreno in Google Drive)
        <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.8033" rel="stylesheet" type="text/css" />
    	<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.8033" />
    	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.8033" />
    	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?themeRevisionID=59fb4852cf3bfe589c6c6f21"/>
        <link href="<c:url value="/static/css/formwork1.css" />" rel="stylesheet">
        <link href="<c:url value="/static/css/formwork2.css" />" rel="stylesheet">   --> 
        
        
    
    
        
        
        
         
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <!-- jQuery per datepicker -->	
      	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      	
      	
    
        <title><tiles:insertAttribute name="titolo" /></title>
      </head>
      <body>
      <!-- Navigation Bar --> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
        	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        		<span class="navbar-toggler-icon"></span>
      		</button>
      		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      		
      			 <a class="navbar-brand" href="<spring:url value="/webstore/lastart"/>">Sanfra In Festa</a>
      			     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          				<li class="nav-item active">
            				<a class="nav-link" href="<spring:url value="/"/>">
            					<span class="oi oi-home" title="home" aria-hidden="true"></span>
            					Home 
            					<span class="sr-only">(current)</span>
            				</a>
          				</li>
           				<li class="nav-item">
            				<a class="nav-link" href="<spring:url value="/anadip/" /> ">
            					<span class="oi oi-box" title="utenti" aria-hidden="true"></span>
            					Utenti
            				</a>
          				</li>
          				
          				  <div class="dropdown">
    					    <button class="btn btn-warning dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Utenti
    					    <span class="caret"></span></button>
    	    
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="/anadip" />">Elenco Utenti</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="/anadip/aggiungi" />">Nuovo Utente</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>
     			&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-primary  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Manifestazione
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Elenco</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Nuova</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation" class="dropdown-header">Apertura Giornata</li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apertura Giornata</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>
     
     			&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-success  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Prodotti
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Elenco Prodotti</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Nuovo Prodotto</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>     				
          				&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-info  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Giornate
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Elenco</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Nuova</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>     				
       
     					&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-danger  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Commande
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Elenco</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="<spring:url value="#" />">Nuova</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation" class="dropdown-header">Evasione</li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cucina</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Bevande</a></li>
    					    </ul>
    					  </div>
      
        			</ul>
        			
        			<!-- Search Box -->
        			<!--  originaria
        			<form class="form-inline my-2 my-lg-0" id="search" role="search">
          				<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
        			</form>
        			-->
        			<c:choose>
        				<c:when test = "${IsManifestazione}">
    		    			<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="/SifHb/manifestazione/search">
    		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="Cerca Manifestazione">
    		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
    		    			</form:form>
    	    			</c:when>
    	    			<c:when test = "${IsAnadip}">
    		    			<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="/SifHb/anadip/search">
    		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="Cerca Utenti">
    		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
    		    			</form:form>
    	    			</c:when>
    	    			<c:otherwise>
    	    				<form:form class="form-inline my-2 my-lg-0" id="search" role="search" method="GET" action="">
    		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="${filter}" placeholder="" disabled>
    		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit" disabled >Cerca</button>
    		    			</form:form>
    	    			</c:otherwise>
        			</c:choose>
        			
        			
        			
        			
        			
        			
        			
        			
        			<!-- dropdown menu -->
        			<div class="dropdown">
        				<button class="btn btn-default dropdown-toggle thumbnail"
        					type="button"
        					id="dropdownMenu1"
        					data-toggle="dropdown"
        					aria-haspopup="true" 
        					aria-expanded="true">
        					<img class="img-circle" src="<c:url value="/static/images/offline_user.png" />">
        					<span class="caret"></span>
        				</button>
        				<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        					<!-- gestisce la visualizzazione di Login -->
        					<c:choose>
    	    					<c:when test = "${User != null}">
    	    						<a class="dropdown-item disabled" href="#">Accedi</a>
    	    					</c:when>
    	    					<c:otherwise>
    	    						<a class="dropdown-item" href="<spring:url value="/login/form" /> ">Accedi</a>
    	    					</c:otherwise>
        					</c:choose>
        					<a class="dropdown-item" href="login.jsp">Registrati</a>
        					<div class="dropdown-divider"></div>
        					<!-- gestisce la visualizzazione di Log Out -->
        					<c:choose>
        						<c:when test = "${User != null}">
        							<!--   <a class="dropdown-item" href="<spring:url value="/login/form?logout"/>"  title="Logout">Logout</a> -->
        							
        							<form id="myHiddenFormId" action="/SifHb/login/form?logout " method="post" style="display: none">
      								<input type="hidden" name="logout" value="${User}">
      								<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
    								</form>
    								<a class="dropdown-item" href="" onclick="$('#myHiddenFormId').submit(); return false;" title="Logout">Logout ${User}</a>
    								
        						</c:when>
        						<c:otherwise>
        							<a class="dropdown-item disabled" href="#">Log out</a>
        						</c:otherwise>
        					</c:choose>
        				</div>
        			</div>
      		</div>
        </nav> 
    
        
         <tiles:insertAttribute name="content" /> 
         
         <tiles:insertAttribute name="footer" />  
          
      
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
             
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
          
      </body>
    
    
    
    Mi piacerebbe capire cosa manca.

    Grazie

    Moreno
  • Re: Utilizzare il datapicker per le date sulla form

    misonsan ha scritto:


    Mi piacerebbe capire cosa manca.
    Beh, c'è una cosa un po' subdola che ho notato nel tuo codice. Lo <script> dove usi $ e altro di JQuery lo tiri dentro nella parte "content". Ma questa viene PRIMA di tirar dentro il jquery-3.3.1.slim.min.js. Quindi quando esegue il tuo <script> non ci sono ancora le definizioni di JQuery. Questo è certo.
    Poi potrebbe esserci altro che magari non mi è evidente ora.

    Comunque con il "solito" Starter template ho scritto questo, e funziona:
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
        <title>Prova datepicker</title>
        <style>
            body { margin: 2em; }
        </style>
      </head>
      <body>
        <h1>Prova datepicker</h1>
    
        <br><br><br><br><br><br><br><br><br><br>
        Esempio datepicker: <input type="text" id="datepicker1" name="datepicker1" size="10">
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#datepicker1').datepicker({
                    format: 'mm/dd/yyyy',
                    todayHighlight: true,
                    autoclose: true
                });
            });
        </script>
      </body>
    </html>
  • Re: Utilizzare il datapicker per le date sulla form

    Ciao AndBin

    So di essere una pena infinita, ma sicuramente mi sfugge il flusso di dove inserire le istruzioni.
    Il codice che mi hai postato nell'ultima risposta è ottimale e funziona, ma su una pagina html normale.
    la mia gestione delle pagine prevede di utilizzARE UNA "Base.jsp" con la parte comune a tutte le pagine e la parte della personalizzata della singola form viene inserita nel "container".

    quindi i link che hai inserito sotto alla <meta name=".....
    
       <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
    
    li ho inseriti nella base.jsp

    invece nella pagina dettanadip.jsp ho inserito il codice sotto alla definizione del campo che contiene la data come mi sembra fatto nel tuo esempio

    tuo codice
    
    
       Esempio datepicker: <input type="text" id="datepicker1" name="datepicker1" size="10">
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#datepicker1').datepicker({
                    format: 'mm/dd/yyyy',
                    todayHighlight: true,
                    autoclose: true
                });
            });
        </script>
    
    
    mia controllo data su dettanadip,jsp
    
    				<div class="form-group">
    					<label for="dateOp" class="control-label col-sm-2"><spring:message code="insanadip.form.dateOp.label" />Data da editare<span class=“asteriskField”>*</span></label>
    					<div class="col-sm-10">
    						<div class="input-group date"  data-provide="datapicker">
    							<form:input  path="dateOp" type="text"  readonly="true" class="form-control" placeholder="gg/mm/aaaa" id="dateOp"/>
    							<div class="input-group-addon" >
    								<span class="glyphicon glyphicon-th"></span>
    							</div>
    						</div>
    					</div>
    				</div>
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>	
    	<script>
        $(document).ready(function(){
            var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'mm/dd/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
            })
        })
    </script>
    	
    
    
    Ho sbagliato nell'interpretazione e posizionalità del codice ?
    Se è corretto come impostazione non capisco come mai non funzionaa.

    Mi sento a disagio per arrecare sempre un disturbo quasi insolente, ma vorrei capire il contesto per poter poi essere autonomo.
    grazie

    Moreno
  • Re: Utilizzare il datapicker per le date sulla form

    Se non ti funziona, apri innanzitutto la console del browser. E vedi se ci sono errori.
    Poi comunque verifica sempre il HTML complessivo che "vede" il browser (opzione "View source" di un browser).
  • Re: Utilizzare il datapicker per le date sulla form

    Ciao Andrea

    Ho aperto la console del Browser.
    nello screenshot l'errore

    Non so se ho interpretato correttamente quanto mi hai indicato, ma ho recuperato il sorgente della pagina
    
     
     
     
     
     
    
    <!doctype html>
    <html lang="it">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      
      <!-- Bootstrap Date-Picker Plugin -->
    	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
      
        
        <!-- Bootstrap CSS con personalizzazioni Moreno-->
        <link href="/SifHb/static/css/bootstrap.min.4.0-moreno.css" rel="stylesheet">
        
        
        <!-- <link href="/SifHb/static/css/bootstrap.min.css" rel="stylesheet"> -->  <!-- vecchio da cancellare -->
        
        <!-- open-iconic -->
        <link href="/SifHb/static/css/open-iconic-bootstrap.css" rel="stylesheet">
        
        <!-- Altri CSS -->
        <link href="/SifHb/static/css/main.css" rel="stylesheet">
    
        <!-- Altri CSS -->
        <link href="/SifHb/static/css/Moreno.css" rel="stylesheet">
    
        <!-- CSS per Pagina di Login Moreno-->
       	<!--  <link href="/SifHb/static/css/login.css" rel="stylesheet"> --> 
        
          <!-- CSS da sito per creazione grafica delle form --> 
          <!--    css utilizzati da Edit Grafico maschere (sito da consultare Moreno in Google Drive)
        <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.8033" rel="stylesheet" type="text/css" />
    	<link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.8033" />
    	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.8033" />
    	<link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?themeRevisionID=59fb4852cf3bfe589c6c6f21"/>
        <link href="/SifHb/static/css/formwork1.css" rel="stylesheet">
        <link href="/SifHb/static/css/formwork2.css" rel="stylesheet">   --> 
        
        
    
    
        
        
        
         
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <!-- jQuery per datepicker -->	
      	<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      	
      	
    
        <title>Scheda Utente</title>
      </head>
      <body>
      <!-- Navigation Bar --> 
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
        	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        		<span class="navbar-toggler-icon"></span>
      		</button>
      		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      		
      			 <a class="navbar-brand" href="/SifHb/webstore/lastart">Sanfra In Festa</a>
      			     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          				<li class="nav-item active">
            				<a class="nav-link" href="/SifHb/">
            					<span class="oi oi-home" title="home" aria-hidden="true"></span>
            					Home 
            					<span class="sr-only">(current)</span>
            				</a>
          				</li>
           				<li class="nav-item">
            				<a class="nav-link" href="/SifHb/anadip/ ">
            					<span class="oi oi-box" title="utenti" aria-hidden="true"></span>
            					Utenti
            				</a>
          				</li>
          				
          				  <div class="dropdown">
    					    <button class="btn btn-warning dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Utenti
    					    <span class="caret"></span></button>
    	    
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="/SifHb/anadip">Elenco Utenti</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="/SifHb/anadip/aggiungi">Nuovo Utente</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>
     			&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-primary  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Manifestazione
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elenco</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nuova</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation" class="dropdown-header">Apertura Giornata</li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apertura Giornata</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>
     
     			&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-success  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Prodotti
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elenco Prodotti</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nuovo Prodotto</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>     				
          				&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-info  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Giornate
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elenco</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nuova</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 3</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Funzione Utenti 4</a></li>
    					    </ul>
    					  </div>     				
       
     					&nbsp;&nbsp;
         				  <div class="dropdown">
    					    <button class="btn btn-danger  dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Commande
    					    <span class="caret"></span></button>
    					    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elenco</a></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nuova</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation" class="dropdown-header">Evasione</li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cucina</a></li>
    					      <li role="presentation" class="divider"></li>
    					      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Bevande</a></li>
    					    </ul>
    					  </div>
      
        			</ul>
        			
        			<!-- Search Box -->
        			<!--  originaria
        			<form class="form-inline my-2 my-lg-0" id="search" role="search">
          				<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          				<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Cerca</button>
        			</form>
        			-->
        			
        				
    	    			
    	    			
    	    				<form id="search" role="search" class="form-inline my-2 my-lg-0" action="/SifHb/anadip/infoanadip/2" method="GET">
    		      				<input type="text" onClick="this.select();"  class="form-control mr-sm-2" name="filter" value="" placeholder="" disabled>
    		      				<button class="btn btn-outline-success my-2 my-sm-0" type="submit" disabled >Cerca</button>
    		    			</form>
    	    			
        			
        			
        			
        			
        			
        			
        			
        			
        			
        			<!-- dropdown menu -->
        			<div class="dropdown">
        				<button class="btn btn-default dropdown-toggle thumbnail"
        					type="button"
        					id="dropdownMenu1"
        					data-toggle="dropdown"
        					aria-haspopup="true" 
        					aria-expanded="true">
        					<img class="img-circle" src="/SifHb/static/images/offline_user.png">
        					<span class="caret"></span>
        				</button>
        				<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        					<!-- gestisce la visualizzazione di Login -->
        					
    	    					
    	    					
    	    						<a class="dropdown-item" href="/SifHb/login/form ">Accedi</a>
    	    					
        					
        					<a class="dropdown-item" href="login.jsp">Registrati</a>
        					<div class="dropdown-divider"></div>
        					<!-- gestisce la visualizzazione di Log Out -->
        					
        						
        						
        							<a class="dropdown-item disabled" href="#">Log out</a>
        						
        					
        				</div>
        			</div>
      		</div>
        </nav> 
    
        
         
    
    
    
    <div class="jumbotron jumbotron-billboard">
    	<div class="img"></div>
    	<div class="container">
    		<div class="row">
    			<div class="col-lg-12">
    				<h2>Dettaglio Utente</h2>
    				<p>Dettaglio Utente TROMBIN GIANCARLO</p>
    			</div>
    		</div>
    	</div>
    </div>
    <section class="container">
    	<div class="portlet light bordered">
    		 <div class="portlet-title">
    		 	 <div class="caption font-red-sunglo">
                	<i class="icon-settings oi oi-pencil"></i>
                 	<span class="caption-subject bold uppercase">Dati Utente</span>
                </div>
     	
    		 </div>
     
    		 
    		<div class="portlet-body form">
    				<form id="AnadipForm" action="/SifHb/anadip/infoanadip/2" method="POST">
    				<div class="form-body">
    				 
    					<div class="form-group">
    						<label for="matricola">Matricola</label>
    						<input id="matricola" name="matricola" type="text" class="form-control" readonly="readonly" value="2"/>
    					</div>
    					
    					<div class="form-group">
    						
    						<table>
    								<tr>
    								<td><label>Utente</label></td>
    									<td>&emsp;</td>
    									<td><input id="cognomeNome" name="cognomeNome" type="text" class="form-control_Moreno" readonly="readonly" value="TROMBIN GIANCARLO"/></td> 								</tr>
    							</table>				
    					</div>
    
    					<div class="form-row">
    			
    						<div class="form-group">
    							<label for="dTitolodTitolo">Titolo</label>						
    							<input id="dTitolo" name="dTitolo" type="text" class="form-control" readonly="readonly" value="Sig."/> 	 
    						</div>
    		
    						&emsp;&emsp;&emsp;						
    						<div class="form-group">
    							<label for="dStato">Stato</label>						
    							<input id="dStato" name="dStato" type="text" class="form-control" readonly="readonly" value="ATTIVO"/> 	 
    						</div>
    						&emsp;&emsp;&emsp;					
    						<div class="form-group">
    							<label for="dUserLevel">Livello</label>	
    							<table>
    								<tr>
    									<td><input id="dUserLevel" name="dUserLevel" type="text" class="form-control" readonly="readonly" value="Gestore Cucina"/> </td>
    									<td>&emsp;</td>
    									<td><input id="tipo" name="tipo" type="text" class="form-control" readonly="readonly" value="USER"/> </td>
    								</tr>
    							</table>					
    						</div>
    					</div>
    					<div class="form-row">
    						<div class="form-group">
    							<label for="userid">User Name</label>						
    							<input id="userid" name="userid" type="text" class="form-control" readonly="readonly" value="trombin"/> 	 
    						</div>
    						&emsp;&emsp;&emsp;						
    						<div class="form-group">
    							<label for="password">Password</label>						
    							<input id="password" name="password" type="text" class="form-control_Moreno" readonly="readonly" value="Norm: &lt;carletto&gt; norm. $2a$10$0kHchkUyyKSmz3mtZgTQ9enkLNv3BVYMaqU1nsXq45CnslIwXgflm"/> 	 
    						</div>					
    					</div>		
    
    
    
    					
    					
    							
    					<div class="form-group">
    						<label>Ultimo aggiornamento</label><br>
    						<table>
    								<tr>
    									<td><label for="dateOp">Data</label> </td>
    									<td>&emsp;</td>
    									<td>
    	    								<input id="dateOp" name="dateOp" type="text" readonly="readonly" value="2018-11-06 16:48:32.253"/>  
       	
    									</td>          
    								</tr>
    			
    								
    								
    								
    								<tr><td>&nbsp;</td></tr>
    								<tr>
    									<td><label for="keyUserOp">Operatore</label> </td>
    								  	<td>&emsp;</td>
    								  	<td><input id="nameOperator" name="nameOperator" type="text" class="form-control" readonly="readonly" value="null null"/></td>
    								  	  
    									
    								</tr>								
    								
    						</table>
    						</div>
    		
    										
      				</div>	
    				<hr class="line-form">
    
    				<div class="form-group">
    					<label for="dateOp" class="control-label col-sm-2">DataData da editare<span class=“asteriskField”>*</span></label>
    					<div class="col-sm-10">
    						<div class="input-group date"  data-provide="datapicker">
    							<input id="dateOp" name="dateOp" placeholder="gg/mm/aaaa" type="text" class="form-control" readonly="readonly" value="2018-11-06 16:48:32.253"/>
    							<div class="input-group-addon" >
    								<span class="glyphicon glyphicon-th"></span>
    							</div>
    						</div>
    					</div>
    				</div>
    
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>	
    	<script>
        $(document).ready(function(){
            var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'mm/dd/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
            })
        })
    </script>
    	
    	
    	
    	<hr class="line-form">
    				
    				<div class="form-actions">
    				    <a href="/SifHb/anadip"   id="anadipElenco" class="btn btn btn-primary btn-lg">Anadip</a> 
    					<a href="/SifHb/anadip/aggiungi "  style="margin-left: 20px;" class="btn btn-success float-right">Nuovo Utente</a>				
    				</div>
    			
    				<div>
    <input type="hidden" name="_csrf" value="c8bc2ab4-24e1-4ebf-a3cf-c435684cbcc5" />
    </div></form>
    			</div>
    	</div>
    </section> 
         
         <footer class="footer text-xs-center form-fooder">
    	<p class="text-muted">
    		<small>&copy; 2018 by Xantrix Inc.</small>
    	</p>
    	<p class="text-muted">
    		<a href="#"><small>Termini &amp; Condizioni</small> </a>
    	</p>
    	<p class="text-muted">
    		<a href="#"><small>Chi Siamo</small></a>
    	</p>
    	<p class="text-muted">
    		<a href="#"><small>I nostri Negozi</small></a>
    	</p>
    </footer>  
          
      
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
             
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     
         
      </body>
    </html>
    
    utilizzo firefox 65.0.1 (64 bit)

    possono esserti di aiiuto ?
    grazie

    Moreno
    Allegati:
    19656_11f70ce7031272fb4fa7ef03bce95122.jpg
    19656_11f70ce7031272fb4fa7ef03bce95122.jpg
  • Re: Utilizzare il datapicker per le date sulla form

    misonsan ha scritto:


    Ho aperto la console del Browser.
    nello screenshot l'errore

    Non so se ho interpretato correttamente quanto mi hai indicato, ma ho recuperato il sorgente della pagina
    Guarda BENE il HTML generato della pagina. Hai ripetuto 2 volte gli script per tirare dentro JQuery, Popper, BootStrap, Datepicker mettendoli in vari punti della pagina.

    Non va bene. Devi "curare" di più queste cose, devi prestare attenzione. Altrimenti davvero non ne esci ...
  • Re: Utilizzare il datapicker per le date sulla form

    Ciao Andrea

    Ho corretto la svista della doppia scrittura script.
    Ora funziona.

    Unico problema che resta è che, nonostante ho postato nello script javascript che il linguaggio deve essere italiano, contua
    a editare i dati in inglese.

    il codice è:
    
    	<script>
        $(document).ready(function(){
            var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'dd/mm/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
                clearBtn: true,
                locale: "it"
            })
        })
    </script>
    
    
    in certa documentazione è riportato come keyword per indicare il linguaggio il termine language: "it"

    provato anche così ma da sempre inglese.
    Ciao

    Moreno
    Allegati:
    19656_b44589aa3ebc13356b59df8ef102f9bc.jpg
    19656_b44589aa3ebc13356b59df8ef102f9bc.jpg
  • Re: Utilizzare il datapicker per le date sulla form

    misonsan ha scritto:


    Unico problema che resta è che, nonostante ho postato nello script javascript che il linguaggio deve essere italiano, contua
    a editare i dati in inglese.
    
                todayHighlight: true,
                autoclose: true,
                clearBtn: true,
                locale: "it"
    
    in certa documentazione è riportato come keyword per indicare il linguaggio il termine language: "it"
    Va scritto language: "it", non locale: "it"

    --> https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#language
  • Re: Utilizzare il datapicker per le date sulla form

    Ciao Andrea

    Ho impostato il linguaggio come da te indicato.
    
    	<script>
        $(document).ready(function(){
            var date_input=$('input[name="dateOp"]'); //our date input has the name "date"
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'dd/mm/yyyy',
                container: container,
                todayHighlight: true,
                autoclose: true,
                clearBtn: true,
                language: 'it'
            })
        })
    </script>
    
    
    ho provato anche con language: "it" (doppio apice) ma non viene impostato il linguaggio.

    Problema N. 2

    nella definizione del controllo datepicker ho messo che sia di tipo readonly = "true". quindi dovrebbe essere impedito di modificare la data, mentre aprendo il datepicker posso selezionare eimposatre una nuova data. Perchè ?
    
    								<td><label for="dateOp" class="control-label col-sm-2"><spring:message code="insanadip.form.dateOp.label" /><span class=“asteriskField”>*</span></label></td>
    									<td>&emsp;</td>
    									<td>
    									<div class="col-sm-10">
    										<div class="input-group date"  data-provide="datapicker">
    											<form:input  path="dateOp" type="text"  readonly="true" class="form-control" placeholder="gg/mm/aaaa" id="dateOp"/>
    												<div class="input-group-addon" >
    													<span class="input-group-addon">
    														<i class="glyphicon glyphicon-calendar"></i>
    													</span>
    												</div>
    										</div>
    									</div>
    									</td>
    
    
    Buona Notte.
    Ciao

    Moreno
    Allegati:
    19656_b12029fddfbc304d98ff5470adff3585.jpg
    19656_b12029fddfbc304d98ff5470adff3585.jpg
  • Re: Utilizzare il datapicker per le date sulla form

    misonsan ha scritto:


    Ho impostato il linguaggio come da te indicato.

    ho provato anche con language: "it" (doppio apice) ma non viene impostato il linguaggio.
    Giusto mettere quel language. Ma leggi qui: https://bootstrap-datepicker.readthedocs.io/en/latest/i18n.html
    Serve anche "altro" (un .js specifico per ciascuna lingua necessaria oltre all'inglese).

    misonsan ha scritto:


    nella definizione del controllo datepicker ho messo che sia di tipo readonly = "true". quindi dovrebbe essere impedito di modificare la data, mentre aprendo il datepicker posso selezionare eimposatre una nuova data. Perchè ?
    Probabilmente non lo fa. Vedo (sempre dalla documentazione) che c'è una proprietà enableOnReadonly che se la metti a false E c'è il readonly, allora il datepicker non viene proprio aperto.
    Ma non saprei dire se è possibile fare in modo che il datepicker si apra ma non permetta cambiamenti.

    Insomma, stai usando cose che non conosci (nemmeno io conosco bene). Basta innanzitutto documentarsi. Se non lo fa ... o si lascia perdere questo aspetto o si cerca qualche eventuale escamotage per aggirare e risolvere la cosa.
Devi accedere o registrarti per scrivere nel forum
11 risposte