Question

我正在使用Webix时间选择器，并且不知道如何强制它设置值而不点击“完成”按钮（我根本不想显示它）。有没有办法通过DOM或通过简单的JS来做到这一点？

例如，时间选择器（带有type:"time"的日期选择器）

var time = webix.ui({   
    view:"datepicker", 
    align: "right",
    label: 'Select Date',
    labelWidth:100, width:350,
    type:"time", stringResult:true
});

http://webix.com/snippet/232a2e2c

Answer 1

我稍微修改了你的代码。现在，您可以选择点击Enter键的日期：

var time = webix.ui({   
   view:"datepicker", 
   align: "right",
   label: 'Select Date',
   labelWidth:100, width:350,
   type:"time", stringResult:true
});

document.addEventListener("keydown", keyDownTextField, false);

function keyDownTextField(e) {
  var keyCode = e.keyCode;
  if(keyCode==13) {
     var done = document.getElementsByClassName('webix_cal_done');
     if(done.length > 0){
        done[0].click();
     }
  }
}

工作小提琴：http://webix.com/snippet/91f4cecc

Answer 2

根据您的代码，我会直接使用datepicker()而不是使用ui。它是jquery UI集的一部分。我已直接链接到datepicker网站。

var time = webix.datepicker();

在jquery页面上有一个时间选择器插件列表，可能也有助于填补空白 Timepicker plugins

Answer 3

我使用DOM为我的项目创建了一个类似的解决方案。对我来说工作得很好，但实际上，它是一个临时的黑客（除非我能找到更好的东西）。看看：

time.getPopup().attachEvent("onhide", function(){
  var timeArr = document.getElementsByClassName("webix_cal_block webix_selected");
  if (timeArr.length == 2){
    var hour = timeArr[0].getAttribute("data-value");
    var min = timeArr[1].getAttribute("data-value");
    time.setValue(hour+" "+min);
  }  
});

http://webix.com/snippet/ff554921

Answer 4

全部在一个脚本中完成：

var time = webix.ui({   
    view:"datepicker", 
    align: "right",
    label: 'Select Date',
    labelWidth:100, width:350,
    type:"time", stringResult:true
}).attachEvent("onBlur", function(){
    document.getElementsByClassName('webix_cal_done')[0].click();
});

感谢@Hackerman http://webix.com/snippet/1613c3d2

将值设置为日期选择器而不单击“完成”按钮

4 个答案:

工作小提琴：http://webix.com/snippet/91f4cecc