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.

  • edited May 2018

    For anyone curious about how to accomplish this:

        name: "dateTimePicker",
        $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;
                            view: "popup",
                            relative: "right",
                            id: "whatever",
                            body: {
                                    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];
                                      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;
    }, webix.ui.text);
  • edited May 12

    @zpetit Wow! How did you come up with this! this is amazing!

    For any other user who wants to see it in action:

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!