使用'innerHTML'不显示datepicker

时间:2015-03-01 15:03:53

标签: javascript datepicker


我正在使用“Modernizr 2.6.2”中的datepicker,它非常有用。
它在这个示例代码中工作得很好

  <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相关的东西。     但我不知道如何解决它。

1 个答案:

答案 0 :(得分:0)

解决了它。
我添加了&#39; onmousedown&#39;事件输入&#39;标签。
就像下面的例子一样。

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

现在可以使用了。 任何人都知道另一种解决方法,回答我。

谢谢!