【问题标题】:how to create drop down list to select month and year如何创建下拉列表以选择月份和年份
【发布时间】:2015-08-04 05:39:11
【问题描述】:

如何使用以下代码在完整日历中为选择月份和年份创建下拉选择列表:

var momObj = moment([your date string]);

如果您选择框中的每个选项都有一个日期值(我建议每个月的第一天),那么您只需将所选值传递给 FullCalendar。

[your calendar].fullCalendar('gotoDate', [selected value]);

这会将您的日历发送到所选日期。

【问题讨论】:

  • 构建几个月和几年的下拉选择并不难。您尝试过什么(发布您的代码),您在哪里遇到困难?您必须自己尝试解决方案;我们不是来免费为您编写代码的。

标签: javascript jquery


【解决方案1】:

试试这个:

<select class="form-control bt_select" name="month" id="month">
  <option value="">Select Month</option>
</select>

<script type="text/javascript">
var d = new Date(),
    n = d.getMonth(),
    h = d.getFullYear();

var monthArray = new Array();
monthArray[0] = "January";
monthArray[1] = "February";
monthArray[2] = "March";
monthArray[3] = "April";
monthArray[4] = "May";
monthArray[5] = "June";
monthArray[6] = "July";
monthArray[7] = "August";
monthArray[8] = "September";
monthArray[9] = "October";
monthArray[10] = "November";
monthArray[11] = "December";
for(m = 0; m <= 11; m++) {
    var optn = document.createElement("OPTION");
    optn.text = monthArray[m];
    // server side month start from one
    optn.value = (m+1);

    // if specific month selected
    if ( m == 0) {
        optn.selected = true;

    }
    if( m > n )
    {
        optn.disabled = true;
    }

    document.getElementById('month').options.add(optn);
}
</script>

创建年份下拉菜单:

  <select name="year" id="year" class="form-control bt_select">
      <option value="">Select Year</option>
  </select>


<script type="text/javascript">
for(y = 2016; y <= 2025; y++) {
    var optn = document.createElement("OPTION");
    optn.text = y;
    optn.value = y;
    if(y > h)
        optn.disabled = true;

    // if specific-year is 2015 selected
    if (y == 2015) {
        optn.selected = true;
    }

    document.getElementById('year').options.add(optn);
}

【讨论】:

    【解决方案2】:

    只需使用jQuery datepicker

    $( ".selector" ).datepicker( "setDate", "10/12/2012" );

    【讨论】:

    • 如何在完整的日历标题字段中使用它。我想从用户那里得到输入,比如下拉列表..
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多