Calendar

Calendar is a touch optimized component that provides an easy way to handle dates.

Calendar can be created and initialized using JavaScript. We need to use related App's method:

{% highlight js %} $("#my-input").calendar(); {% endhighlight %}

A calendar will popup when user click the input, and the start date will be the value of input.

You can use data-toggle='date' to init calendar if you don't want to write any JS code:

{% highlight html%} {% endhighlight %}

Params

Let's look on list of all available parameters:

Parameter Type Default Description
Common Picker Modal Component Parameters
inputReadOnly boolean true Sets "readonly" attribute on specified input
cssClass string Additional CSS class name to be set on calendar modal
closeByOutsideClick boolean true If enabled, picker will be closed by clicking outside of picker or related input element
toolbar boolean true Enables calendar modal toolbar
toolbarTemplate string Toolbar HTML Template
Specific Calendar Parameters
value array Array with initial selected dates. Each array item represents selected date
disabled Date Range Additonal disabled dates. Parameter accepts so called Date Range (look below for details)
formatValue function (p, values) Function to format input value, should return new/formatted string value. values is array where each item represents selected date
monthNames array ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] Array with full month names
monthNamesShort array ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] Array with short month names
dayNames array ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] Array with week day names
dayNamesShort array ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] Array with week day short names
dateFormat string 'yyyy-mm-dd' Default date format, available expressions:
  • 'yyyy' - 4 digits year
  • 'yy' - 2 digits year
  • 'mm' - 2 digits month number, from 01 to 12
  • 'm' - month number, from 1 to 12
  • 'MM' - full month name
  • 'M' - short month name
  • 'dd' - 2 digits day number, from 01 to 31
  • 'd' - day number, from 1 to 31
  • 'DD' - full week day name
  • 'D' - short week day name
multiple boolean false Enable to allows select multiple dates/values
rangePicker boolean false Enable to enable range picker. Not compatible with multiple
direction string 'horizontal' Months layout direction, could be 'horizontal' or 'vertical'
minDate Date null Minimum allowed date
maxDate Date null Maximum allowed date
touchmove boolean true If enabled then calendar months slides follow finger during touch move
animate boolean true Enables transition between months
closeOnSelect boolean false Enable and calendar will be closed when user pick a date
yearPicker boolean true Enable year picker in toolbar
Callbacks
onChange function (p, values, displayValues) Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column
onMonthAdd function (p, monthContainer) Callback function that will be executed when newly generated month HTML element will be added to calendar.
onDayClick function (p, dayContainer, year, month, day) Callback function that will be executed when user clicks/select any date
onOpen function (p) Callback function that will be executed when picker is opened
onClose function (p) Callback function that will be executed when picker is closed

A change Event will triggered on input element when user selected date.

Use DateTimePicker if you want to select both date and time.

Inline

If you init calendar on an div or other element instead of an input element, it will auto change to inline mode.

{% highlight html%}
{% endhighlight %}