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

【问题标题】：bootstrap-datepicker-rails set default century view to 20th centurybootstrap-datepicker-rails 将默认世纪视图设置为 20 世纪
【发布时间】：2017-03-15 14:07:40
【问题描述】：

我正在使用 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，但我不清楚如何设置此行为。

【问题讨论】：

标签： ruby-on-rails ruby twitter-bootstrap datepicker

【解决方案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"}

下面是一个例子：

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

【讨论】：

我无法让date_default_view_date 像这里描述的那样工作，但我能够使用date_default_view_date: {year: 1900, month: 0, day: 1} 让它工作。
@moveson 感谢您的评论。正如您自己看到的，defaultViewDate 为An object with keys year, month and day (can’t be set from a data attribute)。应用对象数据的一种方法是：$('[data-provide="datepicker"]').datepicker({defaultViewDate: {year: 1900, month: 0, day: 1}}); 无论如何，非常感谢

【解决方案2】：

使用来自bootstrap-datepicker sandbox的选项

一个定义在Using bootstrap-datepicker-rails你可以使用这个配置

这个demo是在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' >

【讨论】：