asked on

jQuery Date picker not setting value

Hello, I am pretty new to mvc sites and trying to figure out the jQuery date picker in a web grid. I am able to put the date picker into my layout so it renders to all pages:

 <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-2.2.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".datePicker").datepicker({
                dateFormat: "dd-mm-yyyy"
            });

        })
    </script>

Open in new window

and can add the class to my webgrid, and it does display but I do not get an date value entered into the field when i select a date from the calendar:

webGrid.Column("Calendar_Dt", "Calendar Date", format: @<text>  <span class="display-mode"> <label id="lblCalendar_Dt">@item.Calendar_Dt</label> </span> <input type="text" id="Calendar_Dt"  class="edit-mode datePicker" /></text>, style: "col2Width")

Open in new window

What I am doing incorrectly here?

Thank you for any help you can provide.

edit:
It seems that the datepicker does not like the names of the input being the same and that is why if you update row 5 the value is placed in the row 1 textbox. Is there a way to refer back to the webgrid row by index value or some other unique name such as name="@item.id"?

Justin

ASKER

I am able to get the date function to update each row of the webgrid if i change it to:

webGrid.Column("Calendar_Dt", format: (item) => Html.TextBox("Calendar_Dt[" + (rowNum -1).ToString() + "].Calendar_Dt", (object)item.Calendar_Dt, new { @class = "datePicker"})),

Open in new window

but as soon as i try to wrap that in <span></span> tags to show or hid that section such as

webGrid.Column("Calendar_Dt", "Calendar_Dt", @<text>  <span class="display-mode"> <label id="lblCalendar_Dt">@item.Calendar_Dt</label> </span> <span class="edit-mode">format: (item) => Html.TextBox("Calendar_Dt[" + (rowNum -1).ToString() + "].Calendar_Dt", (object)item.Calendar_Dt, new { @class = "datePicker"})</span></text>)

Open in new window

it breaks. I still feel like im doing this wrong, im sure this is a common thing to do, add a calendar to a webgrid, i much be missing something very simple.

SOLUTION