Rails 5 – 使用bootstrap datepicker，除非浏览器支持HTML5日期控件

我试图在浏览器支持时使用date_field HTML5日期控件组合一个有效的解决方案，如果没有，则回退使用Bootstrap Datepicker 。 看起来这是一个常见的解决方案，但我找不到适用于我的解决方案（即，不涉及为每个日期字段手动添加隐藏字段的解决方案，因为我已经有了一堆一些页面）。

使用此文档作为指南，我有一个部分工作的解决方案（使用FireFox 49.0.2进行测试）：

dates.js.coffee：

datepicker = $.fn.datepicker.noConflict() # return $.fn.datepicker to previously assigned value $.fn.bootstrapDP = datepicker # give $().bootstrapDP the bootstrap-datepicker functionality formatDateToPicker = (dateStr) -> # dateStr is what Rails emits "yyyy-mm-dd" parts = dateStr.split('-') if dateStr == '' return 'NoDateProvided' else if parts.length == 3 return "#{parts[1]}/#{parts[2]}/#{parts[0]}" else return 'InvalidISODate' formatDateFromPicker = (dateStr) -> # dateStr is what the datepicker emits "mm/dd/yyyy" parts = dateStr.split('/') if dateStr == '' return '' else if parts.length == 3 return "#{parts[2]}-#{parts[0]}-#{parts[1]}" else return 'Invalid picker date' set_datepicker_dates = () -> $("input[type='date']").each (i,e)=> $e = $(e) # create a hidden field with the name and id of the input[type=date] $hidden = $('') .attr('name', $e.attr('name')) .attr('id', $e.attr('id')) .val($e.val()) # modify the input[type=date] field with different attributes $e.attr('hidden-id', $e.attr('id')) # stash the id of the hidden field .attr('name', "") .attr('id', "") .val(formatDateToPicker($e.val())) # transform the date .after($hidden) # insert the hidden field # attach the picker $e.bootstrapDP({ #format: 'mm/dd/yyyy', autoclose: true, todayBtn: "linked", todayHighlight: true, clearBtn: true }) # update the hidden field when there is an edit $e.on 'change', (e)=> $e = $(e.target) $v = $('#' + $e.attr('hidden-id')) $v.val(formatDateFromPicker($e.val())) $(document).on 'turbolinks:load', -> if ($("input[type='date']").length > 0) unless Modernizr.inputtypes.date set_datepicker_dates() 

show.html.erb：

这适用于普通的基于turbolinks的浏览/渲染，但是当我进行完整的浏览器刷新时，它将日期设置为“InvalidISODate”。 我已经尝试在文件就绪和窗口onload上调用set_datepicker_dates()但是都set_datepicker_dates() 。 非常感谢任何指导。

更新

我现在正试图让Bootstrap日期选择器全面工作（即，不是其中一个和浏览器的原生HTML5日期选择器的组合，如果可用的话），但无济于事。 我的数据库是PostgreSQL，我在db中的日期字段是’date’类型，因此正在使用’ISO，MDY’的默认日期样式。 我目前设置了以下代码：

的Gemfile：

 gem 'bootstrap-datepicker-rails' 

application.js中：

 //= require bootstrap-datepicker 

application.scss：

 @import "bootstrap-datepicker3"; 

date_format.rb：

 Date::DATE_FORMATS[:default] = "%m/%d/%Y" 

dates.js.coffee：

 $(document).on 'turbolinks:load', -> $('.datepicker').datepicker() 

edit.html.erb：

现在发生的事情是我将从选择器中选择02/01/2017，它将作为“2017-01-02”提交，因此在2017年1月1日保存到数据库中，以便当我执行在视图中显示为’01 / 02/2017’。 我疯了吗？ 我觉得很疯狂。 我应该用最新的尝试/问题发布一个新问题吗？

Answer 1

使用带有引导程序的rails中的日期字段，我建议如下

• 使用带有jquery-ui-rails gem 详细信息链接的文本字段

这是Gemffile

 gem 'jquery-ui-rails', '~> 4.2.1' 

在application.js里面（放在jquery下面）

 //= require jquery.ui.datepicker 

在你的日期字段中只使用带有datepicker的类，下面是示例，我还添加了额外的代码，以防你想用f.object编辑日期字段

 <%= f.text_field :your_field, :class => 'form-control datepicker', :value=>"#{f.object.your_field.strftime("%m-%d-%Y") unless f.object.new_record? or f.object.your_field.nil?}" %> %> 

在config / initializers / date_formats.rb中创建一个文件

 Date::DATE_FORMATS[:default] = "%m-%d-%Y" 

不要忘记重启rails服务器