启用在日期选择器的下拉列表中设置输入值

Question

下面是我的代码，它的工作很酷，但我想在日期选择器的输入中显示 2016 年 1 月，但在日期选择器的下拉列表中，它显示 2016 年 11 月作为选择我想显示与输入字段相同

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<div class="fleft">
       <form method="post">

           <input type="text" id="datepicker" class="date-picker" name="month" id="autoclose" placeholder="filter by month" value="<?=$this->session->userdata('months_day_filter')?>" />

        </form>
        </div>

    <table>
        <thead>

            <th>Name</th>           
            <th>Absent</th>
            <th>Leave</th>

            <th>Days</th>
        </thead>
        <? foreach ($users as $user){ ?>
                <tr class="">
                    <td><?=$user['f_name'] .' '. $user['l_name'] ?></td>
                    <td ><?=$user['absents']?></td>             
                    <td ><?=$user['leave_count']?></td>         
                    <td ><?=$user['working_days']?></td>                

                </tr>   
             <? } ?>

        </tbody>

    </table>

<script type="text/javascript">
$(function() {
  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    //defaultDate: null,
    defaultDate: <?=date('y-m')?>,
    onClose: function(dateText, inst) {
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        //alert(this.value);
     $('.month_form').submit();
    }

  });
});
</script>
    <style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

请帮我在日期选择器的下拉菜单中设置输入值

Answer 1

已完成，将您的代码替换为以下内容。或添加 monthNamesShort ：fullmonth_array

$(function() {
var fullmonth_array = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];

  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    //defaultDate: null,
    defaultDate: "<?=date('y-m')?>",
 monthNamesShort : fullmonth_array,
    onClose: function(dateText, inst) {
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        //alert(this.value);
     $('.month_form').submit();
    }

  });
});

Answer 2

您的 defaultDate 的格式应与 dateFormat 的格式相同。至少文档中是这么写的 (http://api.jqueryui.com/datepicker/#option-defaultDate)。所以该行应该是

defaultDate: <?= date('F Y') ?>,

甚至更好

defaultDate: new Date(<?= date('Y') ?>, <?= date('m') ?>, 1),

Answer 3

将最后一个功能代码替换为以下内容。

$(function() {
var fullmonth_array = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];

  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'MM yy',
    //defaultDate: null,
    defaultDate: "<?=date('y-m')?>",
 monthNamesShort : fullmonth_array,
    onChangeMonthYear: function(year, month, inst){
         var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        //alert(this.value);
     $('.month_form').submit();
    }

  });
});

这样就不需要保留完成按钮，所以您可以通过删除 showButtonPanel 或设置 false 来删除它。

启用在日期选择器的下拉列表中设置输入值

enable to set the input value inside dropdown of datepicker

javascript

jquery

jquery-plugins