Question

我正在尝试更改从当前日期开始跨越100年的日期布局。目前的布局是，从日历弹出窗口中选择日期时，该日期将显示在文本框中。但是根据要求布局应该是这样的，用户可以从日，月和年的3个不同下拉菜单中选择日期。桂是::

现有布局是通过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);
}

我可以做的是我在<select> <option>标签中定义了天，月名，几年，如：

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

结果是：

然而，这种安排将是静态的。它不会像标准的datepicker布局那样占用当前年份本身。

有没有办法可以操作下面的这些行将它们插入下拉字段ID？

$("#" + 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._showDatepicker（）的代码; datepicker._lastInput等..？请指导。

Answer 1

不确定这是否是您正在寻找的。请评论或更新您的帖子。工作示例：https://jsfiddle.net/Twisty/9kcog02f/6/

<强> 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");
  });
});

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

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

1 个答案: