CSS Class als onClick Event setzen, unmöglich? | jQuery Datepicker

dreamcatcher · 05.01.2012, 12:12

Guten Morgen,

ich benötige einen Kalender, bei welchem ich mehrere Daten auswählen kann.

Ich habe alles gut zusammengeschustert, eins fehlt jedoch noch.

Die CSS Klasse wird nur bei dem schließen und öffnen des Kalenders für die ausgewählten Tage gesetzt, sie soll jedoch schon beim "onClick" Event gesetzt werden.

An sich eine einfache Sache... dachte ich.

Code bisher:

PHP-Code:

              // Maintain array of dates

            var dates = new Array();

            function addDate(date) {if ($.inArray(date, dates) < 0) dates.push(date);}

            function removeDate(index) {dates.splice(index, 1);}

 
            // Adds a date if we don't have it yet, else remove it

            function addOrRemoveDate(date)

            {

              var index = $.inArray(date, dates); 

              if (index >= 0)

                removeDate(index);

              else 

                addDate(date);

            }

 
            $("#datepicker").datepicker({

                                    onSelect: function(dateText, inst){

                                        addOrRemoveDate(dateText);

                                        //$("#datepicker").datepicker( "refresh" ); not working

                                    },

                                    //wird vor dem Aufbau des Kalenders aufgerufen

                                    beforeShowDay: function(date){

                                        var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);

                                        if (gotDate >= 0) {

                                            return [false,"ui-state-highlight", "Selected"];

                                        }

                                        return [true, ""];

                                    }

            });

beforeShowDay setzt mir die Daten richtig zusammen, so dass diese ausgewählt erscheinen nach dem öffnen des Kalenders.

Nun soll nach "addOrRemoveDate" der Kalender offen bleiben und der ausgewählte Tag makiert sein.

Ansatz 1:
Da als Parameter nur zwei Dinge übergeben werden (dateText, inst) und DateText nur das Datum als String ist, habe ich mir inst als Objekt ausgeben lassen (Siehe Screenshot im Anhang).

Dort kann ich jedoch ebenfalls keine "Class" o.Ä. finden.
Unter "Settings" sind nur die custom Methoden die definiert worden im Objekt.
Im Rest sind ebenfalls nur Methoden.

Ansatz 2:
Wie sind auch habe ich versucht, über die aktuelle Objektreferenz this. an ein Element zu kommen um darüber die Klasse zu ergattern.

Im "onSelect:" Event habe ich folgendes hineingeschrieben:

PHP-Code:

  alert(this.className);

Als Output bekam ich Output_className.png (siehe Screenshot).

Dieser Text aka Klassennamen gehört zum Input Element, welches den Kalender bei einem "onClick" Event öffnet.

Ansatz 3:
Ich habe im Quelltext direkt vom jQuery gestöbert um um mögliche Variablen o.Ä. zu finden.
Ich fand:
inst.currentDay

Dies gibt mir den aktuell angeklickten Tag als Zahl zurück.
Leider kann ich dadurch nur über einem Umweg per DOM Suche auf das entsprechende Element (via .find())

Die Frage ist nun:
Wie ändert man die Klasse von einem ausgewählten Datum?

Wenn eine Demo o.Ä. zur Hilfe benötigt wird, schreibt es in die Kommentare.

Dank gebührt den Antwortenden !

rudygotya · 05.01.2012, 12:49

Gibts nur diesen einen Datepicker oder hast du mehrere auf der Seite? Brauchst du das markierte Datum aus Datepicker1 auch in Datepicker2?
Wenn ich mich recht erinner, ist Datepicker ein Singleton.

Zitat:

Die CSS Klasse wird nur bei dem schließen und öffnen des Kalenders für die ausgewählten Tage gesetzt, sie soll jedoch schon beim "onClick" Event gesetzt werden.

Um was genau zu erreichen? Von welchem Onclick-Event redest du genau?

dreamcatcher · 05.01.2012, 13:05

@rudygotya
Jap es ist ein Singleton und es ist der einzige Datepicker auf der Seite.
Es soll erreicht werden, dass jemand mehrere Daten beim Kalender auswählen kann und diese dann in einem ModalDialog abschickt.

Der Sinn und Zwecks ist, dass bestimmte "Regeln" auf bestimmte Wochentage angewandt werden.
Diese Wochentage müssen natürlich selektiert werden.

Gemeint ist also einfach, dass eine CSS Klasse hinzugefügt werden soll bei dem ausgewähltem Element, ohne dass sich der Kalender schließt und ohne dass diese Auswahl verschwindet wenn ein neues Datum ausgewählt wird.
____

Ich habe nun ein Workaround, etwas unschön da er den Datepicker wirklich richtig "neuzeichnet" und er dadurch für einige Sekunden verschwindet um dann wieder zu erscheinen.

Falls jemand eine "richtige" Lösung hat bin ich dankbar!

Workaround (Updated 13:32 Uhr):

PHP-Code:

              // Maintain array of dates
            var dates = new Array();
            function addDate(date) {if ($.inArray(date, dates) < 0) dates.push(date);}
            function removeDate(index) {dates.splice(index, 1);}

            // Adds a date if we don't have it yet, else remove it
            function addOrRemoveDate(date)
            {
              var index = $.inArray(date, dates); 
              if (index >= 0)
                removeDate(index);
              else 
                addDate(date);
            }
            function refreshDatePicker(){
                $("#datepicker").datepicker( "hide" );
                $("#datepicker").datepicker( "show" );
            };
            
            $("#datepicker").datepicker({
                                    onSelect: function(dateText, inst){
                                        addOrRemoveDate(dateText);
                                        refreshDatePicker();
                                        inst.show();
                                        
                                    },
                                    beforeShowDay: function(date){
                                        var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);
                                        if (gotDate >= 0) {
                                            return [false,"ui-state-highlight", "Selected"];
                                        }
                                        return [true, ""];
                                    }
            });

wolf29 · 05.01.2012, 13:09

Hm...wenn ich Dich richtig verstehe dürfte JQuery's Datepicker mit Date Range das richtige für Dich sein:

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

mfg Wolf29

dreamcatcher · 05.01.2012, 13:18

Leider nicht, dass sind DateRanges (Zeitraum zwischen zwei Tagen wird ausgewählt).

Ich benötige aber die Auswahl von mehreren Einzeltagen per Klick.
(Siehe Screenshot 1, bei dem 3 Einzeltage ausgewählt sind)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery Datepicker und php Variablen	Marvin75	JavaScript, Ajax und mehr	8	06.10.2011 23:42
Ist es sinnvoll, Objekte zu zerstören & aufzubauen ? (Beispiel jQuery UI Datepicker)	dreamcatcher	JavaScript, Ajax und mehr	2	03.09.2011 10:38
[Erledigt] radio checked by class JQUERY	clemo	JavaScript, Ajax und mehr	1	30.06.2011 19:55
Problem mit jQuery add/remove Class	kidding	JavaScript, Ajax und mehr	2	04.05.2011 19:12
jQuery Datepicker interaktion mit php-skript	WINFO2105	JavaScript, Ajax und mehr	6	01.03.2011 18:18
İnstallation von Propel unter Windows und Ohne PEAR	sysr	PHP Einsteiger	4	07.02.2011 10:56
[Erledigt] SQL UPDATE bei onclick Event!	Livastyle	JavaScript, Ajax und mehr	9	14.01.2010 22:28
Datenbankinhalt per Onclick event ändern	Extremefall	PHP Tipps 2009	8	01.01.2010 02:03
[Erledigt] jquery datepicker streikt bei 2. clone	rudygotya	JavaScript, Ajax und mehr	0	29.09.2009 20:48
[Erledigt] Im <option> ein onClick Event für Vorauswahl	Felix	JavaScript, Ajax und mehr	2	08.09.2009 14:53
[Erledigt] OnClick event abbrechen	Frank	JavaScript, Ajax und mehr	4	25.08.2009 12:15
jQuery: Parameter an onclick Event	ecomeback	HTML, Usability und Barrierefreiheit	1	08.04.2008 11:23
JS - node, onClick Event hinzufügen, MSIE	Zergling-new	HTML, Usability und Barrierefreiheit	3	21.07.2006 19:46

05.01.2012, 12:12
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	CSS Class als onClick Event setzen, unmöglich? \| jQuery Datepicker Guten Morgen, ich benötige einen Kalender, bei welchem ich mehrere Daten auswählen kann. Ich habe alles gut zusammengeschustert, eins fehlt jedoch noch. Die CSS Klasse wird nur bei dem schließen und öffnen des Kalenders für die ausgewählten Tage gesetzt, sie soll jedoch schon beim "onClick" Event gesetzt werden. An sich eine einfache Sache... dachte ich. Code bisher: PHP-Code: // Maintain array of dates var dates = new Array(); function addDate(date) {if ($.inArray(date, dates) < 0) dates.push(date);} function removeDate(index) {dates.splice(index, 1);} // Adds a date if we don't have it yet, else remove it function addOrRemoveDate(date) { var index = $.inArray(date, dates); if (index >= 0) removeDate(index); else addDate(date); } $("#datepicker").datepicker({ onSelect: function(dateText, inst){ addOrRemoveDate(dateText); //$("#datepicker").datepicker( "refresh" ); not working }, //wird vor dem Aufbau des Kalenders aufgerufen beforeShowDay: function(date){ var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates); if (gotDate >= 0) { return [false,"ui-state-highlight", "Selected"]; } return [true, ""]; } }); beforeShowDay setzt mir die Daten richtig zusammen, so dass diese ausgewählt erscheinen nach dem öffnen des Kalenders. Nun soll nach "addOrRemoveDate" der Kalender offen bleiben und der ausgewählte Tag makiert sein. Ansatz 1: Da als Parameter nur zwei Dinge übergeben werden (dateText, inst) und DateText nur das Datum als String ist, habe ich mir inst als Objekt ausgeben lassen (Siehe Screenshot im Anhang). Dort kann ich jedoch ebenfalls keine "Class" o.Ä. finden. Unter "Settings" sind nur die custom Methoden die definiert worden im Objekt. Im Rest sind ebenfalls nur Methoden. Ansatz 2: Wie sind auch habe ich versucht, über die aktuelle Objektreferenz this. an ein Element zu kommen um darüber die Klasse zu ergattern. Im "onSelect:" Event habe ich folgendes hineingeschrieben: PHP-Code: `alert(this.className);` Als Output bekam ich Output_className.png (siehe Screenshot). Dieser Text aka Klassennamen gehört zum Input Element, welches den Kalender bei einem "onClick" Event öffnet. Ansatz 3: Ich habe im Quelltext direkt vom jQuery gestöbert um um mögliche Variablen o.Ä. zu finden. Ich fand: inst.currentDay Dies gibt mir den aktuell angeklickten Tag als Zahl zurück. Leider kann ich dadurch nur über einem Umweg per DOM Suche auf das entsprechende Element (via .find()) Die Frage ist nun: Wie ändert man die Klasse von einem ausgewählten Datum? Wenn eine Demo o.Ä. zur Hilfe benötigt wird, schreibt es in die Kommentare. Dank gebührt den Antwortenden ! Miniaturansicht angehängter Grafiken


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

05.01.2012, 13:05
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	@rudygotya Jap es ist ein Singleton und es ist der einzige Datepicker auf der Seite. Es soll erreicht werden, dass jemand mehrere Daten beim Kalender auswählen kann und diese dann in einem ModalDialog abschickt. Der Sinn und Zwecks ist, dass bestimmte "Regeln" auf bestimmte Wochentage angewandt werden. Diese Wochentage müssen natürlich selektiert werden. Gemeint ist also einfach, dass eine CSS Klasse hinzugefügt werden soll bei dem ausgewähltem Element, ohne dass sich der Kalender schließt und ohne dass diese Auswahl verschwindet wenn ein neues Datum ausgewählt wird. ____ Ich habe nun ein Workaround, etwas unschön da er den Datepicker wirklich richtig "neuzeichnet" und er dadurch für einige Sekunden verschwindet um dann wieder zu erscheinen. Falls jemand eine "richtige" Lösung hat bin ich dankbar! Workaround (Updated 13:32 Uhr): PHP-Code: // Maintain array of dates var dates = new Array(); function addDate(date) {if ($.inArray(date, dates) < 0) dates.push(date);} function removeDate(index) {dates.splice(index, 1);} // Adds a date if we don't have it yet, else remove it function addOrRemoveDate(date) { var index = $.inArray(date, dates); if (index >= 0) removeDate(index); else addDate(date); } function refreshDatePicker(){ $("#datepicker").datepicker( "hide" ); $("#datepicker").datepicker( "show" ); }; $("#datepicker").datepicker({ onSelect: function(dateText, inst){ addOrRemoveDate(dateText); refreshDatePicker(); inst.show(); }, beforeShowDay: function(date){ var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates); if (gotDate >= 0) { return [false,"ui-state-highlight", "Selected"]; } return [true, ""]; } }); Geändert von dreamcatcher (05.01.2012 um 13:23 Uhr).

05.01.2012, 13:09
wolf29 Erfahrener Benutzer Registriert seit: 17.03.2010 Beiträge: 1.833 PHP-Kenntnisse: Fortgeschritten	Hm...wenn ich Dich richtig verstehe dürfte JQuery's Datepicker mit Date Range das richtige für Dich sein: http://jqueryui.com/demos/datepicker/#date-range mfg Wolf29 __________________ while (!asleep()) sheep++; Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

05.01.2012, 13:18
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Leider nicht, dass sind DateRanges (Zeitraum zwischen zwei Tagen wird ausgewählt). Ich benötige aber die Auswahl von mehreren Einzeltagen per Klick. (Siehe Screenshot 1, bei dem 3 Einzeltage ausgewählt sind)