[Javascript] datepicker

Kelly

Utente Attivo
5 Set 2008
112
1
18
Salve....
Ho inserito nella mia pagina questo datepicker e funziona... il problema è che dovrei inserire in un div il datapicker insieme a una tabella che elaboro in php e che ricevo tramite responseText.
es.
echo "<table><tr><td><input type='text' name='date' id='date'/></td></tr></table>"

Ma non funziona perchè suppongo che non si aggancia alla funzione ready....qualcuno sa come posso
fare?

grazie infinite
Codice:
<html>
   <head>

       <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
       <link rel="stylesheet" type="text/css"
        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />
       <script type="text/javascript">
               $(document).ready(function(){
                     $("#date").datepicker();
               });
       </script>
   </head>

   <body>
        <form method="post" action="">
               Date of Birth : <input type="text" name="date" id="date"/>
        </form>
   </body>
</html>
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
il tuo codice restituisce l'errore riportato nell'immagine allegata
ho un codice che funziona, l'ho ridotto per assomigliare al tuo (continua a funzionare), vedi se ti va bene
HTML:
<html>
   <head>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        $(document).ready(function(){
            $(function(){
                $( "#datepicker" ).datepicker();
                $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
            });
        });
       </script>

   </head>

   <body>
    <form action="" method="post">

        <label>Date Of Birth : </label>
        <input type="text" name="selected_date" id="datepicker"/>
        <br />

        <input type="submit" id="submit" value="Submit">
    </form>

   </body>
</html>
ps, "date" è un nome "strano" evitalo
 

Allegati

  • Cattura.PNG
    Cattura.PNG
    5,7 KB · Visite: 530

Kelly

Utente Attivo
5 Set 2008
112
1
18
Grazie Marino

In realtà l'esempio che ho scritto funziona se lo copio così come è scritto. Non funziona più se il codice del datepicker
anzichè metterlo nella stessa pagina lo scrivo in una pagina php , e poi lo inserisco nel body sfruttando la funziona di ajax
xmlhttp.responseText;

//pagina php
esempio
Codice:
     echo "<input type="text" name="selected_date" id="datepicker"/>"

//pagina index.php
Codice:
    function statechanged()
   {
     if (xmlhttp.readystate==4)
    // in questo modo inserisco il datapicker nel div che sta nel body
     document.getElementById('divdatepicker').innerHTML=xmlhttp.responseText;
   }


 <body>
       <div id="divdatepicker">
      </div>
  </body>
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
php è banale,
PHP:
<?php
echo '
    <label>Date Of Birth : </label>
    <input type="text" name="selected_date" id="datepicker"/>
';
?>

html e js un po' più .... ho fatto dei copia incolla da ciò che possiedo, puoi ottimizzare come vuoi, mantenendo la logica,
non cambiare la funzione addJS nella sua struttura (crossbrowser),
HTML:
<html>
   <head>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">
        var myData = null;
        var xmlhttp = GetXmlHttpObject();
        var url="datepicker_3.php?testo=prova";
        xmlhttp.onreadystatechange=stateChanged;
        xmlhttp.open("GET",url,true);
        xmlhttp.send(null);

        function stateChanged()
        {
            if (xmlhttp.readyState==4)
            {
                myData = xmlhttp.responseText;
                alert("ho ricevuto la risposta "+myData);
                addInput("DynDiv");
                addJS();
            }
        }

        function GetXmlHttpObject()
        {
            if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
            if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
            return null;
        }


        function addInput(divName)
        {
            var newdiv = document.createElement('div');

            newdiv.innerHTML = myData;

            document.getElementById(divName).appendChild(newdiv);
        }

        function addJS()
        {
            var s = document.createElement('script');
            s.type = 'text/javascript';
//            var code = 'alert("hello world!");';

var code = '$(function(){ $( "#datepicker" ).datepicker(); $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" ); });'

            try
            {
                s.appendChild(document.createTextNode(code));
                document.body.appendChild(s);
            }
            catch (e)
            {
                s.text = code;
                document.body.appendChild(s);
            }
        }

    </script>

   </head>

   <body>
    <form action="" method="post">

        <div id="DynDiv">

        </div>

        <br />
        <input type="submit" id="submit" value="Submit">
    </form>

   </body>
</html>

puoi mandare sia "input" che "js" da php ma poi devi gestire la suddivisione per alimentare le due funzioni "add"

spero vada bene almeno come traccia, ciao
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
con php che contiene entrambi,
PHP:
<?php

echo '
    <label>Date Of Birth : </label>
    <input type="text" name="selected_date" id="datepicker"/>

    $(function(){
        $( "#datepicker" ).datepicker();
        $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    });
';

?>
puoi suddividere con
HTML:
        function GetValues()
        {
            var n = myData.indexOf("$(function");
            myInput = myData.substring(0, n-1);
            myJS    = myData.substring(n, myData.lenght);
            alert('myInput : '+myInput+'\nmyJS   : '+myJS);
            return
        }
mi sono divertito a sufficienza, torno al lavoro ...
 

Kelly

Utente Attivo
5 Set 2008
112
1
18
Grazie Marino....ti rispondo solo ora perchè ho dovuto interrompere per fare cose più urgenti, ma il tuo esempio è
preziosissimo, ho fatto un copia incolla e funziona....domani lo provo....grazie ancora...
 

Kelly

Utente Attivo
5 Set 2008
112
1
18
ciao Marino,

Ho cercato di rifare il tuo esempio tenendo conto che mi occorre il datapicker restituito da php....Ma mi da un errore
sulla funzione, forse è sbagliata la formattazione?

questo è php
Codice:
<?php

echo '
    <label>Date Of Birth : </label>
    <input type="text" name="selected_date" id="datepicker"/>

    $(function(){
        $( "#datepicker" ).datepicker();
        $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    });
';

?>


Ho quindi tentato vari soluzioni tra cui questa che ti mostro di seguito, funziona ma l'unico problema è che non funziona se seleziono il datepicker la prima volta, prima devo mettere il focus su un altro controllo....sai perchè?

php
Codice:
<input class='insapp' type='text' id='datepicker' onclick='apricalendario()'>

js
Codice:
  function apricalendario()
       {

        $("#datepicker").datepicker();
       }
 
Ultima modifica:

VAik

Utente Attivo
16 Apr 2016
117
3
18
mi iscrivo poichè vorrei chiedere dopo (quando Kelly ha risolto) qualcosa di banale, visto che sono alle prime armi
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
ho perso la sintonia .... provo con delle immagini e poi il codice
Cattura1.PNG

4.php è html,
4a.php restituisce il codice da includere,
4b.php riceve il post

eseguendo html, ottengo
Cattura2.PNG

il campo di input che mi attiva "include"

cliccandolo, ottengo
Cattura3.PNG

ovvero viene incluso il codice

cliccando "date of Birth" ottengo
Cattura4.PNG

ovvero si apre il datepicker

scelgo la data
Cattura5.PNG


la invio al server (4b.php)
Cattura6.PNG


non riesco a "vedere" come vuoi far funzionare il tutto, ti allego i 3 files
PHP:
<html>
   <head>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script type="text/javascript">

        var myData = null, myInput = null, myJS = null;
        var xmlhttp = GetXmlHttpObject();

        function apricalendario()
        {
            var url="datepicker_4a.php?testo=prova";
            xmlhttp.onreadystatechange=stateChanged;
            xmlhttp.open("GET",url,true);
            xmlhttp.send(null);
        }

        function stateChanged()
        {
            if (xmlhttp.readyState==4)
            {
                myData = xmlhttp.responseText;
                GetValues();
                addInput("DynDiv");
                addJS();
            }
        }

        function GetXmlHttpObject()
        {
            if (window.XMLHttpRequest) { return new XMLHttpRequest(); }
            if (window.ActiveXObject)  { return new ActiveXObject("Microsoft.XMLHTTP"); }
            return null;
        }


        function addInput(divName)
        {
            var newdiv = document.createElement('div');

            newdiv.innerHTML = myInput;

            document.getElementById(divName).appendChild(newdiv);
        }

        function addJS()
        {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            var code = myJS;
            try
            {
                s.appendChild(document.createTextNode(code));
                document.body.appendChild(s);
            }
            catch (e)
            {
                s.text = code;
                document.body.appendChild(s);
            }
        }

        function GetValues()
        {
            var n = myData.indexOf("$(function");
            myInput = myData.substring(0, n-1);
            myJS    = myData.substring(n, myData.lenght);
//            alert('myInput : '+myInput+'\nmyJS   : '+myJS);
            return
        }

    </script>

   </head>

   <body>
    <form action="datepicker_4b.php" method="post">

        <input class='insapp' type='text' id='prova' onclick='apricalendario()' />

        <div id="DynDiv">

        </div>

        <br />
        <input type="submit" id="submit" value="Submit">
    </form>

   </body>
</html>
PHP:
<?php

echo '
    <label>Date Of Birth : </label>
    <input type="text" name="selected_date" id="datepicker" />

    $(function(){
        $( "#datepicker" ).datepicker();
        $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
    });
';

?>

giusto per vedere cosa arriva, il terzo file
PHP:
<?php
$tabella  = "";

if(!empty($_GET))
{
  extract($_GET,  EXTR_OVERWRITE);

  $tabella.= '<h3>GET</h3>';
  $tabella.= '<table width="800" border="0" cellspacing="5" cellpadding="5">';
  while(list($chiave, $valore)=each($_GET))
    $tabella.= "<tr><td>".$chiave." : </td><td>".${$chiave}."</td></tr>";
  $tabella.= "</table>";
}

if(!empty($_POST))
{
  extract($_POST, EXTR_OVERWRITE);

  $tabella.= '<h3>POST</h3>';
  $tabella.= '<table width="800" border="0" cellspacing="5" cellpadding="5">';
  while(list($chiave, $valore)=each($_POST))
    $tabella.= "<tr><td>".$chiave." : </td><td>".${$chiave}."</td></tr>";
  $tabella.= "</table>";
}

echo $tabella."<br /> <br />DONE !<br />";
?>
 

Kelly

Utente Attivo
5 Set 2008
112
1
18
Ciao Marino

e grazie per la risposta.....
Il mio esempio è molto semplice, se tu vai qui http://whilly.altervista.org/ e clicchi sul bottone "apri calendario" visualizzerai una input box, se ci clicchi dentro non succede nulla, se riclicchi fuori dalla input box, e per la seconda volta
riclicchi dentro la input allora vedrai che si apre il calendario.....Il mio esempio è molto semplice sono solo 2 file, ma probabilmente non funziona bene perchè c'è un errore da qualche parte...o una mancanza....per questo ti chiedevo una mano....magari tu ci arrivi prima....ma solo se puoi altrimenti cercherò di arrangiarmi, mi hai già aiutato molto...

Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head></head>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script>

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

function stateChanged()
{
if (xmlhttp.readyState == 4)
{
var rispostaxml= xmlhttp.responseText;
document.getElementById('divdata').innerHTML=rispostaxml;
}
}
function apricalendario()
{
$('#datepicker').datepicker();
}

function nuovoappuntamento()
{
xmlhttp = GetXmlHttpObject();
if (xmlhttp == null)
{
alert("Browser does not support HTTP Request");
return;
}
xmlhttp.onreadystatechange = stateChanged;
xmlhttp.open("GET", "data.php?" , true);
xmlhttp.send(null);
}

</script>
<body>
<input type='button' id='nuovoappunt' value='APRI CALENDARIO' onclick='nuovoappuntamento()'>
<div id='divdata'>
</div>
<!--<p>Date: <input type="text" id="datepicker" /></p>-->
</body>
</html>

questo è il php che restituisce la input box
Codice:
<?php
echo "<input type='text' id='datepicker' onclick='apricalendario()'/>"
?>

Io rispetto al tuo esempio non uso le funzioni Getvalues e addjs.....ma neanche l'esempio che ho ripreso da internet le utilizzava......le due funzioni che tu utilizzi sono determinanti perchè passo il calendario da php?
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao, non devi associare la funzione al click ma al caricamento dell'input. Potresti provare cosi
Codice:
if (xmlhttp.readyState == 4)
                {
                    var rispostaxml = xmlhttp.responseText;
                    document.getElementById('divdata').innerHTML = rispostaxml;
                    $("#datepicker").datepicker();
                }
anche se non mi convince molto
 
  • Like
Reactions: Kelly

Kelly

Utente Attivo
5 Set 2008
112
1
18
Ciao Criric.......non ti convince però funziona......lo adotto....grazie infinite a tutti....
 
  • Like
Reactions: criric

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
non mi convince il fatto che se innerHTML non scrive in tempo l'input nel div, la funzione datapicker() non ha un oggetto su cui lavorare. Ma se dici che funziona perchè preoccuparsi :)
 
  • Like
Reactions: Kelly
Discussioni simili
Autore Titolo Forum Risposte Data
A [Javascript] Datepicker - il calendario non si apre Javascript 16
I Creare un banner temporaneo JavaScript Javascript 0
S Impossibile scorrere un oggetto in JavaScript Javascript 0
N Passare array da php a javascript PHP 5
L Quiz javascript funzionante da migliorare Javascript 0
P errore 404 con javascript Javascript 2
D aiuto funzioni javascript Javascript 1
M Upload immagine con javascript problemi con FormData() Javascript 1
L countdown multiplo javascript Javascript 1
S Problemi Javascript + Aruba Javascript 2
M Inviare un file su un server remoto con JavaScript Javascript 0
T a href="javascript:;" Javascript 1
F Creare elementi html con javascript Javascript 3
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
R Confrontare il dominio di una mail con una stringa contenente un dominio personalizzato, tutto ciò in php o javascript PHP 0
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
G Problema verifica palindromo e verifica pari e dispari javascript Javascript 0
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
R Cerco supporto in programmazione javascript Offerte e Richieste di Lavoro e/o Collaborazione 0
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 18
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0

Discussioni simili