• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 67
  • Last Modified:

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"?
0
Justin Hull
Asked:
Justin Hull
  • 3
2 Solutions
 
Justin HullAuthor Commented:
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.
0
 
Justin HullAuthor Commented:
Thank you Vijaya, that was pretty close to what I was trying to do. The only sad point is that method does not allow inline editing via ajax, its kinda  large form submit.
I ended up not using webgrid so i can keep ajax
1
 
Justin HullAuthor Commented:
no answer for question provided
0
 
Jon SnowCommented:
Good Post. Also check Free Movie Sites l  Free Movie Sites HD
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now