jQuery UI DatePicker output date format

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.

Why are you populating another field, when you want the format to be the same? — Rowland Shaw
– Rowland Shaw, Commented Jan 20, 2012 at 8:58

nicopico · Accepted Answer · 2012-01-20 09:07:33Z

10

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

answered Jan 20, 2012 at 9:07

nicopico

3,6361 gold badge30 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kuzzy Over a year ago

Thanks @Plastic_zo1, it's work. Still need to get current date and show it after page load, any ideas?

nicopico Over a year ago

You can use the setDate method to set the date after the datepicker initialization: $('#date-start').datepicker("setDate", new Date());

Collectives™ on Stack Overflow

jQuery UI DatePicker output date format

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related