Zeiteingabe wie auf dem smartphone

[OdfFhem]

Ich habe den Code ein wenig erweitert. Damit gilt:

• das Widget kann mit vielen Attributen konfiguriert werden. Einzig die colors- bzw. font-Attribute erfordern noch eine kleine Korrektur durch den Plug-In-Entwickler. "Verkonfiguriert" könnte das dann z.B. aussehen wie auf dem angehängten Screenshot.
• der eingestellte Wert wird übernommen
• "unschön": Abbruch (z.B. via ESC) führt zu einer leeren Anzeige; Reading bleibt aber zum Glück unverändert

Code Auswählen Erweitern


// Wrapper for the jquery timepicker widget.
FW_widgets['timepicker'] = { createFn:FW_timepickerCreate, };

function FW_timepickerCreate(elName, devName, vArr, currVal, set, params, cmd)
{
  if(!vArr.length || vArr[0] != "timepicker" || (params && params.length))
    return undefined;

  var conf = {};
  for(var i1=0; i1<vArr.length; i1++) {
    var kv = vArr[i1].split("=");
    if ((kv[0] == "initial") && (!currVal)) { currVal = kv[1]; }
    else if (kv[1]) { conf[kv[0]] = kv[1]; }
  }

  var newEl = $("<div style='display:inline-block'>").get(0);
  $(newEl).append('<input type="text" id="timepicker.'+devName+'-'+set +'" >');

  var inp = $(newEl).find("input");
  if (elName) $(inp).attr("name", elName);
  for(c in conf) $(inp).attr("data-"+c, conf[c]);

  loadScript("pgm2/jquery-clock-timepicker.min.js",
  function() {
    $(inp).clockTimePicker({
      onChange: function(newVal, oldVal) { if(cmd && !inp.block) cmd(newVal); }
    });
    newEl.setValueFn = function(arg){ inp.val(arg); inp.block=true; inp.trigger('change'); inp.block=false; };
    newEl.setValueFn(currVal);
  });

  return newEl;
}


Code Auswählen Erweitern


defmod TestTimePicker2 dummy
attr TestTimePicker2 readingList timeTest1 timeTest2 timeVon timeBis
attr TestTimePicker2 room Test
attr TestTimePicker2 setList timeTest1:timepicker timeTest2:timepicker,initial=12:00 timeVon:timepicker,minimum=06:00,maximum=09:00,precision=15 timeBis:timepicker,minimum=15:00,maximum=18:00,precision=15
attr TestTimePicker2 stateFormat { return '';; }
attr TestTimePicker2 webCmd timeTest1:timeTest2:timeVon:timeBis
attr TestTimePicker2 webCmdLabel Test: \
:Von :Bis ;
attr TestTimePicker2 widgetOverride setList:textField-long


[derHeimwerker]

So funktioniert es nun. Durch einen zusätzlichen Button-Click wird die Zeit jetzt ins reading/attr übernommen. Wahrscheinlich steht da noch viel zu viel im code. War nur ein try-and-error. Vielleicht kann ihn ja noch jemand optimieren.

Code Auswählen Erweitern


// Wrapper for the jquery timepicker widget.
FW_widgets['timepicker'] = { createFn:FW_timepickerCreate, };

function
FW_timepickerCreate(elName, devName, vArr, currVal, set, params, cmd)
{
var closed="Set";
var newEl = document.createElement('div');
$(newEl).append('<input type="text" size="5">');
$(newEl).append('<input type="button" value="'+closed+'">');

var inp = $(newEl).find("[type=text]");
var btn = $(newEl).find("[type=button]");
currVal = (currVal ? currVal : "12:00")
.replace(/[^\d]*(\d\d):(\d\d).*/g,"$1:$2");
$(inp).val(currVal)

if(elName)
$(inp).attr("name", elName);

var hh, mm;   

newEl.setValueFn = function(arg) {
  arg = arg.replace(/[^\d]*(\d\d):(\d\d).*/g,"$1:$2");
  $(inp).val(arg);
  var hhmm = arg.split(":");
  if(hhmm.length == 2 && hh && mm) {
  hh.setValueFn(hhmm[0]);
  mm.setValueFn(hhmm[1]);
}
};

$(btn).click(function(){     
var v = $(inp).val();
  hh = mm = undefined;
 
  if(cmd)
cmd(v);
 
  if(v.indexOf(":") < 0) {
  v = "12:00";
  $(inp).val(v);
}

var hhmm = v.split(":");

function
tSet(idx, arg)
{
  if((""+arg).length < 2)
arg = '0'+arg;
  hhmm[idx] = arg;
  $(inp).val(hhmm.join(":"));
}

});

loadScript("pgm2/jquery-clock-timepicker.min.js",
function() {
$(inp).clockTimePicker();

});
return newEl;
}