Calendar (DatePicker) Feature Details

On this page, you'll see key functionality of DHTMLX Calendar. You can download and use it as a standalone widget or combine it with other Suite UI widgets to build rich web interfaces.

Basic Views
With the DHTMLX calendar widget, you can display dates in 3 modes: days, months, and years. Besides, you may convert it into a date picker by creating a popup and then attaching a calendar into it. Users will be able to select a desired date which will be displayed in an input field.
Range of Dates
You can place two calendars together on a page so users will be able to select a date range with the start date on the first widget and the end date on the second one. Our component allows applying custom styling to the selected date range, e.g. changing default colors.
Disabled or Highlighted Dates
DHTMLX calendar widget enables you to limit the range of dates users can select from or highlight certain dates by applying a CSS class with custom colors.
It's possible to attach a timepicker to a calendar, which helps users set a specific time by entering it manually using a keyboard or a slider. By default, our Calendar uses the 24-hour format that can be changed to the 12-hour format.
Adjustable UI
You're free to modify the overall look and feel of a calendar, for example, by changing its background color, styling borders or setting the desired width of the widget. Moreover, DHTMLX Calendar can display the numbers of weeks and days only of the current month.
DHTMLX Calendar supports any number of languages which users can switch on the fly. You can also specify the date format and set the start of the week by replacing the default Sunday with any other weekday.

Estimate All UI Widgets

Create functional and easy-to-use web apps and interfaces, as well as save up to 40% by downloading the whole Suite UI library. You can benefit from:

Full toolkit of 20+ widgets

30 days of free trial

PRO features

Official technical support