日期选择器不't使用'innerHTML'

datepicker doesn't display by using 'innerHTML'

本文关键字：使用 innerHTML 选择器 日期      更新时间：2023-09-26


我使用的是"Modernizr 2.6.2"中的日期选择器，它非常有用
它在这个示例代码中工作得很好

  <script>
$(function() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    }
});
</script>
    ...
<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem">

然而，我遇到了一个问题。我发现它在下面的例子中不起作用。

<td ondblclick="modifySelector(this.id)" id="nof_{{ ownProblem.courseId }}_{{ ownProblem.problemId }}_{{ ownProblem.isAllInputCaseInOneFile }}">{{ ownProblem.isAllInputCaseInOneFile }}</td>`
<script>
function modifySelector(target){
    if(target.substring(0, 3)=="nof"){
        if( document.getElementById(target).innerHTML == "OneFile")
            document.getElementById(target).innerHTML = "MultipleFiles";
        else
             document.getElementById(target).innerHTML = "OneFile";
    }
    else if(target.substring(0, 9)=="startDate"){
        document.getElementById(target).innerHTML = '<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem">;
    }
}
</script>

我想，区别在于它是直接还是间接使用"innerHTML"编写的我认为这是关于优先级或与DOM相关的东西。但我不知道该怎么解决。

已解决。
我在"input"标记上添加了"onmousedown"事件
就像下面的例子一样。

<script>
if(target.substring(0, 9)=="startDate"){ 
    document.getElementById(target).innerHTML = '<input class="datepicker input-usmall" type="date" id="startDate" name="startDate" data-date-format="yyyy-mm-dd" placeholder="click" autocomplete="off" form="addProblem" onmousedown="datepick();">';
}    
// added here new function
function datepick() {
    if (!Modernizr.inputtypes['date']) {
        $('input[type=date]').datepicker({
            dateFormat: 'yy-mm-dd'
        });
    }
}
</script>

现在它起作用了。任何人知道另一种解决方法，请回答我。

谢谢！

相关文章：