Bootstrap Datepicker - 只有月份和年份不起作用
Posted
技术标签:
【中文标题】Bootstrap Datepicker - 只有月份和年份不起作用【英文标题】:Boostrap Datepicker - months and year only doesn't work 【发布时间】:2020-08-27 23:39:08 【问题描述】:我正在研究如何使用bootstrap datepicker
,但我需要它只显示月份或年份,就像这样:
但结果却变成了这样:
我只需要选择月份和年份,而不是整个日历。 下面是我的整个代码sn-p:
$(document).ready(() =>
$("#datepicker").datepicker(
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
);
)
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Teasting Website</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<!--bootstrap-datepicker css-->
<link rel="stylesheet" href="/src/datepicker/css/datepicker.css">
</head>
<body>
<input type="text" readonly="readonly" name="date" id="datepicker">
<script src="/src/jquery.js"></script>
<!--Bootstrap js-->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<script src="/src/datepicker/js/bootstrap-datepicker.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
【问题讨论】:
尝试写<script src="/src/bootstrap/js/bootstrap.min.js"></script>
而不是<script src="src/bootstrap/js/bootstrap.min.js"></script>
我在开头加了/
添加/
后还是不行
引导 1.9.0?这是我下载的网站。 uxsolutions.github.io/bootstrap-datepicker/…
@ElijahLeis,请查看我的新答案
【参考方案1】:
您正在寻找的功能在 datetimepicker 中,而不仅仅是在 datepicker 中。它拥有您想要的 UI。
注意:日历会显示月或年,但当您选择特定值时,它会显示为 YYYY-MM 格式。从日历中选择值后,无法在文本框中显示 YYYY 或 MM。
$(function()
$('#datetimepicker2').datetimepicker(
viewMode: 'months',
format: 'YYYY-MM'
);
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker2' />
</div>
</div>
</div>
</div>
</div>
【讨论】:
以上是关于Bootstrap Datepicker - 只有月份和年份不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Django 表单 - django-bootstrap-datepicker-plus 未呈现 datepicker