如何将日期选择器添加到自定义对话框TinyMCE上的文本框

我有一个自定义按钮，当我点击时，我会得到一个自定义对话框。在一切都好之前，现在我需要在文本框的自定义对话框旁边设置一个日期时间选择器。我也不想使用jqueryUI包，因为datepicker可以为我提供更好的解决方案

你可以试试这把小提琴

var dialogConfig={
标题：“缺少日期选择器”，
正文：{
键入：“面板”，
项目：[
{
键入：“输入”，
姓名：'头衔'，
标签：“输入标题”
},
{
键入：“输入”，
名称：“日期时间”，
标签：“日期时间DD/MM/YYYY”
}
]
},
按钮：[
{
键入：“取消”，
名称：“关闭按钮”，
文本：“取消”
},
{
键入：“提交”，
名称：“submitButton”，
文本：“插入”，
小学：对
}
],
初始数据：{
标题：“”，
日期时间：“”
},
onSubmit:函数（api）{
var data=api.getData（）；
tinymce.activeEditor.execCommand（'mceInsertContent'，false，My'+data.title+'at:'+data.DateTime+'
'）；
api.close（）；
}
};
tinymce.init({
选择器：“textarea.petMachine”，
工具栏：“对话框示例btn”，
设置：函数（编辑器）{
editor.ui.registry.addButton（'dialog-example-btn'{
正文：“[插入]”，
onAction:函数（）{
editor.windowManager.open（dialogConfig）
}
})
}
});
`````````````````````````
日期时间文本框上的日期选择器。
提前谢谢。

我可以从下面的URL使用日期范围选择器插件来完成

下面是下面的代码

//at Items /component declartion for form
{
   type: 'htmlpanel',
   html: '<input type="text" id="datepickerstart" class=" datepicker tox-textfield" readonly="readonly"></p>',
}


//at function

function _onAction() {

/* dialogue code here ..... */


                //Calling date picker
                $('.datepicker').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    timePicker: true,
                    startDate: moment().startOf('hour')

                }, function (start, end, label) {
                    //alert($("#datepickerstart").val());
                });             
            }


//at calling function of dialogue
editor.ui.registry.addMenuItem('xxxxxx', {
                text: 'xxxxxx',
                context: 'insert',
                onAction: _onAction
            });


// Include js and css of datepicker at where editor is been used which will automatically recognize the daterangepicker function.

//表单的条目/组件声明
{
键入：“htmlpanel”，
html:“
”，
}
//在功能上
函数_onAction（）{
/*对话代码在这里*/
//呼叫日期选择器
$（'.datepicker'）.daterangepicker({
singleDatePicker：是的，
决战：没错，
时间选择器：是的，
startDate:moment（）.startOf（'hour'）
}，函数（开始、结束、标签）{
//警报（$（“#datepickerstart”）.val（）；
});             
}
//论对话的召唤功能
editor.ui.registry.addMenuItem（'xxxxxx'{
文本：“xxxxxx”，
上下文：“插入”，
onAction:_onAction
});
//在使用编辑器的位置包含datepicker的js和css，它将自动识别daterangepicker函数。

若你们不知道答案，至少不要点击减号来回答问题

//at Items /component declartion for form
{
   type: 'htmlpanel',
   html: '<input type="text" id="datepickerstart" class=" datepicker tox-textfield" readonly="readonly"></p>',
}


//at function

function _onAction() {

/* dialogue code here ..... */


                //Calling date picker
                $('.datepicker').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    timePicker: true,
                    startDate: moment().startOf('hour')

                }, function (start, end, label) {
                    //alert($("#datepickerstart").val());
                });             
            }


//at calling function of dialogue
editor.ui.registry.addMenuItem('xxxxxx', {
                text: 'xxxxxx',
                context: 'insert',
                onAction: _onAction
            });


// Include js and css of datepicker at where editor is been used which will automatically recognize the daterangepicker function.