javascript - Bootstrap YEAR PICKER 根据我们的要求显示随机年份

Question

我正在使用 Bootstrap 日期选择器，其中有日期、月份、年份等选项用于过滤目的。现在，在选择年份时，我的 viewMode 是“years”，仅显示十年明智的年份。现在我只需要显示特定年份，例如 "2001"、 "2006"和 "2014"。我怎样才能实现这个目标？

               $('#fromYearPicker').datepicker({
                autoclose: true,
                format: " yyyy",
                viewMode: "years", 
                minViewMode: "years",
                startDate: '2001',
                endDate: new Date(),
            }).next().on("click", function() {
                $(this).prev().focus();
            });
            $("#fromYearPicker").datepicker("setDate", ' '+CurrentYear);

            $('#toYearPicker').datepicker({
                autoclose: true,
                format: " yyyy",
                viewMode: "years", 
                minViewMode: "years",
                startDate: '2001',
                endDate: new Date(),
            }).next().on("click", function() {
                $(this).prev().focus();
            });
            $("#toYearPicker").datepicker("setDate", ' '+CurrentYear);

<!-- YearPicker -->         
                    <div class="col-xs-4 credit-section yearDiv filtersDiv">
                        <div class="form-group">
                            <div class="col-xs-6"
                                style="padding-top: 0px; border-right: 1px solid #ddd;">
                                <label>From Year </label>
                            </div>
                            <div class="col-xs-6" style="padding: 0px;">
                                <div class="col-xs-12" style="padding: 0px;">
                                    <input type="text" class="form-control" id="fromYearPicker" />
                                    <div class="input-group-addon icon addon-fix">
                                        <i class="fa fa-calendar bigger-110"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4 credit-section yearDiv filtersDiv">
                        <div class="form-group">
                            <div class="col-xs-6"
                                style="padding-top: 0px; border-right: 1px solid #ddd;">
                                <label>To Year </label>
                            </div>
                            <div class="col-xs-6" style="padding: 0px;">
                                <div class="col-xs-12" style="padding: 0px;">
                                    <input type="text" class="form-control" id="toYearPicker" />
                                    <div class="input-group-addon icon addon-fix">
                                        <i class="fa fa-calendar bigger-110"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        <!-- YearPicker -->    

Answer 1

您可以直观地隐藏年份选择范围中的选项。最接近的 native 选项是 yearRange 但它不允许像 2001,2006,2014

这样的格式

$(document).ready(function() {
  $('input').datepicker({
    yearRange: '2001:2016',
    changeYear: true
  });
  $('input').click(function() {
    $('#ui-datepicker-div')
        .find('.ui-datepicker-year option')
        .filter(function() {
            return $(this).val() !== '2001' && $(this).val() !== '2006' && $(this).val() !== '2014'
        })
        .hide();
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input />