I’d like to show both the datepicker and timepicker when the user clicks into a datepicker field. The value should be entered only when the user clicks “Done” in the timepicker. How can this be accomplished using the existing components? Do I need to use webix.protoUI to define a custom component?
Hello,
Unfortunately, the current implementation of the suggest includes strict logic for setting the value to input and there is no possibility to modify it as needed.
Instead, I would recommend you to create your own popup with two calendars (regular and with type:'time'
) and combine their values for setting the result into the input.
For anyone curious about how to accomplish this:
webix.protoUI({
name: "dateTimePicker",
$cssName:"datepicker",
$getValue: function() {
return this.config.realValue;
},
$init: function(config){
var defaultDate = config.defaultValue ? config.defaultValue : null;
var defaultTime = defaultDate ? defaultDate : new Date();
var hours = 0;
var minutes = 0;
if (config.time){
hours = config.time.getHours();
minutes = config.time.getMinutes();
}
defaultTime.setHours(hours, minutes, 0, 0);
config.on = {
onFocus: function(){
var parent = this;
webix.ui({
view: "popup",
relative: "right",
id: "whatever",
body: {
rows:[
{
cols: [
{
view: "calendar",
id: "dates",
date: defaultDate
},
{
view: "calendar",
type: "time",
id: "times",
date: defaultTime,
minuteStep: config.minuteStep ? config.minuteStep : 15
}
]
},
{
view: "button",
type: "form",
value: "Done",
click: function(){
var children = this.getParentView().getChildViews()[0].getChildViews();
var day = children[0].getValue();
var time = children[1].config.date;
if (!day || !time){return;}
day.setHours(time.getHours(), time.getMinutes());
parent.setValue(webix.Date.dateToStr("%m/%d/%Y %h:%i %A")(day));
parent.config.realValue = day;
this.getParentView().hide();
}
}
]
}
}).show();
}
};
}
}, webix.ui.text);
@zpetit Wow! How did you come up with this! this is amazing!
For any other user who wants to see it in action: https://snippet.webix.com/pcxqrhk5