javascript - 在不单击“完成”按钮的情况下将值设置为日期选择器

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 插件

Answer 3

我使用 DOM 为我的项目创建了一个类似的解决方案。对我来说已经足够好了，但实际上，这是一个临时的 hack（除非我能找到更好的东西）。一探究竟：

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