trigger ui datepicker on button click inside gridview and assign selected date to field in current row

Question

I found this question and solution, however I'm not dealing with a text box, but a gridview field. Trigger jQueryUI datePicker on button click, send result to disabled input field

I have a Start Date column in an asp GridView with a TemplateField and if the ImageButton is clicked, I would like to trigger the jquery ui datepicker.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns=False allowsorting = True
        SkinID=FACGrid onload="GridView1_Load" onsorting="GridView1_Sorting" 
        onrowdatabound="GridView1_RowDataBound" 
        onrowediting="GridView1_RowEditing" 
        onrowcancelingedit="GridView1_RowCancelingEdit" 
        onrowupdating="GridView1_RowUpdating">
    <Columns>     
<asp:TemplateField HeaderText="Start Date" SortExpression="start_dt">
                    <EditItemTemplate>
                        <asp:Label ID="StDt" runat="server" CssClass="StartDate" Text='<%# Eval("start_dt", "{0:d}") %>'></asp:Label>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Label ID="StDt" runat="server" Text='<%# Bind("start_dt", "{0:d}") %>'></asp:Label>
                        <asp:ImageButton ID="startdtimage" CssClass="StartDateImg" runat="server" ImageUrl="../images/pencil.gif" Visible='<%# HasUpdateStartDateRole() %>' Width="18px" Height="18px" />
                    </ItemTemplate>
                </asp:TemplateField>

Based on the above referenced question, I have this. What do I need to make this work per row?

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArrivalDate").datepicker();

        $(".StartDateImg").click(function () {
            $(".StartDate").datepicker("show");
        });

    });
</script>

There is also a hidden column with the hire date. I want to set the datepicker to only allow dates equal to or after the hire date. Or, after the date is selected validate that it doesn't precede the hire date.

**** EDIT **** Would it be easier to have the imagebutton open a modal dialog and pass the row's start date and hire date to it? Then have an "update" button to check and save the date. But, I'm unsure of how to do that as well.

**** EDIT **** Using @Miki Shah's solution below, the datepicker is displaying, but I don't know how to assign the selected date to the startdate field for that row, use the startdate field for that row as the current selected date when it opens, and use that row's hire_date for validation or for restricting the available dates in datepicker.

try to remove the double quotes and try to add single qoutes and see in("Show").. — coder
– coder, Commented Oct 19, 2012 at 6:38

Miki Shah · Accepted Answer · 2012-10-20 05:48:43Z

3

You can assign datepicker by classname. Whenever image with "StartDateImg" classname is click, datepicker will show.

Sys.Application.add_load(function () {

            $(".StartDateImg").datepicker({
                duration: '',
                showTime: false,
                constrainInput: false,
                onSelect: function(dateText) {$(this).parents().find("span")[0]).innerHTML = dateText; 
            });
     }

edited Oct 20, 2012 at 5:48

answered Oct 19, 2012 at 7:16

Miki Shah

8159 silver badges20 bronze badges

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

12 Comments

RememberME Over a year ago

The datepicker shows up momentarily, but then the screen refreshes and it's gone.

Miki Shah Over a year ago

means, after page refresh, when click on image button, datepicker is not opening?

RememberME Over a year ago

No, I can see the datepicker but before I can do anything the screen refreshes and it's gone. I can click the image button again and the same thing happens.

RememberME Over a year ago

Also, in the brief moment that it showed, it showed the current date as selected. I would need it to open with the start date selected.

Miki Shah Over a year ago

Use can use jquery selctor to get Label control and set value as selected date. Please see edited code for onselect function onSelect: function(dateText) {$(this).parents().find("span")[0]).innerHTML = dateText;}

|

Tsasken · Accepted Answer · 2012-10-19 07:44:50Z

1

EDIT: working in html

I came up with a (not very elegant) solution so it's your call if you can or want to use it or not. :)

Script

<script type="text/javascript">
    $(document).ready(function () {
        $(".starter").each(function () {
            $(this).children(".StartDateImg").datepicker().hide();
        });
    });

    $(".starter").each(function () {
        $(this).children(".link").click(function () {
            $(this).nextAll().show();
        });
    });
</script>

HTML

<div class="starter">
    <a class="link" href="#">test</a>
    <div class="StartDateImg">
    </div>
</div>

The problem with the datepicker is that it automatically chooses to display inline or as popup.. => inline when applied to a div or span, popup when applied to input/text box

So my solution will load the datepicker inline in a div, hide this div and then show it when the correct link is pressed.

This will just show the div => to get the popup you will have to look into writing some css or javascript to make the div "appear" like a popup.

I hope it helps but I believe a more elegant solution may be found..

edited Oct 19, 2012 at 7:44

answered Oct 19, 2012 at 6:35

Tsasken

6895 silver badges16 bronze badges

4 Comments

RememberME Over a year ago

That gives me an error "Microsoft JScript runtime error: Unable to get value of the property 'settings': object is null or undefined"

Tsasken Over a year ago

Did you try with or without the "function(){" after ".each("? I forgot to paste it there the first time so I edited the post afterwards..

RememberME Over a year ago

Added the function, no error, but the datepicker doesn't show.

Tsasken Over a year ago

Above answer (where your screen refreshes) could be correct.. Perhaps you should try removing your anchor tag?

Raghurocks · Accepted Answer · 2012-10-19 09:32:52Z

0

You can try this.... Template column in the gridview will be like this.....

<asp:TemplateField>
    <ItemTemplate>
        <asp:Button Text="calendar" runat="server" CssClass="Calendar"    onclientclick="return Testing();" />
    </ItemTemplate>
</asp:TemplateField>

The Scripting function should be like this..........

<script type="text/javascript" >
        function Testing(){
            $('.calendar').each(function () {
                $(this).glDatePicker();
            });
            return false;
        }
</script>

Here after selecting a date from the date picker you can observe that value of the button will be change, i.e it shows the date ..... I used button here to invoke the glDatePicker :D Hope it helps you

answered Oct 19, 2012 at 9:32

Raghurocks

9258 silver badges20 bronze badges

1 Comment

RememberME Over a year ago

I have the same issue with this. How does it know which row's startdate to save the new value to? How does it get that row's hire_date for validation?

Collectives™ on Stack Overflow

trigger ui datepicker on button click inside gridview and assign selected date to field in current row

3 Answers 3

12 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related