neues DateTimePicker Widget

[Matscher]

Hallo Zusammen,

da ich für meine Heizungsteuerung (speziell Urlaub) gern eine konkrete Datums- und Zeitauswahl haben wollte, habe ich ein widget "Datetimepicker" an FHEM adaptiert. Der picker kommt von http://xdsoft.net/jqplugins/datetimepicker/ und steht unter der MIT-Lizenz. Das bedeutet in kurzform, das diese uneingeschränkt benutzt werden kann. Ideal für FHEM.

Das ganze ist einfach zu "installieren". Den Inhalt aus dem angehangenen Zip-Archive in den "www\pgm2\" von FHEM kopieren. Reload auf 01_FHEMWEB.pm und schon kann es verwendet werden. Das widget hat zwei verschiedene themes -> default und dark und kann zusätzlich über das eigens mitgebrachte stylesheet angepasst werden.

Der Name ist "datetime" und die Parameter werden als eine Komma separierte Liste von Key:Value Paaren spezifiziert, das gleiche wie beim knob widget. (theme:default,format:d.m.Y,lang:en, ... ) Eine komplette Liste ist unter der oben angebenen URL zu finden.

Simple Beispiele:

Code Auswählen Erweitern


define dateTimePickerInline dummy
attr dateTimePickerInline setList state:datetime,inline:true
attr dateTimePickerInline webCmd state


Code Auswählen Erweitern


define dateTimePickerPopUp dummy
attr dateTimePickerPopUp setList state:datetime
attr dateTimePickerPopUp webCmd state


Code Auswählen Erweitern


define dateTimePickerOnlyTime dummy
attr dateTimePickerOnlyTime setList state:datetime,datepicker:false
attr dateTimePickerOnlyTime webCmd state


Code Auswählen Erweitern


define dateTimePickerOnlyDate dummy
attr dateTimePickerOnlyDate setList state:datetime,timepicker:false
attr dateTimePickerOnlyDate webCmd state


Vorläufige default Einstellungen:

      lang:"de",
      i18n:{
        de:{
          months:[
          "Januar","Februar","März","April",
          "Mai","Juni","Juli","August",
          "September","Oktober","November","Dezember",
          ],
         dayOfWeek:[
          "So.", "Mo", "Di", "Mi",
          "Do", "Fr", "Sa.",
         ]
        }
      },
       theme:"dark",
       format:"d.m.Y H:i"

Update 15.12.2016:
BugFix: Die Eingabe der Paramter, wie defaultTime:"21:00", sind nun möglich. Alles ohne Anführungszeichen.
Nachtrag:  lässt sich mit widgetOverride in den webCmd jedes beliebigen device verwenden

Beispiel:

Code Auswählen Erweitern


attr kaldender widgetOverride state:datetime,step:10,theme:default,inline:true,defaultTime:20:00,defaultDate:2016/12/03,format:d.m.Y_H:i


Update 03.05.2017:
Input Feld per css parametrierbar: testKalender durch eigenen DeviceNamen ersetzen.
Beispiel:

Code Auswählen Erweitern

.datetimepicker-testKalender { width:150px; text-align:center;}

Update unter SVN verfügbar:
https://svn.fhem.de/fhem/trunk/fhem/contrib/Widgets/DateTimePicker/


Viele Grüße,
Steve

[Krissoff]

@Matcher:

funktioniert prima, darauf hab ich gewartet!

[Matscher]

Liegt jetzt im SVN unter contrib:

/Widgets/DateTimePicker/*

Gruß,
Steve

[KNUT345]

Hallo Matscher,
tolles Tool!

Funktioniert soweit problemlos, allerdings wenn ich Datum und Uhrzeit anders formatieren will klappt das nicht.
Wo liegt mein Denkfehler, wenn ich 2015-11-21 20:00 haben will?

Code Auswählen Erweitern

define dateTimePickerPopUp dummy
attr dateTimePickerPopUp alias Aktivität vom [Datum Zeit]
attr dateTimePickerPopUp group Aktivität
attr dateTimePickerPopUp room Fitness
attr dateTimePickerPopUp setList state:datetime,theme:default,step:10,format:Y-m-d H:i
attr dateTimePickerPopUp webCmd state

(http://forum.fhem.de/index.php?action=dlattach;topic=35736.0;attach=40822)

Noch lieber wäre mir der Eintrag wie im Logfile: 2015-11-21_20:00:00

Grüße Knut

[Hans Franz]

Hallo,

Ändere es in der fhemweb_datetime.js:

Code Auswählen Erweitern

format:"Y-m-d_H:i:00",

Gruß
Hans

[KNUT345]

Super, das passt.
Danke
Knut

[Matscher]

Hallo Zusammen,

stimmt das funktioniert nicht, da das format 2 mal den Doppelpunkt enthält und damit als weitere Eigenschaft durch FHEMWEB ausgewertet wird. Somit wird das Format nur unvollständig übernommen.

Wie ihr schon herausgefunden habt, vorerst direkt in der fhemweb_datetime.js anpassen.

Gruß,
Matscher

[Elektrolurch]

Hallo,

kann man das widget auch über Tastatur bedienen? Der "knob" geht zum Beispiel, der slider nicht.
Und dann ist auch noch die Frage, ob der Screenreader die Auswahl erkennt.

Zitat:
Liegt jetzt im SVN unter contrib:
 
/Widgets/DateTimePicker/*

Was muss ich da für den "update" Befehl eingeben?

Gruß

Elektrolurch

[Matscher]

Hallo

kann man das widget auch über Tastatur bedienen?

soeben probiert, funktioniert nicht. Müßte man sich anschauen, ob es da eine Möglichkeit gibt.

Und dann ist auch noch die Frage, ob der Screenreader die Auswahl erkennt.

Kommt auf einen Versuch an.

Liegt jetzt im SVN unter contrib:

Der contrib Ordner wird nicht per update verteilt. Einfach aus dem SVN kopieren. (http://sourceforge.net/p/fhem/code/HEAD/tree/trunk/fhem/contrib/Widgets/)

Gruß,
Matscher

[Elektrolurch]

Hallo Matscher,

danke für die Info. Ich werde mir das Teil mal herunter laden.
Besteht denn eine reelle Chance den Picker um eine Tasturbedienbarkeit zu ergänzen?

Elektrolurch

[Matscher]

Hallo Elektrolurch,

die Chancen stehen schlechte. Das Widget wird zwar weiterentwickelt, aber es gibt noch keine Möglichkeit es über die Tasten zusteuern.

Gruß,
Matscher

[Elektrolurch]

Ja. Habe es gestern mit date - time ausprobiert. Bei Time geht gar nichts, bei date bekomme ich zwar Auswahllisten, wenn ich mit den Pfeiltasten auf das Objekt navigiere, aber eine Auswahl ist nicht möglich.
Schade, dass so wenig auf Barrierefreiheit geachtet wird... (War jetzt nicht an Dich gerichtet, sondern allgemein...

Elektrolurch

[Kruemel]

Hallo, ich möchte auch diese Möglichkeit nutzen um Datum und Uhrzeit einzugeben.
Ich habe die Dateien runtergeladen und unter  /opt/fhem/www/pgm2 abgelegt.
Reload 01_FHEMWEB.pm gemacht. Auch noch mal neu gebootet.

Dann habe ich noch diese Zeilen in eine cfg getan.

define dateTimePickerInline dummy
attr dateTimePickerInline setList state:datetime,inline:true
attr dateTimePickerInline webCmd state
attr dateTimePickerInline group HeizungsProgramm

define dateTimePickerPopUp dummy
attr dateTimePickerPopUp setList state:datetime
attr dateTimePickerPopUp webCmd state
attr dateTimePickerPopUp group HeizungsProgramm

define dateTimePickerOnlyTime dummy
attr dateTimePickerOnlyTime setList state:datetime,datepicker:false
attr dateTimePickerOnlyTime webCmd state
attr dateTimePickerOnlyTime group HeizungsProgramm

define dateTimePickerOnlyDate dummy
attr dateTimePickerOnlyDate setList state:datetime,timepicker:false
attr dateTimePickerOnlyDate webCmd state
attr dateTimePickerOnlyDate group HeizungsProgramm

Ich bekomme jedoch keine widget angezeigt.

Kann mir jemand weiterhelfen, was da fehlt?

Vielen Dank !!!!

[Kruemel]

Hallo, ist schon wieder gut. Ich hatte gerade noch gesehen dass ich das falsche zip genommen habe. Mit dem Zip aus diesem Thread ist es ok.

[JoeALLb]

Der contrib Ordner wird nicht per update verteilt. Einfach aus dem SVN kopieren.

Oder im contrib-Verzeichnis

Code Auswählen Erweitern

svn checkout svn://svn.code.sf.net/p/fhem/code/trunk/fhem/contrib/ .
einmalig ausführen und danach, wenn updates benötigt werden,

Code Auswählen Erweitern

svn update wieder im Verzeichnis angeben.