如何将另一页中的日期选择器显示为当前页面中的弹出按钮单击？

Question

页面1

<button class="btn btn-outline-primary btn-sm btn-block " >Schedule order</button>

第2页

<button class="simplepicker-btn" >Show Picker</button>

> <script>
>     let simplepicker = new SimplePicker({
>       zIndex: 10
>     });
> 
>     simplepicker.open();
> 
>     const $button = document.querySelector('button');
>     const $eventLog = document.querySelector('.event-log');
>     $button.addEventListener('click', (e) => {
>       simplepicker.open();
>     });
> 
>     // $eventLog.innerHTML += '\n\n';
>     simplepicker.on('submit', (date, readableDate) => {
>       $eventLog.innerHTML += readableDate + '\n';
>     });
> 
>     simplepicker.on('close', (date) => {
>       $eventLog.innerHTML += 'Picker Closed'  + '\n';
>     });   </script>

第2页中有日期/时间选择器。单击第1页中的“计划订单”按钮时，如何弹出相同的日期/时间选择器？我试过改名了。但什么都没出现。我对java脚本很陌生。谢谢

Answer 1

您将需要使用html注入。在按钮下面或上方添加一个空的div块，然后给它一个唯一的id，如

<div id="date-picker"></div>

在Javascript代码中，尝试如下

$("#date-picker").load("x.html");

其中x.html是第2页的html代码。