☰

» »

[jquery mobile] datepicker

[jquery mobile] datepicker

sebavet ::

Zdravo. Za splet programiram jquery mobile spletno aplikacijo. Ker je stvar še v fazi prototipa, bi rad, da se ista koda uporabi za desktop in mobilne naprave. Težavo imam pri vnašanju datumov. Datepicker se prikaže le v google chromu, v ff in ie pa ne. Zanima me ali kdo v svojih spletnih aplikacijah uporablja kako komponento datepickerja v kombinaciji z jquery mobile, ki deluje tudi v ff in ie? Native komponenta ne pride v poštev, ker je ne prikazuje v desktop browserjih.

sebavet ::

našel sem primerno rešitev. Prosim za pomoč, kako naj moja html datoteka zgleda, da dobim rezultat kot tu:
http://jsfiddle.net/Gajotres/sSqKz/

ne znam vključit spodnjega java scripta.

Zgodovina sprememb…

  • spremenil: sebavet ()

FrEaKmAn :: 

<script>
    $(document).on('pageinit', '#index', function(){       
        $( "#datepicker" ).datepicker();
    });
</script>


to govorimo o navadni spletni strani ali nek phonegap?

sebavet ::

ne, navadna spletna stran. Ampak a moram to funkcijo kako poklicat? mi lahko prosim objaviš cele htmo datoteko?
jaz sem poskusil tako:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
	
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>        
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>          
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
        
        <script>
            $(document).on('pageinit', '#index', function(){       
        $( "#datepicker" ).datepicker();
    });
        </script>   
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>
            
            <div data-role="content">
                <p>Date: <input type="text" id="datepicker" /></p>                
            </div>
            
            <div data-theme="a" data-role="footer" data-position="fixed">
                
            </div>
        </div>   
    </body>
</html>


pa še vedno čaka oz. nalaga. Pa ne vem kaj...

AndrejS ::

Skripte se ti tepejo... 2x maš jquery.mobile-*****.js

Kocka ::

Ja, ravno to je problem. Samo odstrani vrstico 9, pa bo delalo. lahko še vrstico 7, ki je tudi podvojeno.

Tole sem probal in dela:
<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
         
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    	
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>          
        <script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>        
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
         
        <script>
            $(document).on('pageinit', '#index', function(){       
        		$( "#datepicker" ).datepicker();
    		});
        </script>   
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="a" data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>            
            <div data-role="content">
                <p>Date: <input type="text" id="datepicker" /></p>                
            </div>            
            <div data-theme="a" data-role="footer" data-position="fixed">                
            </div>
        </div>   
    </body>
</html>

sebavet ::

Hvala, sem spregledal. Še ena stvar: zapis datuma je mm/dd/YYYY, kako naj to spremenim v format dd/mm/YYYY?

Kocka ::

Za konfiguracijo si poglej dokumentacijo od jQuery UI knjižnice. Tule bo za dateFormat:

http://api.jqueryui.com/datepicker/#opt...

Za tvoj primer v inicializacijo dodaš objekt {dateFormat: "dd.mm.yy"}:

        <script>
            $(document).on('pageinit', '#index', function(){       
                $( "#datepicker" ).datepicker({dateFormat: "dd.mm.yy"});
            });
        </script>


lahko daš namesto pik slash (/) ali poljubna ločila.

Zgodovina sprememb…

  • spremenil: Kocka ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

sql, php date between periodično/letno

Oddelek: Programiranje		251419 (845) mr_chai
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje		81913 (1768) kogledom
»

Wordpress multiple authors

Oddelek: Izdelava spletišč		8835 (748) poweroff
»

[SQL in PHP] Preprost PHP koledarček, ki je povezan z MySQL bazo

Oddelek: Programiranje		91921 (1683) R33D3M33R
»

[java] datumi

Oddelek: Programiranje		151774 (1647) l0g1t3ch

Več podobnih tem