使用iframe作为日历的载体，不再被select和flash等控件挡住的日期输入框

使用iframe作为日历的载体可以解决日期输入框被其他控件挡住的问题。以下是详细的攻略过程：

1. 创建iframe

首先，我们需要创建一个iframe元素，它将作为日历的载体。可以通过下面的HTML代码创建一个基本的iframe元素：

<iframe id="calendar" style="width: 100%; border: none;"></iframe>

在这个iframe元素中，我们可以动态的添加日历的内容。

2. 添加日历的内容

接下来，我们需要添加日历的内容到之前创建的iframe元素中。可以使用jQuery等JavaScript库来创建日历内容，也可以直接在iframe元素内部写HTML代码。

let calendarContent = '<div class="calendar"><table>...日历表格内容...</table></div>';
$('#calendar').contents().find('body').html(calendarContent);

此处，我们使用jQuery相关的API来添加日历内容。需要注意的是，直接使用内部HTML设置iframe内容需要保证iframe的文档域与宿主页文档域一致，否则会出现跨域问题。

3. 显示日历

最后，我们需要在日期输入框中添加一个按钮或者其他触发日历显示的控件，并且在点击时显示之前创建的iframe元素。

<input type="text" id="dateInput" />
<button id="calendarButton">选择日期</button>

$('#calendarButton').click(function(){
  $('#calendar').css({'top': $('#dateInput').offset().top + $('#dateInput').outerHeight(), 'left': $('#dateInput').offset().left}).show();
});

为了定位日历元素，我们使用了jQuery的offset和outerHeight函数。

示例一：通过iframe载入第三方日历插件

示例二：手动创建简单日历界面