bootstrap-datepicker-rails将默认世纪视图设置为20世纪

Question

我正在使用bootstrap-datepicker-rails gem并使用以下代码在我的rails应用中显示日期选择器：

<%= text_field_tag :birth_date, params[:birth_date], size: 9, data: {provide: 'datepicker', date_start_view: 'decades'}, class: 'form-control' %>

以下是用户点击日期选择器时显示的内容：

可以看出：通过设置data: {date_start_view: 'decades'}选项：日期选择器默认为21世纪（2000年至2100年）。我希望它默认为20世纪，因为这个日期选择器是为了生日。

我确实浏览了bootstrap-datepicker documentation，但我不清楚如何设置此行为。

Answer 1

为了展示上个世纪的几十年，你可以考虑the following option reported in the documentation：

  

<强> defaultViewDate

     

最初打开日历时要查看的日期。日期的内部值今天仍然是默认值，但是当首次打开日期选择器时，日历将打开到defaultViewDate而不是今天。如果未使用此选项，“今天”仍为默认查看日期。

因此，您必须将 defaultViewDate 从今天更改为属于上个世纪的日期。

这意味着您必须更改代码中报告的以下部分：

data: {provide: 'datepicker', date_start_view: 'decades'}

为：

data: {provide="datepicker", date_default_view_date="01/01/1900", date_start_view="decades"}

以下示例：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/css/bootstrap-datepicker.min.css">
<script src="https://rawgit.com/uxsolutions/bootstrap-datepicker/master/dist/js/bootstrap-datepicker.min.js"></script>


<div class="input-group date" data-provide="datepicker" data-date-default-view-date="01/01/1900" data-date-start-view="decades">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用bootstrap-datepicker sandbox

中的选项

Using bootstrap-datepicker-rails中定义的您可以使用此配置

这个演示在js和html

上

$(document).ready(function(){
$('.datepicker').datepicker({
    startDate: "01/01/1900",
    endDate: "12/31/1999",// you may omit
    startView: 3,
    maxViewMode: 3
});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <link  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet">
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>


<input type="text" class='datepicker' >