Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Kalendarz w javascript i zakres dat
Forum PHP.pl > Forum > Przedszkole
fiasko
Potrzebuje taki kalendarz.

Chcę z bazy wyciągnąć datę minimalną do której kalendarz może przejść i ją pokazać oraz datę maksymalną którą kalendarz może pokazać.
To jest zakres po którym można się poruszać w kalendarzu.

Po za tym chcę żeby użytkownik mógł sobie wybrać zakres dat maksymalnie w przedziale 3 miesięcy. Zna ktoś jakiś kalendarz w javascript, który idzie szybko przystosować ?

Mam już kilka , ale żadnej nie obsługuje zakresu.
W jednym projekcie mogę co najwyżej lata ustawić w przedziały.

http://www.dynarch.com/projects/calendar/

Jak ktoś zna ten kalendarz i wie jak ustawić w nim przedziały dla miesięcy i dni to też proszę o info.
melkorm
A może DatePicker

Z tego co pamiętam posiada wszystkie opcje które chcesz.
fiasko
No dobra powiedzmy, że to co podałeś mniej więcej mi odpowiada.

Teraz mam pytanko jak to stosować ? Bo dopiero zabieram się za naukę tego frameworka - wcześniej pracowałem w ajax.
Proszę o podanie przykładu jak dodać opcję , która wyłączy mi np wszystkie dni od 2011-01-03 w dół.


Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    

        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js">
        </script>

        
        
<script type="text/javascript">
            $(function(){
            
                      $('#datepicker').datepicker({
                        inline: true
                        
                    });
                
                });
        </script>
</head>
<body>

<h2 class="demoHeaders">Datepicker</h2>
        <div id="datepicker"></div>
    
</body>
</html>




fiasko
Wartość minimalną i maksymalną ustaliłem.

Kod
$('#datepicker').datepicker( "option", "minDate", new Date(2010, 0, 10) );
                });



Kod
$('#datepicker').datepicker( "option", "maxDate", new Date(2011, 0, 23) );
                });



Załóżmy, że użytkownik zaznaczył datę 2010, 2, 17.

A jak ustalić teraz 3 miesiące od tego okresu aby użytkownik mógł wybrać przedział?

Chcę żeby użytkownik mógł zobaczyć dane w okresie 3 miesięcy od wybranej przez niego daty w zakresie dat , które są powyżej.

tu wylukałem przykład, ze to mozliwe:

http://jqueryui.com/demos/datepicker/#date-range

Ale nie znalazłem przykładu jak to zastosować .


Tu macie kod :
Aż tak jquery nie znam , żeby wiedzieć o co tu biega. Jakby ktoś mógł mi wytłumaczyć co się tu dzieje to będę wdzięczny.

Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta>

<link type="text/css" href="css/smoothness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    

        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js">
        </script>

     <script>
    $(function() {
        var dates = $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
            }
        });
    });
    </script>
</head>
<body>





    





<input type="text" id="from" name="from"/>

to

<input type="text" id="to" name="to"/>





</form>
</body>
</html>


HM:

WALCZĘ MIMO BRAKU POMOCY


OTO CO UDAŁO MI SIĘ WYDZIUKAĆ - PRAWIE GOTOWE - ALE DALEJ SĄ PROBLEMY

1. Jak wprowadzić zakres dodatkowy 3 miesięcy po tym jak użytkownik wybierze już datę.?W poniższym skrypcie jesteśmy ograniczeni w przedziale jednego roku. Zakładam, że tyle będzie danych w bazie np. o transakcjach sprzedaży. Tak więc w bazie mamy dane z jednego roku. Ze względu na to ,że nie da się pokazać wszystkich danych z całego roku na raz użytkownik musi wybrać zakres 3 miesięcy do pokazania w kalendarzu. Z tym właśnie mam problem. Coś mi się tu gryzie.





Kod
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta>

<link type="text/css" href="css/smoothness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />    

        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js">
      </script>
        
      <script type="text/javascript">    
    $(function() {



var dates = $("#from, #to").datepicker({showOn: 'button', buttonImage: '/seo_poz/function/kalendarz/calendar.gif', buttonImageOnly: true, changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate )

                {
                var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" );
                    
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        selectedDate, instance.settings );
                        
                dates.not( this ).datepicker( "option", option, date )
            }
            
        }).datepicker( "option", "minDate", new Date(2011, 0, 1)).datepicker( "option", "maxDate", new Date(2011, 12, 0));



});

/*

testowo było jeszcze tak :
dates.not( this ).datepicker( "option", option, date ).datepicker( "option", "minDate", '+3m');

ale coś się gryzie

*/
    </script>
</head>
<body>


<input type="text" id="from" name="from"/>

to

<input type="text" id="to" name="to"/>





</form>
</body>
</html>
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.