Changing datepicker layout from calendar type to 3 dropdowns (day, month and year)
<p>I am trying to change the date layout which spans for 100 years back from current date. The present layout is that on selection of a date from calendar pop up, that date will be shown in a textbox. But as per the requirement layout should be such that the user can choose the date from 3 distinct dropdowns of day,month and year. Gui is ::</p>

<p><a href="https://i.stack.imgur.com/fniOA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fniOA.png" alt="Middle date format is required"></a></p>

<p>The existing layout is achieved through a javascript function :</p>

<pre><code>/** function   nonlogincalendarsetup(flddat, anchor ,format, offsetyrs)
flddat : field name where calendar date will be stored 
anchor : to show div relative to anchor (calendar image)
format : date format
prevyrs : number of previous years  to display
nextyrs : number of next years  to display
Added check for flddate: If the text field for the date picker is disabled then return without initializing the calendar.
**/
function nonlogincalendarsetup (flddat, anchor, format, prevyrs, nextyrs) {
    if (flddat.disabled) { 
        return; 
    }

    var anchorid            = "#" + anchor;
    var caldate             = flddat;
    var prevyear            = prevyrs;
    var nextyear            = nextyrs;
    var yrstart, yrend, l_yrrange;

    if (flddat.id == null || flddat.id == "") {
        caldate.setAttribute("id",flddat.name);
    } else {
        caldate.setAttribute("id",flddat.id);
    }
    if (prevyrs == undefined  || nextyrs == undefined ) {
        yrstart             = year - 20;
        yrend               = year + 20;
        l_yrrange           = yrstart + ":" + yrend;
    } else {
        year='&lt;xsl:value-of select="java:format(java:java.text.SimpleDateFormat.new('yyyy'), java:java.util.Date.new())" /&gt;';
        year=parseInt(year);
        yrstart             = year - prevyear;
        yrend               = year + nextyrs;
        l_yrrange           = yrstart + ":" + yrend;
    }

    $("#" + caldate.id).datepicker({        
        yearRange: l_yrrange,
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: cal_date
    }).show();

    if ($.datepicker._datepickerShowing &amp;amp;&amp;amp; $.datepicker._lastInput == caldate)
        $.datepicker._hideDatepicker();
    else
        $.datepicker._showDatepicker(caldate);
}
</code></pre>

<p>What I could do is I defined days, month names, couple of years in <code>&lt;select&gt;</code> <code>&lt;option&gt;</code> tags like :</p>

<pre><code>&lt;div class="demo"&gt;
    &lt;p id="fullDate" &gt;&lt;/p&gt;
    &lt;select id="month" name="month"&gt;
        &lt;option value="01"&gt;January&lt;/option&gt; 
        &lt;option value="02"&gt;February&lt;/option&gt;
        &lt;option value="03"&gt;March&lt;/option&gt;
        &lt;option value="04"&gt;April&lt;/option&gt;
        &lt;option value="05"&gt;May&lt;/option&gt;
        &lt;option value="06"&gt;June&lt;/option&gt;
        &lt;option value="07"&gt;July&lt;/option&gt;
        &lt;option value="08"&gt;August&lt;/option&gt;
        &lt;option value="09"&gt;September&lt;/option&gt;
        &lt;option value="10"&gt;October&lt;/option&gt;
        &lt;option value="11"&gt;November&lt;/option&gt;
        &lt;option value="12"&gt;December&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="day" name="day"&gt;
        &lt;option value="01"&gt;1&lt;/option&gt;
        &lt;option value="02"&gt;2&lt;/option&gt;
        &lt;option value="03"&gt;3&lt;/option&gt;
        &lt;option value="04"&gt;4&lt;/option&gt;
        &lt;option value="05"&gt;5&lt;/option&gt;
        &lt;option value="06"&gt;6&lt;/option&gt;
        &lt;option value="07"&gt;7&lt;/option&gt;
        &lt;option value="08"&gt;8&lt;/option&gt;
        &lt;option value="09"&gt;9&lt;/option&gt;
        &lt;option value="10"&gt;10&lt;/option&gt;
        &lt;option value="11"&gt;11&lt;/option&gt;
        &lt;option value="12"&gt;12&lt;/option&gt;
        &lt;option value="13"&gt;13&lt;/option&gt;
        &lt;option value="14"&gt;14&lt;/option&gt;
        &lt;option value="15"&gt;15&lt;/option&gt;
        &lt;option value="16"&gt;16&lt;/option&gt;
        &lt;option value="17"&gt;17&lt;/option&gt;
        &lt;option value="18"&gt;18&lt;/option&gt;
        &lt;option value="19"&gt;19&lt;/option&gt;
        &lt;option value="20"&gt;20&lt;/option&gt;
        &lt;option value="21"&gt;21&lt;/option&gt;
        &lt;option value="22"&gt;22&lt;/option&gt;
        &lt;option value="23"&gt;23&lt;/option&gt;
        &lt;option value="24"&gt;24&lt;/option&gt;
        &lt;option value="25"&gt;25&lt;/option&gt;
        &lt;option value="26"&gt;26&lt;/option&gt;
        &lt;option value="27"&gt;27&lt;/option&gt;
        &lt;option value="28"&gt;28&lt;/option&gt;
        &lt;option value="29"&gt;29&lt;/option&gt;
        &lt;option value="30"&gt;30&lt;/option&gt;
        &lt;option value="31"&gt;31&lt;/option&gt;
    &lt;/select&gt;
    &lt;select id="year" name="year"&gt;
        &lt;option value="2011"&gt;2011&lt;/option&gt;
        &lt;option value="2012"&gt;2012&lt;/option&gt;
        &lt;option value="2013"&gt;2013&lt;/option&gt;
        &lt;option value="2014"&gt;2014&lt;/option&gt;
        &lt;option value="2015"&gt;2015&lt;/option&gt;
    &lt;/select&gt;
</code></pre>

<p>and the result was:</p>

<p><a href="https://i.stack.imgur.com/BrHZZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BrHZZ.png" alt="3 Dropdowns are shown on the left top corner"></a></p>

<p>However this arrangement will be static. It won't take up current year "itself" as in standard datepicker layouts.</p>

<p>Is there any way I can manipulate those lines below to insert them in the dropdown field ids?</p>

<pre><code>$("#" + caldate.id).datepicker({        
        yearRange: l_yrrange,
        showButtonPanel: true,
        changeMonth: true,
        changeYear: true,
        defaultDate: cal_date
    }).show();

    if ($.datepicker._datepickerShowing &amp;amp;&amp;amp; $.datepicker._lastInput == caldate)
        $.datepicker._hideDatepicker();
    else
        $.datepicker._showDatepicker(caldate);
</code></pre>

<p>Where can I access the codes of datepicker._showDatepicker(); datepicker._lastInput etc..  ? Please guide.</p>