dat.gui的日历输入

Question

有没有办法为dat.GUI提供日历输入？我希望能够使用用户界面输入日期，如果可能的话。我目前的工作是以文本形式输入日期，但我更喜欢使用某种类型的日历。谢谢!

Answer 1

我知道这个问题很久以前就有人问过了，但现在还没有人回答。出于类似的需要，我创建了这个codepen来演示jquery-simple-datetimepicker与dat.GUI的集成。相关部分/逻辑如下：

    $(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;
            }

        }
    });