MVC 2; Use a datepicker to input a date in a grid.

Question

Has anyone successfully assigned a datepicker to a date field that is repeated in a grid? Surely someone has done it before? I find a problem with doing this is that the ID for each field in a row is repeated in the next row. So when I assign a date on the 4th row, I update the same field in the first row because their ID is the same.

Answer 1

You can do it like this... I just put this on my Edit View:

<%: Html.TextBox("", String.Format("{0:dd. MMMM yyyy}", Model), new { @id = "datePicker" })%>

Via new { @id = "something" } you can control the HTML generated by helper method. This time I wanted the ID to be datePicker so that jQuery can be triggered accordingly.

---

And this is the jQuery Magic:

<link type="text/css" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery.ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.4.2.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.ui.datepicker.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    $(document).ready(function () {
        $('#datePicker').datepicker({
            altField: '#datePicker',
            changeYear: true,
            changeMonth: true,
            altFormat: 'dd. MM yy',
            yearRange: '1900:2010'
        });
    });

Check this out for more jQuery Datepicker configuration settings.