jQuery ui datepicker as custom date time format

Question

I want to make a calendar as the image below-

            <div class="col-sm-3">
                <span id="month">JAN</span><br>
              <span id="day">SAT</span>
           </div>
            <div class="col-sm-3">
                <span id="date">01</span>
           </div>
            <div class="col-sm-3">
                <input id="datepicker" type="text">
              <div id="dateoutput"></div>
           </div>


    $(function() {
        $("#datepicker").datepicker({
            dateFormat: 'M D dd yy',
            onSelect: function(dateText, inst) {
                var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
                var dateText1 = $.datepicker.formatDate("D, d M yy", date, inst.settings);
                $("#dateoutput").html("Chosen date is <b>" + dateText1 + "</b>");
            }
        });
        $("#datepicker").datepicker("setDate", new Date);
    });

By this script I can make custom date format on select, but how can I get this output on page load?

For more - http://smartmux.com/test/calendar.html

Answer 1

try this,

$(document).ready(function() {
   $('#datepicker').datepicker("setDate", your_Date_here);
});

Answer 2

You could use this in the onselect method for updating your divs accordingly

var dateparts = $.datepicker.formatDate("D, d M yy", date, inst.settings).split(" ");

var shtml = "<div>Depart"+
    "<span>"+ dateparts[0] +"</span>"+
    "<span>"+ dateparts[1] +"</span>"+
    "<span>"+ dateparts[2] +"</span>"+
    "<span class="calendarIcon"></span>"+
"</div>"
$("#dateoutput").html(shtml);

and then place the divs and span as you want using css