Calendar Suggest: show Datepicker and Timepicker

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