< Try Suite 6.5 with TypeScript support, grouping TreeGrid data, and columns’ drag-n-drop in Grid and TreeGrid

JavaScript Datepicker

A convenient JavaScript datepicker with a rich feature set and flexible customization based on dhtmlxCalendar.
Part of the leading-edge Suite UI library.

Product Features

  • Cross-browser compatibility
  • Support for IE11+
  • Full control with JavaScript API
  • Highly configurable
  • Fully customizable
  • Ability to set inactive dates
  • Configurable first day of the week
  • Built-in multilingual support
  • 12-hour and 24-hour time format
  • Ability to add time picker
  • Ability to highlight dates
  • Ability to add numbers of weeks
  • Ability to select a range of dates
  • 3 views: calendar, month, year

Initialize Your JavaScript Datepicker with Ease

Learn How to Create an HTML Datepicker in 5 Simple Steps:
Create an HTML file with the calendar source files in it
Initialize the dateInput and add an event listener for showing a popup
Create the dhx.Calendar and dhx.Popup object constructors
Attach the calendar to the popup
Make the dateInput display the selected values of the calendar and hide the popup

Why Choose DHTMLX Datepicker?

An easy-to-use popup JavaScript datepicker for your app

JavaScript datepicker is a lightweight cross-browser control based on dhtmlxCalendar. The component is easily configurable. All you need to do is to attach a date picker to a text input field and show a popup with a calendar when a user clicks on the input field. The calendar attached provides a fast and intuitive date selection in web-based apps.

A convenient tool for selecting date ranges

DHTMLX datepicker features custom date format, the choice of any day as the first day of the week, a year drop-down list, and multilanguage support. Our HTML datepicker can also be used as a date range selection tool when dates prior to and after the available date range are disabled accordingly. Besides, you can add a time picker for a more precise selection of date and time.

A highly customizable UI datepicker

Just like dhtmlxCalendar, our datepicker can be customized to bits to match your web app. You can modify every aspect of its look and feel: add a border and apply a shadow, change colors of all elements including the background, numbers, highlighted dates, and date ranges. By default, the UI of our datepicker is based on Material design.

Support for Angular, React, and Vue.js

Based on dhtmlxCalendar, our JavaScript datepicker can be easily used in web apps built with the help of the most popular frameworks: Angular, React, and Vue.js. We provide special wrappers for these frameworks in one package with our components. You’re welcome to evaluate them during a 30-day free trial period.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All JavaScript UI components are part of the dhtmlxSuite library. You can download the free trial version of Suite and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

PRO features

Need help with dhtmlxDatePicker integration into your app? Contact us