如何将 daterangepicker 设置为 ONLY YEARS答案

【问题标题】：How to set daterangepicker to ONLY YEARS如何将 daterangepicker 设置为 ONLY YEARS
【发布时间】：2017-02-24 19:17:29
【问题描述】：

我一直在为我的 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）：

【问题讨论】：

你想要年复一年
"我尝试使用 datepicker 的解决方案将我的 daterangepicker 设置为只有几年，但它对我没有 [工作]。" - 那是什么解决方案？请显示不起作用的代码，这样我们就可以查看您尝试过的内容，或许还能发现您的代码中可能导致它“不起作用”的其他错误。顺便说一句，您希望该代码做什么，它做错了什么？我们可以从问题中猜出您的意思，但最好明确具体地说明期望和结果。
您好，很抱歉。我编辑了我的问题，包括解决方案。我一开始试图包含链接，但 stackoverflow 没有给我特权。

标签： jquery twitter-bootstrap jquery-ui datepicker bootstrap-daterangepicker

【解决方案1】：

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

在这段代码中使用 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>

【讨论】：