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’。 我疯了吗? 我觉得很疯狂。 我应该用最新的尝试/问题发布一个新问题吗?

使用带有引导程序的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服务器