Как использовать SharePoint DatePicker в SP.UI.ModalDialog.showModalDialog ()? - PullRequest
Новая
       9

Как использовать SharePoint DatePicker в SP.UI.ModalDialog.showModalDialog ()?

0 голосов
/ 05 июля 2018

Я создал один пользовательский интерфейс, который я отображаю в модале 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, чтобы сделать его кратким. Поэтому здесь я хочу использовать SharePoint DatePicker для createdBeforeDate текстовое поле. На данный момент я использую файл Jquery-ui.js, чтобы сделать его DatePicker. Есть ли способ использовать DatePicker SharePoint в SP.UI.ModalDialog.showModalDialog? Заранее спасибо.

1 Ответ

0 голосов
/ 05 июля 2018

Пожалуйста, проверьте следующий код. 

<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"/>

enter image description here

...