如何在 SP.UI.ModalDialog.showModalDialog() 中使用 SharePoint 日期选择器？

Question

我创建了一个用户界面，并在 SharePoint 模式中显示。下面是将 HTML 内容传递给 SP.UI.ModalDialog.showModalDialog.

的代码

var content = document.createElement('div');
content.className = 'shareDiv';
content.innerHTML = "<head>" +
       "<title>Version Cleanup</title>" +
   "</head>" +
   "<table cellpadding='10px' cellspacing='10px'>" +
      "<tr>"+
         "<td>" +
             "<input type='text' id='createdBeforeDate' />" +
         "</td>" +
      "</tr>" +
"</table>";

var options = {
    title: 'Version Cleanup',
    showClose: true,
    allowMaximize: false,
    html: content
};
SP.UI.ModalDialog.showModalDialog(options);

我暂时删除了额外的 html 内容以使其简短。所以在这里我想为 createdBeforeDate 文本框使用 SharePoint 日期选择器。截至目前，我正在使用 Jquery-ui.js 文件使其成为日期选择器。有什么方法可以在 SP.UI.ModalDialog.showModalDialog 中使用 SharePoint 日期选择器吗？提前致谢。

Answer 1

请检查以下代码。

<script type="text/javascript" src="/_layouts/15/datepicker.js"></script>
<script src="//code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("#showModalDialog").click(function(){
        OpenInformationDialog();
    });
});
function OpenInformationDialog() {
    var content = document.createElement('div');
    content.className = 'shareDiv';
    content.innerHTML = "<head>" +
        "<title>Version Cleanup</title>" +
        "</head>" +
        "<table cellpadding='10px' cellspacing='10px'>" +
            "<tr>"+
            "<td>" +
                "<input type='text' id='createdBeforeDate' />" +
                "<iframe id='createdBeforeDateDatePickerFrame' title='Select a date from the calendar.' style='display:none; position:absolute; width:200px; z-index:101;' src='/_layouts/15/images/blank.gif?rev=23' class='owl-date-picker'></iframe>"+
                "<a role='button' onclick='clickDatePicker(\"createdBeforeDate\", \"/_layouts/15/iframe.aspx?cal=1&amp;lcid=2057&amp;langid=1033&amp;tz=-04:00:00.0009373&amp;ww=0111110&amp;fdow=1&amp;fwoy=2&amp;hj=0&amp;swn=false&amp;minjday=109207&amp;maxjday=2666269&amp;date=\", \"\", event); return false;' href='#'>"+
                "<img id='createdBeforeDateDatePickerImage' alt='Select a date from the calendar.' src='/_layouts/15/images/calendar_25.gif?rev=23' border='0'></a>"+
            "</td>" +
            "</tr>" +
        "</table>";

    var options = {
    title: 'Version Cleanup',
    showClose: true,
    allowMaximize: false,
    html: content
    };
    SP.UI.ModalDialog.showModalDialog(options);

}
</script>
<input type='button' id='showModalDialog' value="Show Modal Dialog"/>

如何在 SP.UI.ModalDialog.showModalDialog() 中使用 SharePoint 日期选择器？

How to use SharePoint datepicker in SP.UI.ModalDialog.showModalDialog()?

modal-dialog

datepicker

sharepoint-2013