问题

Question

我正在使用bootstrap-datepicker.js，它运行正常。

<div class="well">
<div id="dp5" class="input-append date" data-date-format="dd-mm-yyyy" data-date="12-02-2012">
<input class="span2" type="dp5" readonly="" value="12-02-2012" size="16">
<span class="add-on">
<i class="icon-th"></i>
</span>
</div>

  </div>

我想以我的形式在这种类型的轨道中使用它

<%= simple_form_for(@customer) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <%= f.input :name %>
    <%= f.input :email %>
    <%= f.input :address %>
    <%= f.input :phone %>
    <%= f.input :Projects %>
     <%= f.radio_button :status, 0, :checked => true%>Publish
    <%= f.radio_button :status, 1 %>Unpublish
    <%= f.radio_button :status, 2 %>Trash


  </div>

  <div class="form-actions">
    <%= f.button :submit %>
  </div>
<% end %>

这里我想把日期选择器放在我的表单中

`<%f.(datepicker)%>`

这样当我提交表单时，我会在参数日期中获得date的值。当我点击datepicker中的日期时，它应该隐藏，默认日期应该指向当前日期。我的appication.js包括

 $(function(){  
        $('#dp5').datepicker({
            format: 'mm-dd-yyyy'
        });
        $('#dp3').datepicker({
            format: 'mm-dd-yyyy'
        });


    });

Answer 1

我刚刚回答了类似的问题here，并在下面提供了我的答案：

我还需要让这个工作并支持多个不使用以美国为中心的日期格式的语言环境，例如：en-AU（澳大利亚），其日期格式为dd / mm / yyyy。

问题

Rails期望浏览器的日期格式为yyyy-mm-dd，但您希望在用户的语言环境中显示日期。虽然日期控件允许您指定显示格式，但它不允许您单独指定要发送回服务器的格式。

解决方案

构建一个隐藏的输入字段，将正确的格式发送回rails服务器。我使用自定义的simple_form输入控件来构建日期选择器输入字段和隐藏字段，并在输入控件更改时使用一些javascript转换为rails日期。

结果是你可以在rails中使用一个很好的bootstrap日期选择器，并将它与simple_form一起使用，如下所示：

<%= f.input :date, as: :bootstrap_datepicker %>

或使用长日期格式：

<%= f.input :date, as: :bootstrap_datepicker, input_html: { format: :long } %>

实施

创建或编辑以下文件：

<强>的Gemfile

gem 'bootstrap-sass'
gem 'bootstrap-datepicker-rails'

<强>配置/语言环境/ EN-AU.yml

en-AU:
  date:
    datepicker:
      default: "dd/mm/yyyy"
      long: "dd MM, yyyy"
    formats:
      default: ! '%d/%m/%Y'
      long: ! '%d %B, %Y'

<强>配置/语言环境/ EN-US.yml

en-US:
  date:
    datepicker:
      default: "mm/dd/yyyy"
      long: "MM dd, yyyy"
    formats:
      default: "dd/mm/yyyy"
      long: ! '%B %d, %Y'

应用/资产/样式表/ application.css.scss

@import "bootstrap-responsive"; @import "bootstrap-datepicker";

应用/资产/ Javascript角/ application.js.coffee

#= require bootstrap #= require bootstrap-datepicker #= require bootstrap-datepicker-rails

或者， app / assets / javascripts / application.js

//= require bootstrap //= require bootstrap-datepicker //= require bootstrap-datepicker-rails

应用/资产/ Javascript角/ bootstrap-datepicker-rails.js.coffee

$ -> # convert bootstrap-datepicker value to rails date format (yyyy-mm-dd) on our hidden field $(document).on 'changeDate', '.bootstrap-datepicker', (evt) -> rails_date = evt.date.getFullYear() + '-' + ('0' + (evt.date.getMonth() + 1)).slice(-2) + '-' + ('0' + evt.date.getDate()).slice(-2) $(this).next("input[type=hidden]").val(rails_date)

应用/输入/ bootstrap_datepicker_input.rb

class BootstrapDatepickerInput < SimpleForm::Inputs::Base def input text_field_options = input_html_options.with_indifferent_access format = text_field_options.delete(:format) hidden_field_options = text_field_options.dup hidden_field_options[:class] = text_field_options[:class].dup # so they won't work with same array object hidden_field_options[:id] = "#{attribute_name}_hidden" text_field_options[:class] << 'bootstrap-datepicker' text_field_options[:type] = 'text' text_field_options[:value] ||= format_date(value(object), format) set_data_option text_field_options, 'date-format', I18n.t(format, scope: [:date, :datepicker], default: :default) default_data_option text_field_options, 'provide', 'datepicker' return_string = "#{@builder.text_field(attribute_name, text_field_options.to_hash)}\n" + "#{@builder.hidden_field(attribute_name, hidden_field_options.to_hash)}\n" return return_string.html_safe end protected def default_data_option(hash, key, value) set_data_option(hash,key,value) unless data_option(hash, key) end def data_option(hash, key) hash[:data].try(:[],key) || hash["data-#{key}"] end def set_data_option(hash, key, value) hash[:data].try(:[]=,key,value) || (hash["data-#{key}"] = value) end def value(object) object.send @attribute_name if object end def format_date(value, format=nil) value.try(:strftime, I18n.t(format, scope: [ :date, :formats ], default: :default)) end end

Answer 2

使用<%= f.text_field :name_of_the_date_column, :value=>Date.today.strftime('%m-%d-%Y'), :id =>"dp5" %>

自动隐藏使用此

$("#dt5").datepicker({
        format: 'mm-dd-yyyy'
    })
.on('changeDate', function(ev){
  $('#dt5').datepicker('hide');
});

而不是

$("#dt5").datepicker();

Answer 3

您可以更简洁地表达这一点：

$("#dt5").datepicker({
                           format: 'mm-dd-yyyy',
                           autoclose: true
                           })

Answer 4

我检查了所有的答案，没有一个对我有效。我使用了以下内容：

<%= f.text_field :article_date, {"data-provide" => 'datepicker', 
                                 "data-date-format" => "yyyy-mm-dd"} %>

就我而言，MySQL期望yyyy-mm-dd格式，而datepicker默认格式为mm/dd/yyyy。恕我直言，用户不关心格式，所以我宁愿在整个地方使用相同的格式，为自己省去了很多麻烦。

如何将引导日期选择器放在我的表单中并在date参数中包含值？

4 个答案:

问题

解决方案

实施