将 bootstrap 日期选择器添加到 date_field 时出现语法错误

Question

我正在尝试将 bootstrap 日期选择器添加到表单中的日期字段，但在加载视图时出现语法错误。

已安装 bootstrap 日期选择器：

# In Gemfile
gem 'bootstrap-datepicker-rails'

# In app/assets/stylesheets/application.css
*= require bootstrap-datepicker3

# In app/assets/javascripts/application.js
//= require bootstrap-datepicker/core

在表单的视图页面中，我有以下行：

<%= f.date_field :date, placeholder: 'YYYY-MM-DD' %>

要添加日期选择器，documentation 建议使用：

<input type="text" data-provide='datepicker' >

因此，我将行更改为：

<%= f.date_field :date, data-provide: 'datepicker', placeholder: 'YYYY-MM-DD' %>

我没有将 date_field 更改为 text_field，因为在迁移文件中它包含为 date_field。

在开发中加载页面时出现语法错误：

syntax error, unexpected tLABEL
... :date, data-provide: 'datepicker', placeholder: '...
...                     ^

我做错了什么？

Answer 1

您使用了错误的 erb 密钥格式 data-provide。为了解决这个语法问题，这样做 -

  <%= f.date_field :date, 'data-provide': 'datepicker', placeholder: 'YYYY-MM-DD' %>

现在，如果您遇到日期选择器问题，请执行此操作 -

  <%= f.date_field :date, placeholder: 'YYYY-MM-DD', class: 'datepicker' %>

并在application.js中添加js

jQuery(document).on('focus', 'input.datepicker', function() {
   opts =  {format: 'M dd, yyyy', autoclose: true, orientation: 'auto top'};
   jQuery(this).datepicker(opts);
   jQuery(".datepicker").css("z-index",10000);
});

将 bootstrap 日期选择器添加到 date_field 时出现语法错误

Syntax error upon adding bootstrap datepicker to date_field

ruby

ruby-on-rails

datepicker

twitter-bootstrap

ruby-on-rails-4