Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Jak wstawić kalendarz z opcją wyboru daty?
Forum PHP.pl > Forum > PHP
switch301
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!
tehaha
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
switch301
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!
vokiel
Dołączyłeś wymagane biblioteki jQuery?
shpaque
  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>
tehaha
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>
switch301
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!
luckyps
Datepicker - formatDate
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.