Problem formatting jQuery UI Calendar

I am stuck with a problem of formatting jQuery UI Calendar. The format for the calendar is based on the user preference. If the user selects the Date format from the first select box, then the UI calendar format should be based on that... Please share ideas on how to achieve this.. thanks in advance..

jQuery Code

jQuery(function() {

        var format = 'yy-mm-dd';
        jQuery('#dateFormat').change(function(){
        format = jQuery('#dateFormat').val();
        alert(format);  
        });

        jQuery('#fromDate').datepicker({
        showTime: false,
        dateFormat: format,
        showOn: 'button',butt开发者_如何学JAVAonText: 'Date', buttonImage: 'images/calendar.gif', buttonImageOnly: true
        });

        jQuery('#toDate').datepicker({
        showTime: false,
        dateFormat: 'dd-mm-yy',
        showOn: 'button',buttonText: 'Date', buttonImage: 'images/calendar.gif', buttonImageOnly: true
        });

});

Html Code is as follows

<label>Date Format</label>
<select name="dateFormat" id="dateFormat">
<option val="1">dd-mm-yy</option>
<option val="2">yy-mm-dd</option>   
</select>
<label>Period start:</label>
<input type="text" value="" size="30" name="fromDate" id="fromDate" />
<label>Period start:</label>
<input type="text" value="" size="30" name="toDate" id="toDate" />

try this:

var fromDate = jQuery('#fromDate');
var toDate = jQuery('#toDate');
var dateFormat = jQuery('#dateFormat');

dateFormat.change(function(){
  var format = jQuery(this).val();
  fromDate.datepicker('option','dateFormat',format);
  toDate.datepicker('option','dateFormat',format);
});

fromDate.datepicker({
  showTime: false,
  dateFormat: format,
  showOn: 'button',buttonText: 'Date', buttonImage: 'images/calendar.gif', buttonImageOnly: true
});

toDate.datepicker({
  showTime: false,
  dateFormat: 'dd-mm-yy',
  showOn: 'button',buttonText: 'Date', buttonImage: 'images/calendar.gif', buttonImageOnly: true
});