Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Jak wstawić kalendarz z opcją wyboru daty?
switch301
post 18.08.2011, 15:39:02
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 18.08.2011

Ostrzeżenie: (0%)
-----


Witam, czy może mi ktoś podać przykład kodu który wstawia ramkę tekstową a obok gotowy kalendarz z którego można wybrać kliknięciem datę która automatycznie uzupełni ową ramkę? wiem że takich rzeczy jest dużo na google, ale jestem świeży w php i nie bardzo potrafię to zaimplementować do swojego projektu. W skrócie moja ramka wygląda tak:

  1. Due date: <input type="text" name="duedate" value="yyyy.mm.dd" onfocus="this.value = (this.value == this.defaultValue ) ? '' : this.value;return true;">

co zrobić by gdzieś obok niej widniał mały kalendarzyk z którego zamiast wpisać z ręki można ową datę wybrać kliknięciem a ona wskoczy w odpowiednim formacie?

Z góry bardzo dziękuję, pozdrawiam!
Go to the top of the page
+Quote Post
tehaha
post 18.08.2011, 15:40:32
Post #2





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----


http://jqueryui.com/demos/datepicker/

ps. tego nie implementujesz w php tylko w html wstawiasz gotowy kod jquery, nie ma tu żadnej wielkiej filozofii więc nie zasłaniaj się tym, że jesteś początkujący bo to jest po prostu gotowe rozwiązanie, wstawia się jedną linijkę kodu

Ten post edytował tehaha 18.08.2011, 15:41:26
Go to the top of the page
+Quote Post
switch301
post 19.08.2011, 08:45:16
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 18.08.2011

Ostrzeżenie: (0%)
-----


nie zasłaniam się, po prostu nigdy nie miałem z tym doczynienia i naprawdę nie wiem jak to zrobić. dziękuję za przesłanie linka, ale mimo wszystko nie wiem jak sobie poradzić. Piszesz "jedną linijkę", więc pytam, którą? Próbowałem wstawić to co jest w source:

  1. <meta charset="utf-8">
  2. <script>
  3. $(function() {
  4. $( "#datepicker" ).datepicker();
  5. });
  6. </script>
  7. <div class="demo">
  8. <p>Date: <input type="text" id="datepicker"></p>
  9. </div><!-- End demo -->
  10. <div class="demo-description">
  11. <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
  12. </div><!-- End demo-description -->


ale to niczego nie zmienia, pojawia mi się jedynie ramka do wpisania daty, która dalej nie umożliwia wyświetlenia kalendarza. Jeżeli ktoś mógłby mi to dokładniej zarysować, byłbym bardzo wdzięczny, i przepraszam wszystkich którzy czują się urażeni moją ignorancją i niewiedzą w temacie. Pozdrawiam!
Go to the top of the page
+Quote Post
vokiel
post 19.08.2011, 08:59:21
Post #4





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


Dołączyłeś wymagane biblioteki jQuery?


--------------------
Go to the top of the page
+Quote Post
shpaque
post 19.08.2011, 10:28:38
Post #5





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


  1. <link rel="stylesheet" href="./cupertino/jquery.ui.all.css" type="text/css"> //lub inną szatę graficzną - ale wszystko do pobrania z jQuery
  2. <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
  3. <script type="text/javascript" src="./jquery.ui.core.min.js"></script>
  4. <script type="text/javascript" src="./jquery.ui.widget.min.js"></script>
  5. <script type="text/javascript" src="./jquery.ui.datepicker.min.js"></script>
  6. <style type="text/css">
  7. .ui-datepicker
  8. {
  9. font-family: Arial;
  10. font-size: 13px;
  11. z-index: 1003 !important;
  12. }
  13. </style>
  14. <script type="text/javascript">
  15. $(document).ready(function()
  16. {
  17. var indexjQueryDatePicker1Opts =
  18. {
  19. dateFormat: 'mm/dd/yy',
  20. changeMonth: false,
  21. changeYear: false,
  22. showButtonPanel: false,
  23. showAnim: 'show'
  24. };
  25. $("#indexjQueryDatePicker1").datepicker(indexjQueryDatePicker1Opts);
  26. });
  27. </script>
  28. </head>
  29. <body>
  30. <input type="text" id="indexjQueryDatePicker1" style="position:absolute;left:92px;top:79px;width:98px;height:18px;border:1px #C0C0C0 solid;font-family:Arial;font-size:13px;z-index:0" name="indexjQueryDatePicker1" value="">
  31. </body>
Go to the top of the page
+Quote Post
tehaha
post 19.08.2011, 10:50:32
Post #6





Grupa: Zarejestrowani
Postów: 1 748
Pomógł: 388
Dołączył: 21.08.2009
Skąd: Gdynia

Ostrzeżenie: (0%)
-----


generalnie jak czegoś nie umiesz to najbezpieczniej jest najpierw pobrać sobie sam przykładowy skrypt ze strony, który jest na pewno poprawny, oraz pobrać niezbędne biblioteki, odpalasz sobie to na kompie i jak już sam przykład działa to wtedy dopiero próbujesz go przerabiać do swoich potrzeb i na końcu montujesz do swojego skryptu.

Tutaj masz sam wyizolowany przykład: http://jqueryui.com/demos/datepicker/default.html, skopiuj sobie jego kod źródłowy,

potrzebujesz też to:
http://jqueryui.com/download
http://docs.jquery.com/Downloading_jQuery

wrzucasz to wszystko do tego folderu gdzie masz plik html z przykładem. i załączasz:

  1. <link rel="stylesheet" href="jquery-ui-1.7.3/css/ui-lightness/jquery-ui-1.7.3.custom.css" type="text/css" media="all" />
  2. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
  3. <script type="text/javascript" src="jquery-ui-1.7.3/development-bundle/ui/jquery-ui-1.7.3.custom.js"></script>
Go to the top of the page
+Quote Post
switch301
post 19.08.2011, 15:11:46
Post #7





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 18.08.2011

Ostrzeżenie: (0%)
-----


super, dziękuję Wam bardzo, z tak łopatologicznym wytłumaczeniem musiałem sobie już poradzić, i faktycznie udało się smile.gif Gdybyście jeszcze tylko mogli mi powiedzieć jak zmienić format daty tak by z dd/mm/yyyy zrobić yyyy.mm.dd to byłaby rewelacja smile.gif jeszcze raz dziękuję, pozdrawiam!
Go to the top of the page
+Quote Post
luckyps
post 19.08.2011, 15:16:30
Post #8





Grupa: Zarejestrowani
Postów: 153
Pomógł: 41
Dołączył: 28.06.2011
Skąd: Częstochowa

Ostrzeżenie: (0%)
-----


Datepicker - formatDate
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 1.05.2025 - 05:59