0

我一直在为我的 UI 使用 AdminLTE 引导程序。它已经带有 datepicker 和 daterangepicker 插件。我一直在寻找有关如何将 datarangepicker 设置为仅显示年份的答案，但到目前为止，我只遇到过将 datepicker 设置为我想要的格式的问题。我尝试使用 datepicker 的解决方案将我的 daterangepicker 设置为只有几年，但它并没有为我锻炼。我怎样才能做到这一点？我不想使用 datepicker，因为它只选择一个日期，而 daterangepicker 允许我一次选择 2 个日期。

这是我尝试过的日期选择器解决方案。它仅适用于 datepicker，但不适用于 daterangepicker：

$('#reservation').datepicker({
    format: "yyyy",
    autoclose: true,
    minViewMode: "years"});

我尝试将其包含在我的 daterangepicker 中，但什么也没发生：

$('#reservation').daterangepicker({
    format: "yyyy",
    autoclose: true,
    minViewMode: "years"});

这是我的 daterangepicker 目前的样子：

这是我希望我的 daterrangepicker 看起来像的样子（取自 datepicker）：

4

1 回答 1

1

这是我找到的最好方法->链接

在此代码中使用 bootstrap-datepicker：

$('#education-range input').each(function () {
        $(this).datepicker({
            autoclose: true,
            format: " yyyy",
            viewMode: "years",
            minViewMode: "years"
        });
        $(this).datepicker('clearDates');
    });
<link href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<div class="input-group input-daterange" id="education-range">
                                <input type="text" class="form-control" value="2012-04-05">
                                <div class="input-group-addon">to</div>
                                <input type="text" class="form-control" value="2012-04-19">
</div>

于 2018-02-19T13:59:58.373 回答