Question

使用bootstrap datepicker，我有像Date Month Year这样的选项用于过滤目的。现在，在选择年份时，我的viewMode是“年”，只显示了十年的明智之处。现在我只需要显示特定年份，例如“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

您可以直观地隐藏年份选择范围中的选项。最近的原生选项为yearRange，但不允许使用2001,2006,2014

等格式

＆＃13;

$(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();
  })
});

＆＃13;

<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 />

＆＃13;

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

1 个答案: