开发者

Jquery Datepicker not working in ASP.NET

I have looked all over to solve this issue and all suggestions I have received have not worked. This is what I'm importing:

<link href="css/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.12.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.datepicker.min.js" type="text/javascript"></script>  

This is the Jquery and text box

<script type="text/javascript">
   $(function () {
      $('#EarliestArrivalTB').datepicker();
   });
</script>
<asp:TextBox ID="EarliestArrivalTB" runat="server"></asp:TextBox>

I got it working on my localhost but when i moved it over to the web server, it does not work. What am i 开发者_如何学运维doing wrong here?


The problem is you're referencing a server-side ID. You need to generate the client-side ID for the asp.net control for it to work:

<script type="text/javascript">
   $(document).ready(function() {
      $('#<%=EarliestArrivalTB.ClientID %>').datepicker();
   });
</script>

#EarliestArrivalTB as a selector on the client doesn't exist because it's clientside representation will be very different.


My favourite way of doing it

<script type="text/javascript">
   $(function () {
      $('.DatePicker').datepicker();
   });
</script>
<asp:TextBox ID="EarliestArrivalTB" runat="server" CssClass="DatePicker"></asp:TextBox>

This means implementing the datapicker on any field is no more complicated that adding a DatePicker class.

Edit: I suppose I should tell you why its not working too. The Id you specify on a server control is the Id you use to reference in server side code. Once its put on the page because of naming containers and such its client Id will be different to make sure there are no naming conflicts, as a result there is the ClientID property so you can discover what that client side Id actually is.


try

<script type="text/javascript">
   $(function () {
      $('#<%=EarliestArrivalTB.ClientID %>').datepicker();
   });
</script>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜