Forum PHP.pl > jquery, datepicker - dwa pola wyboru daty datepickere

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jquery, datepicker - dwa pola wyboru daty datepickere

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

esos

13.11.2013, 08:43:26

Zamierzam wykorzystać jquery/datepicker w jednym z formularzy.
Podczas zapoznawania się z datepickerem natrafiłem na problem którego nie potrafię przeskoczyć:

Skrypt działa poprawnie, gdy występuje tylko jedno pole z datą, które ma korzystać z datepickera. Gdy pojawi się kolejne - nie uruchamia ono skryptu (klikam w nie - nie pojawia się kalendarzyk).

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST DATAPICKER</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
 
<script>
$(function() {
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
$('#datepicker').datepicker('option', { firstDay: 1 }); 
$('#datepicker').datepicker('option', { yearRange: '2009:2020' });
$('#datepicker').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota']});
$('#datepicker').datepicker('option', { monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']});
$('#datepicker').datepicker('option', { monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze','Lip','Sie','Wrz','Pa','Lis','Gru'] });
$('#datepicker').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'] });
$('#datepicker').datepicker('option', { dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'] });
$('#datepicker').datepicker('option', { dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'] });
$('#datepicker').datepicker('option', { closeText: 'Zamknij' });
$('#datepicker').datepicker('option', { currentText: 'Dziś' });
$('#datepicker').datepicker('option', { prevText: '&#x3c;Poprzedni' });
$('#datepicker').datepicker('option', { nextText: 'Następny&#x3e;' });
});
</script>
 
 
 
 </head>
<body>
<p>data1: <input type="text" id="datepicker" size="30" name='data1'/></p>
<p>data2: <input type="text" id="datepicker" size="30" name='data2'/></p>
</body>
</html>
[HTML] pobierz, plaintext

Jak rozwiązać ten problem?

nospor

13.11.2013, 08:45:02

Problem nie ma zadnego zwiazku z AJAX.... przenosze.

ID to ID ma byc UNIKALNE. Czemu to zawsze jest dla was niezrozumiale?

esos

13.11.2013, 08:49:47

Załapałem gdzie był błąd dosłownie 20 sekund po opublikowaniu posta...

Działający kod:

[HTML] pobierz, plaintext 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST DATAPICKER</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
 
 
<script>
$(function() {
$("#datepicker1").datepicker({dateFormat: 'yy-mm-dd'});
$('#datepicker1').datepicker('option', { firstDay: 1 }); 
$('#datepicker1').datepicker('option', { yearRange: '2009:2020' });
$('#datepicker1').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota']});
$('#datepicker1').datepicker('option', { monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']});
$('#datepicker1').datepicker('option', { monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze','Lip','Sie','Wrz','Pa','Lis','Gru'] });
$('#datepicker1').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'] });
$('#datepicker1').datepicker('option', { dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'] });
$('#datepicker1').datepicker('option', { dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'] });
$('#datepicker1').datepicker('option', { closeText: 'Zamknij' });
$('#datepicker1').datepicker('option', { currentText: 'Dziś' });
$('#datepicker1').datepicker('option', { prevText: '&#x3c;Poprzedni' });
$('#datepicker1').datepicker('option', { nextText: 'Następny&#x3e;' });
});
 
 
$(function() {
$("#datepicker2").datepicker({dateFormat: 'yy-mm-dd'});
$('#datepicker2').datepicker('option', { firstDay: 1 }); 
$('#datepicker2').datepicker('option', { yearRange: '2009:2020' });
$('#datepicker2').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota']});
$('#datepicker2').datepicker('option', { monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec', 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień']});
$('#datepicker2').datepicker('option', { monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze','Lip','Sie','Wrz','Pa','Lis','Gru'] });
$('#datepicker2').datepicker('option', { dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'] });
$('#datepicker2').datepicker('option', { dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'] });
$('#datepicker2').datepicker('option', { dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'] });
$('#datepicker2').datepicker('option', { closeText: 'Zamknij' });
$('#datepicker2').datepicker('option', { currentText: 'Dziś' });
$('#datepicker2').datepicker('option', { prevText: '&#x3c;Poprzedni' });
$('#datepicker2').datepicker('option', { nextText: 'Następny&#x3e;' });
});
</script>
 
 </head>
<body>
<p>data1: <input type="text" id="datepicker1" size="30" name='data1'/></p>
<p>data2: <input type="text" id="datepicker2" size="30" name='data2'/></p>
</body>
</html>
 
 
[HTML] pobierz, plaintext

nospor

13.11.2013, 08:57:09

Jakbys uzyl klasy, ktora moze byc taka sama dla kazdego elementu, to kod bys mial 2x krotszy

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.