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>

Bootstrap datePicker（仅月份和年份）无法正确显示

1 个答案: