Jquery UI datePicker

Question

I have this code

$("#calendar").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText, inst) { 
     $('.selected-date').html(dateText);
     }

    });

I am looking for a way to send the date in 1 format to the database with ajax(not shown) and also update a div with a different date format. What is the best way to do this?

Update # 1

$("#calendar").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText, inst) {

  var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
  $(".selected-date").html(fmt2);
    }

    });

Update # 2

$("#calendar").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateText, inst) {
    var d = new Date(dateText);
    var fmt2 = $.datepicker.formatDate("DD, d MM, yy", d);
    $(".selected-date").html(fmt2);



}

    });

Answer 1

You've already got the function that's called when a date is selected, so you can then do something similar to the following:

onSelect: function(dateText, inst) {
  $('.selected-date').html(dateText);

  var fmt1 = $.datepicker.formatDate("yy-mm-dd", dateText);
  $.get("/your/ajax/url/" + fmt1, yourCallbackFunction);

  var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
  $("#someotherdiv").html(fmt2);
}

Not tested but should work... :-)

Update #1

Looks like the datepicker.formatDate() function needs a Date object to work with. The following works here...

onSelect: function(dateText, inst) {
  $('.selected-date').html(dateText);

  var d = new Date(dateText);

  var fmt1 = $.datepicker.formatDate("dd/mm/y", d);
  $.get("/your/ajax/url/" + fmt1, yourCallbackFunction);

  var fmt2 = $.datepicker.formatDate("MM o, yy", d);
  $("#someotherdiv").html(fmt2);
}