dat.gui - dat.gui 的日历输入

Question

有没有办法为 dat.GUI 提供日历输入？如果可能的话，我希望能够使用 UI 来输入日期。我目前的解决方法是将日期输入为文本，但我更喜欢使用某种类型的日历。谢谢！

Answer 1

我知道这个问题是很久以前提出的，但还没有回答。出于类似的需要，我创建了这个代码笔，它演示了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;
            }

        }
    });