Rails 5-使用引导日期选择器，除非浏览器支持HTML5日期控件 [英] Rails 5 - Using bootstrap datepicker unless browser supports HTML5 date controls

问题描述

我正在尝试汇总一个可行的解决方案，以便在浏览器支持HTML5日期控件时使用date_field HTML5日期控件，并回退使用

I am trying to put together a working solution for using the date_field HTML5 date controls when the browser supports it and fall back to use the Bootstrap Datepicker if not. It seems like this is a common scenario to tackle but I haven't been able to find a solution that works for me (namely, one that doesn't involve manually adding a hidden field for every date field since I already have a bunch across a number of pages).

使用此文章作为指南，我有一个部分有效的解决方案(使用FireFox 49.0.2进行测试):

Using this writeup as a guide I have a partially working solution (using FireFox 49.0.2 to test):

dates.js.coffee:

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 = $('<input type="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:

show.html.erb:

<%= f.date_field :dateofbirth, placeholder: 'mm/dd/yyyy', class: 'form-control' %>

这适用于基于常规turbolinks的浏览/渲染，但是当我执行完整的浏览器刷新时，它将日期设置为"InvalidISODate".我试过在文档就绪和窗口onload上调用set_datepicker_dates()，但是都没有用.非常感谢您的指导.

This works for normal turbolinks-based browsing/rendering, HOWEVER when I do a full browser refresh it sets the dates to "InvalidISODate". I've tried calling set_datepicker_dates() on document ready and window onload as well but neither works. Many thanks in advance for any guidance.

更新

我现在正试图使Bootstrap日期选择器全面运行(即，不要将其中之一与浏览器的本机HTML5日期选择器(如果可用)结合使用)，但无济于事.我的数据库是PostgreSQL，数据库中的日期字段的类型为'date'，因此使用的默认日期样式为'ISO，MDY'.我目前设置了以下代码:

I am now trying to get just the Bootstrap datepicker working across the board (i.e. instead of a combination of one of those and the browser's native HTML5 datepicker if available), but to no avail. My database is PostgreSQL and my date fields in the db are of type 'date', thus the default datestyle of 'ISO, MDY' is being used. I have the following code currently set up:

gemfile:

gem 'bootstrap-datepicker-rails'

application.js:

application.js:

//= require bootstrap-datepicker

application.scss:

application.scss:

@import "bootstrap-datepicker3";

date_format.rb:

date_format.rb:

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

dates.js.coffee:

dates.js.coffee:

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

edit.html.erb:

edit.html.erb:

<%= f.text_field :dateofbirth, placeholder: 'mm/dd/yyyy', class: 'form-control datepicker', autocomplete: 'off' %>

现在发生的事情是，我将从选择器中选择02/01/2017，它将以"2017-01-02"的形式提交，并因此在2017年1月1日保存到数据库中，这样当我执行<%= object.dateofbirth %>时在视图中显示为"01/02/2017".我疯了吗?我疯了我应该用我的最新尝试/问题发布一个新问题吗?

What is happening now is that I will select 02/01/2017 from the picker, it gets submitted as '2017-01-02' and thus saved to the database as Jan 1st 2017 so that when I do <%= object.dateofbirth %> in a view it is displayed as '01/02/2017'. Am I crazy? I feel crazy. Should I post a new question with my latest attempt/issue?

推荐答案

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

• 将文本字段与jquery-ui-rails gem 详细链接

using date field in rails with bootstrap, I would suggest as follow

• using text field with jquery-ui-rails gem detail link

这是Gemffile

here is the Gemffile

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

在application.js内部(放在jquery下面)

inside application.js (put below jquery)

//= require jquery.ui.datepicker

在日期字段中，仅将类与datepicker一起使用，下面是示例，我还添加了其他代码，以防您想使用f.object编辑日期字段

and in your date field just use the class with datepicker, below is the sample, I also add additional code in case your want to edit the date field with 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中创建一个文件

create one file in config/initializers/date_formats.rb

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

别忘了重启您的Rails服务器

don't forget to restart your rails server

这篇关于Rails 5-使用引导日期选择器，除非浏览器支持HTML5日期控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！