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