jquery datepicker - Conflict when two dates in same form

I have a form with two date fields. It's quite a big form, so I'll just show the relevant parts.

<input id="dateofassessment" name="dateofassessment"  readonly="readonly" class='datebox' />
<input id="LastIncident" name="LastIncident" readonly="readonly" class="datebox" />

( I should point out that "dateofassessment" is the first item in the form, and "LastIncident" is the last item )

I attach the datepicker object like this..

    $(".datebox").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

The "dateofassessment" input box works perfectly. The calendar is shown OK, and clicking on a date fills in the "dateofassessment"field - Perfect!

However, the "LastIncident" box doesn't work so well. Clicking on it displays the calendar OK. However, selecting a date does not fill in the form. In fact the calendar closes on the "LastIncident", and re-opens on the "dateofassessment" field as soon as I select a date.

I can't post the entire code as there's vast amounts of it, on an intranet site. But hopefully I have posted the relevant parts.

FY开发者_StackOverflow中文版I,The fact the fields are "readonly" doesn't make any difference.

Versions... jQuery v1.5.1 Datepicker 1.8.9

Well that's obviousely bug with datepicker. Insted of using

$(".datebox").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

Try

$("#dateofassessment").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

$("#LastIncident").datepicker({
        dateFormat: 'dd-M-yy',
        changeYear: true,
        showButtonPanel: false
        });

I know it makes you repeat yourself which is bad but it could help to sort out the problem. Or you can try another datepicker. Or update this one the newer version

Your problem is located elsewhere, see this fiddle which works as expected : http://jsfiddle.net/AfmpL/

You can also use .setDefaults to make all datepickers behave the same (I have mine in my masterpage, not even in OnDocumentReady, because I want it run before OnDocumentReady functions).

$.datepicker.setDefaults({
    showOn: "button",
    buttonImage: "/Program/Images/calendar.png",
    buttonImageOnly: true,
    buttonText: ""
})

And therefore, you won't have to repeat yourself nearly as much.

$("#dateofassessment").datepicker();
$("#LastIncident").datepicker();

Try using this JavaScript:

$(function() {
    $( "#datepicker" ).datepicker();
    $( "#datepicker" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
});

$(function() {
    $( "#datepicker2" ).datepicker();
    $( "#datepicker2" ).datepicker( "option", "dateFormat", "yy-mm-dd" );   
});

Then use the following form fields:

<input type="text" id="datepicker" name="fecha_ingreso" />
<input type="text" id="datepicker2" name="fecha_ingreso2" />