How to use JQuery to iterate elements of a class

Question

In my MVC application, I can assign the datepicker class to all of the input boxes requiring date fields. Previously I could then set up my datepicker with the following properties (which worked);

$(".datePicker").datepicker({ 
  showOn: 'both', 
  dateFormat: 'dd MM yy', 
  changeMonth: true, 
  changeYear: true, 
  yearRange: 'c-1:c+1', 
  beforeShowDay: noWeekendsOrHolidays });

Now I need to assign a date of birth datepicker that requires a different setup. So for that element I wrap the element as follows;

<span class="allDates"><%: Html.EditorFor(model => model.Employee.Dob)%></span>

So when my View is rendered, the Html from View Source looks like;

<tr>
    <td style="text-align: right;">
        <label for="Employee_Dob">Date of Birth</label>
    </td>                    
    <td colspan="2">
        <span class="allDates">
            <input class="datePicker" id="Employee_Dob" name="Employee.Dob" type="text" value="" />
        </span>
    </td>
</tr>

Now my jquery does not work - I imagine this is a simple fix for someone;

$(function () {
    $(".datepicker").each(function() {
        if ($(this).parent().hasClass("allDates")) {
            $(this).datepicker({ showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-100:c' });
        } else {
            $(this).datepicker({ showOn: 'both', dateFormat: 'dd MM yy', changeMonth: true, changeYear: true, yearRange: 'c-1:c+1', beforeShowDay: noWeekendsOrHolidays });
        }
    });
});

Do you have the `noWeekendsOrHolidays` function defined in your code? See http://stackoverflow.com/q/501943/1331430 — Fabrício Matté, Dec 05 '12 at 10:12
What does the HTML look like when then input is generated in your View? — BadHorsie, Dec 05 '12 at 10:15
I know, it was more so that I can see what classes you have, any ID attribute, etc. — BadHorsie, Dec 05 '12 at 10:32

BadHorsie · Accepted Answer · 2012-12-05T10:44:28.257

1

Give your DOB field an extra class, then create the datepicker again on it, with a different set of options:

class="datepicker dob"

$(".datepicker.dob").datepicker('destroy').datepicker({ 
    showOn: 'both',
    dateFormat: 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-100:c'
});

Or to recreate the options on only that specific datepicker:

$("#Employee_Dob.datePicker").datepicker('destroy').datepicker({ 
    showOn: 'both',
    dateFormat: 'dd MM yy',
    changeMonth: true,
    changeYear: true,
    yearRange: 'c-100:c'
});

edited Dec 05 '12 at 10:44

answered Dec 05 '12 at 10:20

BadHorsie

14,135
30
117
191

I tried something similar with #Employee_Dob.datePicker, but this does not overwrite the $(".datePicker").datepicker assignment, which is why I am trying to find a solution with the each iterator. – arame3333 Dec 05 '12 at 10:29
@arame3333 See updated answer. Try destroying the datepicker options first, then recreating them. – BadHorsie Dec 05 '12 at 10:30
Yes that did it. Thanks, I would never have guessed that as the answer, I did not know about destroy. Very useful. I will give you the uptick when you change your answer to show $("#Employee_Dob.datePicker") – arame3333 Dec 05 '12 at 10:35
It is probably better to have the selector remain class-based, as the code then gets reapplied to any datepicker that is for a date of birth. Of course, you might not want to do this or you feel that there won't ever be another DOB date picker in your application but, from a general coding point of view, it is better to create code that is reusable and dynamic. – BadHorsie Dec 05 '12 at 10:42
I agree. It is tricking injecting classes into MVC Editor Templates which is why my plan B was to use a Span element. I can probably do that as well. – arame3333 Dec 05 '12 at 10:46
So $(".allDates").children(".datePicker") is the solution I am using. – arame3333 Dec 05 '12 at 10:59

How to use JQuery to iterate elements of a class

1 Answers1