如何使用Bootstrap在asp文本框中使用datepicker

时间:2015-01-27 15:50:57

标签: javascript jquery css asp.net twitter-bootstrap

我试图在asp文本框中使用日期选择器但是当我在IE中运行它时出现错误“Bootstrap的JavaScript需要jQuery”。当我在Chrome中呈现它时,我没有收到任何错误,但日期选择器根本没有出现。但是,如果我在文本框中添加class =“date”,则日期选择器可以在Chrome中使用,但不能在IE中使用。请帮忙。

<link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Styles.css" rel="stylesheet" />
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/bootstrap-datepicker.js"></script>


    <script type="text/javascript">
        $(document).ready(function () {
            var dp = $('#<%=txtDT_Particip.ClientID%>');
            dp.datepicker({
                changeMonth: true,
                changeYear: true,
                format: "dd.mm.yyyy",
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            });
        });
</script>

这在任何浏览器中都不起作用

<asp:TextBox ID="txtDT_Particip" runat="server" ClientIDMode="Static"  CssClass="form-control" placeholder="Select preferred date to start" ></asp:TextBox> 

这仅适用于chrome

<asp:TextBox ID="txtDT_Particip" runat="server" ClientIDMode="Static"  CssClass="form-control" placeholder="Select preferred date to start"  type="date"></asp:TextBox> 

2 个答案:

答案 0 :(得分:0)

您只需要引用jQuery,即

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/bootstrap-datepicker.js"></script>

检查以下内容,该内容适用于IE和Chrome。

<强> jsFiddle

答案 1 :(得分:0)

您需要引用jQuery UI以及基本jQuery库。

http://jqueryui.com/datepicker/