[Javascript] datepicker

Kelly · 18 Ott 2016

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 · 18 Ott 2016

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

Kelly · 19 Ott 2016

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 · 19 Ott 2016

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 · 19 Ott 2016

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 · 27 Ott 2016

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 · 2 Nov 2016

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();
       }

VAik · 13 Nov 2016

mi iscrivo poichè vorrei chiedere dopo (quando Kelly ha risolto) qualcosa di banale, visto che sono alle prime armi

marino51 · 13 Nov 2016

ho perso la sintonia .... provo con delle immagini e poi il codice

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

eseguendo html, ottengo

il campo di input che mi attiva "include"

cliccandolo, ottengo

ovvero viene incluso il codice

cliccando "date of Birth" ottengo

ovvero si apre il datepicker

scelgo la data

la invio al server (4b.php)

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 · 14 Nov 2016

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?

criric · 14 Nov 2016

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

Kelly · 14 Nov 2016

Ciao Criric.......non ti convince però funziona......lo adotto....grazie infinite a tutti....

criric · 14 Nov 2016

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

Cerca

Cerca

[Javascript] datepicker

Kelly

Utente Attivo

marino51

Utente Attivo

Allegati

Kelly

Utente Attivo

marino51

Utente Attivo

marino51

Utente Attivo

Kelly

Utente Attivo

Kelly

Utente Attivo

VAik

Utente Attivo

marino51

Utente Attivo

Kelly

Utente Attivo

criric

Super Moderatore

Kelly

Utente Attivo

criric

Super Moderatore

Discussioni simili