Bootstrap datePicker（仅限月份和年份）不会正确显示

Question

我找到了一个代码，它将提供一个日期选择器输入框，它只允许选择月份和年份，但输出确实显示了我选择的正确日期，但选择框仍然显示日期。

图1是我选择任何日期之前的条件 https://imgur.com/DmAud4y.png

图2是我选择任意日期后的状态 https://i.imgur.com/1iYYQiM.png

<div class='input-group date datepicker' id='table'>
    <input type='text' name="tgl" class="form-control" />
         <span class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
             </span>
</div>

这是javascript

$('#table').datepicker({
    format: 'MM/yyyy', 
    icons: {
        time: 'fa fa-time',
        date: 'fa fa-calendar',
        up: 'fa fa-chevron-up',
        down: 'fa fa-chevron-down',
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
});

我确定我确实导入了引导程序

Answer 1

您可能希望将以下属性添加到您的 datepicker 初始化中：

startView: "months",
minViewMode: "months"

工作示例：

$('#table').datepicker({
  format: 'MM/yyyy',
  icons: {
    time: 'fa fa-time',
    date: 'fa fa-calendar',
    up: 'fa fa-chevron-up',
    down: 'fa fa-chevron-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-screenshot',
    clear: 'fa fa-trash',
    close: 'fa fa-remove'
  },
  startView: "months",
  minViewMode: "months"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<div class='input-group date datepicker' id='table'>
  <input type='text' name="tgl" class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>