JQuery: how do I have two date pickers?

Question

On my site, I want to have a date range element, so I decided that I would use two date pickers from http://jqueryui.com/demos/datepicker/

both job collectors are currently editing the same field ... which upsets me.

$j(function() {
    $j(".date-range-start .date-picker input").datepicker({
        //showOtherMonths: true,
        changeYear: true,
        showAnim: 'fadeIn',
        showOn: 'button'
    });
    $j(".date-range-end .date-picker input").datepicker({
        //showOtherMonths: true,
        changeYear: true,
        showAnim: 'fadeIn',
        showOn: 'button'
    });
});

I realized, since I have two different selectors, I could change two different fields, right?

well ... apparently it hates me.

<div class="date-range-picker">
            <div class="date-range-start">
                <div class="date-picker">
                    <input id="classinput-field" name="classinput-field" type="text" class="hasDatepicker"><button type="button" class="ui-datepicker-trigger">...</button>
                </div>
            </div>
            <div class="date-range-end">
                <div class="date-picker">
                    <input id="classinput-field" name="classinput-field" type="text" class="hasDatepicker"><button type="button" class="ui-datepicker-trigger">...</button>
                </div>
            </div>
        </div>

Answer 1

Give them two separate identifiers.

$("#id1").datepicker();
$("#id2").datepicker();