jQuery UI DatePicker output date format - jquery-ui

Question

I have inline jQuery UI DatePicker and need to customize format and look of output date, code:
<div id="date-start"></div>
<div class="date start" id="date-start-output"></div>
$(function(){
// Datepicker
$('#date-start').datepicker({
inline:true,
showOtherMonths: true,
altField: "#date-start-value",
altFormat: "dd M yy",
dateFormat: "dd M yy",
onSelect: function(){
var day1 = $("#date-start").datepicker('getDate').getDate();
var month1 = $("#date-start").datepicker('getDate').getMonth() + 1;
var year1 = $("#date-start").datepicker('getDate').getFullYear();
var str_output = "<b>" + day1 + "</b><span>" + month1 + "<br />" + year1 + "</span>";
$('#date-start-output').html(str_output);
}
});
});
It works, but in #date-start-output I have date format not as "dd M yy" but as "dd m yy". How can set necessary output format for month?
Also I need to show in #date-start-output current date after page load, I'm trying "beforeShow" event, but it not work together with "onSelect" event for me.
Thanks.

Answer 1

onSelect event handler first parameter is the selected date as text.
I guess it would be formatted as specified during the initialization
See http://jqueryui.com/demos/datepicker/#event-onSelect
$(function(){
// Datepicker
$('#date-start').datepicker({
inline:true,
showOtherMonths: true,
altField: "#date-start-value",
altFormat: "dd M yy",
dateFormat: "dd M yy",
onSelect: function(dateText){
$('#date-start-output').html(dateText);
}
});
});
If you need special formatting, you can try:
$(function(){
// Datepicker
$('#date-start').datepicker({
...
onSelect: function(){
var dateText = $.datepicker.formatDate("<b>dd</b><span>M<br />yy</span>", $(this).datepicker("getDate"));
$('#date-start-output').html(dateText);
}
});
});
Not sure it will work with HTML tags though