How to add Jquery Ui Date Picker Control in Asp.net Grid view?

Question

how do i add Jquery Ui DatePicker to GridView .Please have a look at sample code that i have written.
Thanks

 <script type="text/javascript">
            $(document).ready(function ()
            {
                $("[id$=txtDate]").datepicker();
            });
        </script>

<asp:TemplateField HeaderText="Date">
                    <EditItemTemplate>
                        <asp:TextBox ID="txtDate" runat="server" Text='<%# Bind("MilkingDate") %>' />
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblDate" Text='<%# Eval("MilkingDate") %>' />
                    </ItemTemplate>
                </asp:TemplateField>

Steve B · Accepted Answer · 2012-07-17 14:17:21Z

5

Add a class to your textbox :

<asp:TextBox 
    ID="txtDate" runat="server" Text='<%# Bind("MilkingDate") %>'
    CssClass="youpi" 
    />

then use this class as a jQuery selector :

<script language="javascript" type="text/javascript">
    $(function() {
        $(".youpi").datepicker();
    });

</script>

answered Jul 17, 2012 at 14:17

Steve B

38k24 gold badges109 silver badges186 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bonCodigo Over a year ago

@SteveB how does this textbox work with Text='<%# Bind("MilkingDate") %>' in edit mode? Aren't we supposed to use the textbox to get an input from datepicker? And can you please share why you are calling css class instead of the textbox ID?

Steve B Over a year ago

@bonCodigo: from my memory, the datepicker function transform the textbox to a datepicker. jQueryUI handle all the data manipulation (but it's from memory, should test). Regarding the class selector versus the ID selector, I choose class selector because I want to be able to convert any textbox to a datepicket, w/o having to explicitly name each textbox. Working with ID is still possible, but it depends on your needs. Just be aware that .Net IDs are different on the client and the server. If you want to use the actual ID, you have to render the CLientID property of the control in the script

bonCodigo Over a year ago

@SteveB As for ID vs Selector: no wonder, for ID I just couldn't get it worked. So until my search hit this question and your answer. I have created a separate css class for each of the textbox (well not many textboxes I need to reder anyway), just a couple of them. So it's fine to go with Selector. However for Bind, mine works without it and I have a cs code that grabs the value for updating and insert purpose on RowUpdating event.

Steve B Over a year ago

@bonCodigo: a short answer related to IDS: $('#<%= YourTextBox.ClientID %>').datepicker()

Collectives™ on Stack Overflow

How to add Jquery Ui Date Picker Control in Asp.net Grid view?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related