CODEWITHSUNDEEP
jqueryasp.net
Bruno
Bruno

Reputation: 33

Jquery datepicker write in other textbox

I.ve a problem with jquery datepicker. Here is tehe code

<asp:GridView ID="CompIncGridView1" runat="server" AllowPaging="True" AllowSorting="True"
                    AutoGenerateColumns="False" DataKeyNames="D_id" ClientIDMode="Static" >
                    <Columns>
                        <asp:TemplateField HeaderText="Data idoneità">
                            <EditItemTemplate>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:TextBox CssClass="DatePick" ID="ComplyDateTB1" runat="server" Text='<%# Bind("ComplyDate", "{0:d}") %>'></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>

                    </Columns>
                </asp:GridView>

and this is the jquery code

$(document).ready(function () {
            $(".DatePick").datepicker($.datepicker.regional['it']);
});

The problem is that when I click on any textbox, the calendar appears but when I choose the day, the date is written only on the first textbox of the table.

thanks

Upvotes: 1

Views: 584

Answers (2)

Aristos
Aristos

Reputation: 66641

First of all I reproduce your error here, base on jQuery Datepicker tutorial.

The issue is come because on your GridView all your text controls have the same IDs. One simple solution is to remove that ids, and let the asp.net add them automatically and your issue go away as you see on this final test: http://jsfiddle.net/B7EGj/1/ and the code from the working page:

<p>Date: <input type="text" class="dp" /></p>
<p>Date: <input type="text" class="dp" /></p>
<p>Date: <input type="text" class="dp" /></p>
<p>Date: <input type="text" class="dp" /></p>
<p>Date: <input type="text" class="dp" /></p>

<script>
 $(function() {
    $( ".dp" ).datepicker();
  });
</script>

Normally all ids on the controls must be unique, so I am not sure if the datepicker do wrong or not that is keep the id of the control that opens and add the date, but at the same time is open it base on the handler. From the other side the asp.net when you use the Template inside a repeater like GridView to add TextBoxes, and for any reasons fail to automatically give diferent id to the textboxes, and everyone have the same id.

Here is the code that sould gridview must make to avoid this issue: http://jsfiddle.net/B7EGj/2/ (with all ids diferent)

Upvotes: 0

Sachin
Sachin

Reputation: 40970

You are using class selector. Try using unique id selector. something like this

$(document).ready(function () {
            $('#<%= ComplyDateTB1.ClientID %>').datepicker($.datepicker.regional['it']);
});

Upvotes: 3

Related Questions