Bootstrap datePicker(仅限月份和年份)无法正确显示
Bootstrap datePicker(Months and years only) wont show properly
我找到了一个代码,它将提供一个日期选择器输入框,它只允许选择月份和年份,但输出确实显示了我选择的正确日期,但 select 框仍然显示日期。
图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'
}
});
我确定我确实导入了 bootstrap
您可能希望将以下属性添加到 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>
我找到了一个代码,它将提供一个日期选择器输入框,它只允许选择月份和年份,但输出确实显示了我选择的正确日期,但 select 框仍然显示日期。
图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'
}
});
我确定我确实导入了 bootstrap
您可能希望将以下属性添加到 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>