Multiple datepickers in one page

Multiple datepickers in one page


Hi,
I need to display multiple datepickers on the same page, it use to
work perfectly with a previous version of jquery-ui but I can't get it
work with 1.7.1.
The code below only displays a datepicker for the first input, the
others are ignored.
Is there anyhting wrong with it?
JS code :
$(document).ready(function() {
    $.datepicker.setDefaults($.extend({showMonthAfterYear: false},
$.datepicker.regional['fr']));
    $(".calendar").datepicker({
        yearRange: '1850:2015',
        showOn: "button",
        showAnim: "fadeIn",
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        buttonImage: "squelettes/images/bouton-cal.gif",
        buttonImageOnly: true
    });
});
Input code :
<input type="text" id="date_notice_debut" class="calendar"/>
<input type="text" id="date_notice_fin" class="calendar"/>
<input type="text" id="date_contenu_debut" class="calendar"/>
<input type="text" id="date_contenu_fin" class="calendar"/>