DatePicker

API Reference

Overview

Datepicker is used in a combination with ui-related calendar that is initialized on clicking the control. It allows choosing a date and, optionally, time in the calendar for their further usage.

Related sample:  Date Picker ('datepicker')

Initialization

{
    view: "datepicker", 
    value: new Date(2012,6,8), 
    label: "Select Date", 
    timepicker: true
}

Main properties

  • label (string) - text label of a control. It can be customized by:
    • labelAlign (string) - label alignment towards its container. Possible values are "left" and "right". In any way, it's placed left to the control;
    • labelWidth (number) - width of the label container;
  • value (string, object) - defines the initial value of the control;
  • placeholder (string) - defines placeholder for datepicker input. The control should be initialized without an initial value;
  • timepicker (boolean) - enables a clock for time selection (false by default);
  • stringResult (boolean) - sets the data type of value returned by getValue()/get Values() methods. If true, it returns date as string. By default the property is false and the method returns date object;
  • format (string) - sets a date format to display in the datepicker field. By default it is "%Y-%m-%d".
  • type (string) - (optional) sets the datepicker type:
    • "time" - configures datepicker for time selection only (uses webix.i18n.timeFormat as formatting pattern)
    • "month" - configures datepicker to display a calendar in the "month" mode
    • "year" - configures datepicker to display a calendar in the "year" mode

"Month" and "Year" Calendar modes

Datepicker calendar can be shown in the month or year mode. To set one of these modes, use the type property with either "month" or "year" value:

Month mode

webix.ui({
    view:"toolbar", 
    elements:[
        {view:"datepicker",align:"right",label:"Select Date",type:"month"}
    ]
});

Year mode

webix.ui({
    view:"toolbar", 
    elements:[
        {view:"datepicker",align:"right",label:"Select Date",type:"year"} 
    ]
});

Time selector

If you need to select time (hours and minutes) only, use the datepicker with type "time":

{ view:"datepicker",type:"time",stringResult:true }

Dates are formatted according to the Date Formatting Methods.

Disabling date and time slots

To limit user ability to pick date and time periods, you should access calendar object that lies in the datepicker popup and apply the needed configuration to it:

{
    view:"datepicker", 
    suggest:{
        type:"calendar", 
        body:{
            minDate:new Date(),
            maxDate:"2016-05-07"
        }
    }
}

More about Disabling Dates in Calendar

More about Advanced Popup Configuration in Popup Selectors

Back to top