Calendar input for dat.gui - dat.gui

Question

Is there any way to have a Calendar input for dat.GUI? I'd like to be able to use the UI to input dates if possible. My work around is currently to enter the dates as Text, but I would prefer to have some type of calendar. Thanks!

Answer 1

I know the question was asked sometime ago, but it hasn't been answered yet. Out of a similar need, I created this codepen that demonstrates the integration of jquery-simple-datetimepicker with dat.GUI. The pertinent section/logic follows:
$(function(){
//Create dat.gui instance
var gui = new dat.GUI({closeOnTop: true, width:450});
var calendarFolder = gui.addFolder("Calendar");
//Add calendarDate to dat.GUI
var dateController = calendarFolder.add({Date: ""}, "Date");
calendarFolder.open();
//Append Date Picker to calendarDate and show it.
var guiInput = $(calendarFolder.domElement).find("input").eq(0);
//Create event handler to update the dat.GUI input element when calendar is hidden
var datePickerOptions = {"onHide": function(handler){ fnSetGuiDate(); } };
//Add the calendar to the dat.GUI input element and immediately show it for demonstration
guiInput.appendDtpicker(datePickerOptions).handleDtpicker('show');
//Initialize the dat.GUI input value
fnSetGuiDate();
function fnSetGuiDate() {
var date = guiInput.handleDtpicker('getDate');
var strDate = date.getFullYear() + "-" +
fnFormat(date.getMonth() + 1) + "-" +
fnFormat(date.getDate()) + " " +
fnFormat(date.getHours()) + ":" +
fnFormat(date.getMinutes());
dateController.setValue(strDate);
function fnFormat(mnthOrDate) {
return mnthOrDate < 10 ? "0" + mnthOrDate : mnthOrDate;
}
}
});