Jquery ui 将日期选择器布局从日历类型更改为3个下拉列表（日、月和年）

我正试图改变日期布局，它从当前日期向后跨越100年。当前的布局是，在从日历弹出窗口中选择日期时，该日期将显示在文本框中。但是根据需求，布局应该是这样的，用户可以从3个不同的下拉列表中选择日期，分别是日、月和年。Gui是：

现有布局通过javascript函数实现：

/** 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='<xsl:value-of select="java:format(java:java.text.SimpleDateFormat.new('yyyy'), java:java.util.Date.new())" />';
        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; $.datepicker._lastInput == caldate)
        $.datepicker._hideDatepicker();
    else
        $.datepicker._showDatepicker(caldate);
}

---

我在哪里可以访问datepicker的代码。\u showDatepicker（）；日期选择器。\u lastInput等？请指导。

不确定这是否是您要找的。请评论或更新您的帖子。工作示例：

HTML

<label for="startDate">Date of Birth<em>*</em>:</label>
<input class="date-picker" style="border: 0; height: 0; width: 0;" />
<select id="bMon" class='datePart'></select>
<select id="bDay" class='datePart'></select>
<select id="bYear" class='datePart'></select>
<a href="#" id="setDate" style="font-size: 65%; text-decoration: none; color: #999">Change</a>

出生日期*：

JQuery

$(function() {
  $('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: new Date(),
    minDate: new Date(1998 - 82, 1, 1),
    yearRange: "1916:2016",
    dateFormat: 'MM-dd-yy',
    defaultDate: new Date(1998, 0, 1),
    onClose: function(dt, dp) {
      var parts = dt.split("-");
      var mm = parts[0], dd = parts[1], yy = parts[2];
      console.log(mm,dd,yy);
      $("#bMon").append("<option selected='selected'>" + mm + "</option>");
      $("#bDay").append("<option selected='selected'>" + dd + "</option>");
      $("#bYear").append("<option selected='selected'>" + yy + "</option>");
      $(".datePart").show("slow");
    }
  });
  $("#setDate").click(function(e) {
    e.preventDefault();
    $(".date-picker").datepicker("show");
  });
});

$（函数（）{
$（'.date picker'）.date picker({
变化月：对，
变化年：是的，
maxDate:新日期（），
minDate：新日期（1998-82,1,1），
年份范围：“1916:2016”，
日期格式：“年月日”，
默认日期：新日期（1998,0,1），
onClose：函数（dt，dp）{
var parts=dt.拆分（“-”）；
var mm=零件[0]，dd=零件[1]，yy=零件[2]；
控制台日志（月、日、年）；
$（“#bMon”）。追加（“+mm+”）；
$（“#bDay”）。追加（“+dd+”）；
$（“#bYear”）。追加（“+yy+”）；
$（“.datePart”）.show（“慢”）；
}
});
$（“#设置日期”）。单击（函数（e）{
e、 预防默认值（）；
$（“.date picker”）.datepicker（“show”）；
});
});

---

这将为您提供100年的范围，将结果格式化为3个选定项目，并可在以后更改。我选择了一年，将一个人作为默认的18岁，但当然你也可以选择任何其他日期。

你想让

日期选择器

给你下拉列表，还是想使用

日期选择器

选项填充你已经拥有的各种

选择

元素？在此工作：

<label for="startDate">Date of Birth<em>*</em>:</label>
<input class="date-picker" style="border: 0; height: 0; width: 0;" />
<select id="bMon" class='datePart'></select>
<select id="bDay" class='datePart'></select>
<select id="bYear" class='datePart'></select>
<a href="#" id="setDate" style="font-size: 65%; text-decoration: none; color: #999">Change</a>

$(function() {
  $('.date-picker').datepicker({
    changeMonth: true,
    changeYear: true,
    maxDate: new Date(),
    minDate: new Date(1998 - 82, 1, 1),
    yearRange: "1916:2016",
    dateFormat: 'MM-dd-yy',
    defaultDate: new Date(1998, 0, 1),
    onClose: function(dt, dp) {
      var parts = dt.split("-");
      var mm = parts[0], dd = parts[1], yy = parts[2];
      console.log(mm,dd,yy);
      $("#bMon").append("<option selected='selected'>" + mm + "</option>");
      $("#bDay").append("<option selected='selected'>" + dd + "</option>");
      $("#bYear").append("<option selected='selected'>" + yy + "</option>");
      $(".datePart").show("slow");
    }
  });
  $("#setDate").click(function(e) {
    e.preventDefault();
    $(".date-picker").datepicker("show");
  });
});