jQueryUI Datepicker (cambiar id por class)

[bernattorras]

Hola a todos,

Estoy intentando hacer un formulario con varios campos de seleccion de fecha. Para los datepickers uso los datepickers de dos campos que se pueden ver en el ejemplo:
http://jqueryui.com/demos/datepicker/#event-search

Asi es mi código:

HTML

Código HTML:

<div class="dates">
     <label for="from">From</label>
     <input type="text" id="from" name="from"/>
     <label for="to">to</label>
     <input type="text" id="to" name="to"/>
</div>
 

JAVASCRIPT

Código Javascript:

$(function() {
            var dates = $('#from, #to').datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 2,
                onSelect: function(selectedDate) {
                    var option = this.id == "from" ? "minDate" : "maxDate";
                    var instance = $(this).data("datepicker");
                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
 

El problema es que me gustaría cambiar los ids de los inputs por calses (para poder tener mas de un campo de seleccion), pero al cambiar los "#" por "." en el javascript, me deja de funcionar correctamente...

Alguien podría decirme cómo podría modificar el javascript para que me funcione correctamente con el código html:

Código HTML:

<div class="dates">
     <label for="from">From</label>
     <input type="text" class="from" name="from"/>
     <label for="to">to</label>
     <input type="text" class="to" name="to"/>
</div>
 

Muchas gracias!