I need to update my datepickers' date format (mm.dd.yyyy etc) using a select box.

I am currently using Eyecon's Bootstrap Datepicker because it had the smallest files size that I could find (8k minified), and includes the date formats I need. I also tried to trigger date format changes in several other datepickers without any success.

Fiddle: http://jsfiddle.net/Yshy7/8/

Is there an obvious way to trigger a change from the select box to the datepickers?

//date format
var dateFormat = $('#custom_date_format').val() || "mm/dd/yyyy";
$('#custom_date_format').change(function() {
    var dateFormat = $(this).val();
});

//start and end dates
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = $('.j-start-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    //return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  if (ev.date.valueOf() > checkout.date.valueOf()) {
    var newDate = new Date(ev.date)
    newDate.setDate(newDate.getDate());
    checkout.setValue(newDate);
  }
  checkin.hide();
  $('.j-end-date')[0].focus();
}).data('datepicker');

var checkout = $('.j-end-date').datepicker({
format: dateFormat,
  onRender: function(date) {
    return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');