DatePicker

You can use dhtmlxCalendar as a date picker by putting it inside a popup.

Date picker

First, you should create a popup and then attach a calendar into it. Follow the steps below:

1. create an input to enter a date into and give it the id "date-input":

<input type="text" id="date-input" style="width: 200px;" readonly/>

2. use corresponding object constructors to create a calendar and a popup objects. Note that in this case null is used instead of container for Calendar:

var calendar = new dhx.Calendar(null, {dateFormat: "%d/%m/%y"});
var popup = new dhx.Popup();

3. attach the calendar to the popup using the attach method of Popup:

popup.attach(calendar);

4. use the show method of Popup inside a click handler to define that a popup with calendar will open on click in the "date-input" input:

var dateInput = document.getElementById("date-input");
dateInput.addEventListener("click", function() {
    popup.show(dateInput);
});

5. define the logic of closing the popup with calendar using the hide method of Popup. For example, on selecting a new date in the calendar:

calendar.events.on("change", function() {
    dateInput.value = calendar.getValue();
    popup.hide();
});

Related sample:  Date picker - DHTMLX Calendar

Back to top