icons

sets the visibility of 'Today/Clear' icons in the DateRange

boolean|array icons;

Example

webix.ui({
    view:"daterange",
    icons:[
        //default "today" icon
        {
            template:function(){
             return "<span class='webix_cal_icon_today webix_cal_icon'>"
                +webix.i18n.calendar.today
                +"</span>"
            },
            on_click:{
                "webix_cal_icon_today":function(){
                    this.addToRange(new Date());
                    this.callEvent("onTodaySet",[this.getValue()]);
                }
            }
        },
        //default "clear" icon
        {
            template:function(){
            return "<span class='webix_cal_icon_clear webix_cal_icon'>"
                +webix.i18n.calendar.clear
                +"</span>"
            },
            on_click:{
                "webix_cal_icon_clear":function(){
                    this.setValue("");
                    this.callEvent("onDateClear", []);
                }
            }
        }
    ]   
});

Related samples

Details

Disabling icons

To hide "Today" and "Clear" icons in the daterange, set the parameter to false:

webix.ui({
    view:"daterange",
    icon:false,
    ...
});

Object properties

As an object the parameter redefines icons:

webix.ui({
  view:"daterange",
  icons:[
   {
    template:function(){
        return "<span class='webix_cal_icon_week webix_cal_icon'>Current week</span>"
    },
    on_click:{
        "webix_cal_icon_week":function(){
            this.setValue({
                start:new Date(),
                end:webix.Date.add(new Date(), 1, "week")
            });
          }
       }
    }
  ]
});
See also
Back to top